🚀 Lanzamiento v2.3: Activa y desactiva métodos de pago para tu Conekta Checkout desde el Panel, sin tocar tu código. Ver documentación →
DocumentaciónCheckout DemoAPILibreríasTarjetas de PruebasEstado del ServicioChangelog
Documentación
Iniciar Sesión

Suscripciones por medio de Component embebido/redireccionado

Puedes incluir planes para suscripciones en Component embebido y redireccionado.

Creando el componente embebido con planes para suscripciones

1. Crea un plan

Crea un plan a través del panel o desde nuestro API de planes

curl --request POST 'https://api.conekta.io/plans' \
--header 'Accept: application/vnd.conekta-v2.3.0+json' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer key_xxxxxxxxxxxxxx' \
--data-raw '{
	"amount": 1000000,
  "currency": "MXN",
  "expiry_count": 1,
  "frequency": 2,
  "id": "nuevo-plan",
  "interval": "week",
  "name": "Nuevo plan",
  "trial_period_days": 0,
  "max_retries": 3,
  "retry_delay_hours": 50
}
'
{
  "id": "nuevo-plan",
  "livemode": false,
  "created_at": 1743712372,
  "name": "Nuevo plan",
  "amount": 1000000,
  "currency": "MXN",
  "interval": "week",
  "frequency": 2,
  "expiry_count": 1,
  "trial_period_days": 0,
  "max_retries": 3,
  "retry_delay_hours": 50,
  "object": "plan"
}

En caso de ya tener un plan creado con anterioridad puedes simplemente usar el plan_id

2. Crea una orden con una lista de planes

ℹ️

Las suscripciones solo son compatibles con el método de pago Tarjeta. Asegúrate de tener habilitado el método de pago Tarjeta en tu Conekta Panel, en la sección de métodos de pago, antes de realizar pruebas.

Al momento de crear la orden debes enviar el parámetro plan_ids, el cual es una lista de id de planes que quieras habilitar a tus clientes para una suscripción. Esta lista puede contener uno o multiples ids.

curl --request POST 'https://api.conekta.io/orders' \
  --header 'Accept: application/vnd.conekta-v2.3.0+json' \
  --header 'Authorization: Bearer key_xxxxxxxxxxxxxx' \
  --header 'Content-Type: application/json' \
  --data-raw '{
    "currency": "MXN",
    "customer_info": {
      "name": "Prueba",
      "email": "[email protected]",
      "phone": "+5218181818181"
    },
    "shipping_lines": [
      {
        "amount": 0
      }
    ],
    "line_items": [
      {
        "name": "Suscripcion a Nuevo Plan",
        "quantity": 1,
        "unit_price": 30
      }
    ],
    "checkout": {
      "name": "Embebido Prueba",
      "plan_ids": ["nuevo-plan"],
      "type": "Integration",
      "expires_at": 1746015865,
      "max_failed_retries": 3
    }
  }'
{
  "livemode": false,
  "amount": 30,
  "currency": "MXN",
  "payment_status": null,
  "amount_refunded": 0,
  "split_payment": null,
  "customer_info": {
    "email": "[email protected]",
    "phone": "+5218181818181",
    "name": "Prueba",
    "corporate": null,
    "customer_id": null,
    "date_of_birth": null,
    "national_id": null,
    "object": "customer_info"
  },
  "shipping_contact": null,
  "channel": {
    "segment": "Checkout",
    "checkout_request_id": "asdf1234-asdf-1234-asdf-asdf1234",
    "checkout_request_type": "Integration",
    "id": "channel_2xasdf1234adsafs"
  },
  "fiscal_entity": null,
  "checkout": {
    "id": "asdf1234-asdf-1234-asdf-asdf1234",
    "name": "Embebido Prueba",
    "livemode": false,
    "emails_sent": 0,
    "success_url": "",
    "failure_url": "",
    "payments_limit_count": null,
    "paid_payments_count": 0,
    "sms_sent": 0,
    "status": "Issued",
    "type": "Integration",
    "recurrent": false,
    "starts_at": 1745474400,
    "expires_at": 1746015865,
    "allowed_payment_methods": ["card"],
    "exclude_card_networks": [],
    "needs_shipping_contact": false,
    "monthly_installments_options": [],
    "monthly_installments_enabled": false,
    "redirection_time": null,
    "force_3ds_flow": false,
    "plan_id": null,
    "metadata": {},
    "can_not_expire": false,
    "three_ds_mode": null,
    "max_failed_retries": null,
    "object": "checkout",
    "is_redirect_on_failure": false,
    "on_demand_enabled": false
  },
  "object": "order",
  "id": "ord_2xasdf1234adsaf",
  "metadata": {},
  "is_refundable": false,
  "processing_mode": null,
  "created_at": 1745515852,
  "updated_at": 1745515852,
  "line_items": {
    "object": "list",
    "has_more": false,
    "total": 1,
    "data": [
      {
        "name": "Suscripcion a: nuevo-plan",
        "description": null,
        "unit_price": 30,
        "quantity": 1,
        "sku": null,
        "tags": null,
        "brand": null,
        "type": null,
        "object": "line_item",
        "id": "line_item_2xsgHdf1234adsaf",
        "parent_id": "ord_2xasdf1234adsaf",
        "metadata": {},
        "antifraud_info": {}
      }
    ]
  },
  "shipping_lines": {
    "object": "list",
    "has_more": false,
    "total": 1,
    "data": [
      {
        "amount": 0,
        "carrier": null,
        "method": null,
        "tracking_number": null,
        "object": "shipping_line",
        "id": "ship_lin_2xsgdf1234adsaf",
        "parent_id": "ord_2xasdf1234adsaf",
        "metadata": null
      }
    ]
  },
  "tax_lines": null,
  "discount_lines": null,
  "charges": null
}

3. Inicializa el component

De la respuesta obtenida en el paso 2, utiliza el checkout.id obtenido para el campo checkoutRequestId que esta en el objeto de configuración del Componente. Seguimos los pasos de la documentación del Component

<html>
  <head>
    <meta charset="utf-8" />
    <title>Componente Embedded</title>
    <script
      type="module"
      crossorigin
      src="https://pay.conekta.com/v1.0/js/conekta-checkout.min.js"
    ></script>
    <!-- En este archivo esta la config del componente -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>Tienda de Prueba</p>
    <div id="example"></div>
    <div style="height: 200px"></div>
    <script>
      function initializeConekta() {
        const options = {
          backgroundMode: 'lightMode',
          colorPrimary: '#081133',
          colorText: '#585987',
          colorLabel: '#585987',
          inputType: 'minimalMode',
          autoResize: true,
        };
        const config = {
          locale: 'es',
          publicKey: 'key_xxxxxx',
          targetIFrame: '#example',
          checkoutRequestId: 'xxxxxx-xxxx-xxxx-xxx-xxxxxxx',
          // useExternalSubmit: true
        };

        const callbacks = {
          onCreateTokenSucceeded: function (token) {
            console.log('token', token);
          },
          onCreateTokenError: function (error) {
            console.log('error tokenizando tarjeta', error);
          },
          onGetInfoSuccess: function (loadingTime) {
            console.log(
              'loading time en milisegundos',
              loadingTime.initLoadTime
            );
          },
          onFinalizePayment: function (order) {
            console.log('success: ', order);
          },
          onErrorPayment: function (error) {
            console.log('error en pago: ', error);
          },
        };

        window.ConektaCheckoutComponents.Integration({
          config,
          callbacks,
          options,
        });
      }

      // Verifica que el script externo de Conekta esté disponible antes de ejecutar
      window.addEventListener('load', function () {
        if (window.ConektaCheckoutComponents) {
          initializeConekta();
        } else {
          console.error('El script de Conekta no está disponible.');
        }
      });
    </script>
  </body>
</html>

Con esto obtenemos el componente embebido donde tus clientes pueden elegir de una lista de planes para suscribirse:


Creando el component redireccionado con planes para suscripciones

Suscripciones en nuestro Componente

Component redireccionado con planes para suscripciones

Para incluir planes en component redireccionado debes seguir los mismos pasos de crear un plan y una orden. Pero en al crear la orden, para el campo type se debe enviar el valor HostedPayment. Una vez procesado el pago (exitoso o fallido), el sistema redirigirá al cliente automáticamente, tras el tiempo configurado en redirectiontime, a las URLs predefinidas en los campos successurl en caso de éxito, o el campo failure_url si el pago no se concreta.

curl --request POST 'https://api.conekta.io/orders' \
--header 'Accept: application/vnd.conekta-v2.3.0+json' \
--header 'Authorization: Bearer key_xxxxxxxxxxxxxx' \
--header 'Content-type: application/json' \
--data-raw  '{
    "currency": "MXN",
    "customer_info": {
        "customer_id": "cus_2xhsh4NXapoasdf1234"
        },
    "line_items": [
      {
        "name": "Suscripcion a Nuevo Plan",
        "quantity": 1,
        "unit_price": 1000000
      }
    ],
    "checkout": {
        "type": "HostedPayment",
        "success_url": "https://www.mysite.com/payment/confirmation",
        "failure_url": "https://www.mysite.com/payment/failure",
        "plan_ids": ["nuevo-plan"]
    }
}'
{
    "livemode": false,
    "amount": 1000000,
    "currency": "MXN",
    "payment_status": null,
    "amount_refunded": 0,
    "split_payment": null,
    "customer_info": {
        "email": "[email protected]",
        "phone": "522929292929229",
        "name": "Prueba prueba",
        "corporate": false,
        "customer_id": "cus_2xhsh4NXapoasdf1234",
        "date_of_birth": null,
        "national_id": null,
        "object": "customer_info",
        "customer_custom_reference": null
    },
    "shipping_contact": null,
    "channel": {
        "segment": "Checkout",
        "checkout_request_id": "asdf1234-as12-sd12-df23-asdf12345",
        "checkout_request_type": "HostedPayment",
        "id": "channel_2xhsh4NXapoasdf1234"
    },
    "fiscal_entity": null,
    "checkout": {
        "id": "asdf1234-as12-sd12-df23-asdf12345",
        "name": "ord-2xhsh4NXapoasdf1234",
        "livemode": false,
        "emails_sent": 0,
        "success_url": "https://www.mysite.com/payment/confirmation",
        "failure_url": "https://www.mysite.com/payment/failure",
        "payments_limit_count": null,
        "paid_payments_count": 0,
        "sms_sent": 0,
        "status": "Issued",
        "type": "HostedPayment",
        "recurrent": false,
        "starts_at": 1745992800,
        "expires_at": 1746251999,
        "allowed_payment_methods": [
            "card"
        ],
        "exclude_card_networks": [],
        "needs_shipping_contact": false,
        "monthly_installments_options": [],
        "monthly_installments_enabled": false,
        "redirection_time": null,
        "force_3ds_flow": false,
        "plan_id": "nuevo-plan",
        "metadata": {},
        "can_not_expire": false,
        "three_ds_mode": null,
        "max_failed_retries": null,
        "object": "checkout",
        "is_redirect_on_failure": true,
        "slug": "2877ba0cfb7c4f34b91bf7424easdf12345",
        "url": "https://pay.conekta.io/checkout/2877ba0cfb7c4f34b91bf7424easdf12345"
    },
    "object": "order",
    "id": "ord_2xhsh4NXapoasdf1234",
    "metadata": {},
    "is_refundable": false,
    "processing_mode": null,
    "created_at": 1746017003,
    "updated_at": 1746017003,
    "line_items": {
        "object": "list",
        "has_more": false,
        "total": 1,
        "data": [
            {
                "name": "Suscripcion a Nuevo Plan",
                "description": null,
                "unit_price": 1000000,
                "quantity": 1,
                "sku": null,
                "tags": null,
                "brand": null,
                "type": null,
                "object": "line_item",
                "id": "line_item_2xhsh4NXapoasdf1234",
                "parent_id": "ord_2xhsh4NXapoasdf1234",
                "metadata": {},
                "antifraud_info": {}
            }
        ]
    },
    "shipping_lines": null,
    "tax_lines": null,
    "discount_lines": null,
    "charges": null
}

En tu sitio tienes que hacer redirección a la url regresada en el paso anterior, donde el usuario podrá efectuar su pago en el Checkout:

{
	"url": "https://pay.conekta.io/checkout/2877ba0cfb7c4f34b91bf7424easdf12345"
}

Updated 14 days ago

Did this page help you?