DocumentaciónAPIDevToolsRecipesForoTarjetas de PruebasEstado del ServicioChangelog
Documentación
Iniciar Sesión

Suscripciones por medio de Component embebido/redireccionado

Suggest Edits

Puedes incluir planes para suscripiciones 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.2.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

🚧

Nota importante

Por el momento, suscripciones solo se pueden pagar con el método de pago de tarjetas, por lo que es el único método de pago que puedes enviar en la petición.

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.

También, solo debes enviar card para el campo allowed_payment_methods

curl --request POST 'https://api.conekta.io/orders' \
--header 'Accept: application/vnd.conekta-v2.2.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
		}
	],
	"checkout": {
		"name": "Embebido Prueba",
		"allowed_payment_methods": ["card"],
    "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://assets.conekta.com/component/4.18.0/component-static.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.2.0+json' \
--header 'Authorization: Bearer key_xxxxxxxxxxxxxx' \
--header 'Content-type: application/json' \
--data-raw  '{
    "currency": "MXN",
    "customer_info": {
        "customer_id": "cus_2xhsh4NXapoasdf1234"
    },
    "checkout": {
        "allowed_payment_methods": [
            "card"
        ],
        "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 5 days ago