Guía de migración de Checkout
La versión heredada de Checkout les presentaba a los clientes un cuadro de diálogo para recopilar los datos de tarjeta y devolvía un token o una fuente a tu sitio web. En cambio, la nueva versión de Checkout es una página inteligente alojada por Stripe que crea pagos o suscripciones. Acepta Apple Pay, dinámico,3D Securey muchas otras funciones.
La versión actual de Checkout proporciona mayor flexibilidad y es compatible con ítems de factura dinámicos, Connect, reutilización de clientes existentes y funcionalidades avanzadas de suscripciones. También puedes usar la integración de solo cliente que es más rápida de configurar e ideal para catálogos más simples de productos.
Para migrar de la versión heredada a la versión actual, sigue la guía que se ajuste mejor a tu modelo de negocio. Cada guía recomienda una ruta de integración junto con un código de ejemplo.
Catálogo de productos y precios dinámicos
Por ejemplo, tienes un gran catálogo de productos o necesitas compatibilidad para ítems de factura generados en forma dinámica (como donaciones o impuestos).
Si eres proveedor de SaaS que factura a sus usuarios y necesita compatibilidad para funciones avanzadas.
Plataformas y marketplaces Connect
Si operas un marketplace que conecta a proveedores de servicios con clientes.
Cómo guardar métodos de pago para un uso futuro
Si operas una empresa que les cobra a los clientes recién después de la prestación de los servicios.
Catálogo simple de productos con precios fijos
Si vendes algunos productos con precios predeterminados.
Si eres un proveedor de SaaS con un plan de suscripción mensual.
Al seguir la guía de migración correspondiente, también puedes consultar la tabla de conversión para establecer las correspondencias de los parámetros y las opciones de configuración específicos entre las dos versiones de Checkout.
Catálogo de productos y precios dinámicos
Si vendes productos para los que determinas importes o ítems de factura dinámicos (p. ej., porque tienes un gran catálogo de productos o por donaciones), consulta cómo aceptar pagos puntuales.
Es posible que hayas utilizado la versión heredada de Checkout para crear un token o una fuente en el cliente, y que lo hayas pasado a tu servidor para crear un cargo. No obstante, la versión actual de integración del servidor de Checkout revierte este flujo. Primero, creas una sesión en tu servidor, pasas el ID a tu cliente y rediriges al cliente a Checkout, quien será remitido nuevamente a tu aplicación después de que se confirme la transacción.
Antes
Con la versión heredada de Checkout, mostrabas el importe y la descripción dinámicos y recopilabas los datos de la tarjeta del cliente.
<form action="/purchase" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=
data-name="Custom t-shirt" data-description="Your custom designed t-shirt" data-amount="{{ORDER_AMOUNT}}" data-currency="usd"> </script> </form>"pk_test_TYooMQauvdEDq54NiTphI7jx"
A continuación, enviabas el token o la fuente resultante a tu servidor y efectuabas el cargo.
Después
Con la versión actual de Checkout, primero creas una sesión de Checkout en tu servidor.
Nota
Si utilizas una de nuestras bibliotecas de cliente, actualiza a la última versión de la biblioteca para usar la API Checkout Sessions.
A continuación, pasa el ID de la sesión a tu cliente y le rediriges a Checkout para que complete el pago.
const stripe = Stripe(
); const checkoutButton = document.getElementById('checkout-button'); checkoutButton.addEventListener('click', () => { stripe.redirectToCheckout({ // Make the id field from the Checkout Session creation API response // available to this file, so you can provide it as argument here // instead of the {{CHECKOUT_SESSION_ID}} placeholder. sessionId: '{{CHECKOUT_SESSION_ID}}' }) // If `redirectToCheckout` fails due to a browser or network // error, display the localized error message to your customer // using `error.message`. });'pk_test_TYooMQauvdEDq54NiTphI7jx'
El cliente será redirigido a la success_url
una vez que complete el pago.
Si necesitas completar el pedido de los productos después del pago, consulta Cumplimiento de la orden de compra en Checkout.
Suscripciones dinámicas
Si prestas servicios de suscripción que se determinan de forma dinámica o necesitan soporte con otras funciones avanzadas, consulta cómo configurar una suscripción.
Es posible que hayas utilizado la versión heredada de Checkout para crear un token o una fuente en el cliente, y que lo hayas pasado a tu servidor para crear un cliente y una suscripción. No obstante, la nueva versión de integración del servidor de Checkout revierte este flujo. Primero, creas una sesión en tu servidor, pasas el ID a tu cliente y rediriges al cliente a Checkout, quien será remitido nuevamente a tu aplicación después de que se confirme la transacción.
Antes
Con la versión heredada de Checkout, mostrabas los datos de la suscripción y recopilabas los datos de la tarjeta del cliente.
<form action="/subscribe" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=
data-name="Gold Tier" data-description="Monthly subscription with 30 days trial" data-amount="2000" data-label="Subscribe"> </script> </form>"pk_test_TYooMQauvdEDq54NiTphI7jx"
A continuación, enviabas el token o la fuente resultante a tu servidor para crear un cliente y una suscripción.
Después
Con la versión actual de Checkout, primero creas una sesión de Checkout en tu servidor.
Nota
Si utilizas una de nuestras bibliotecas de cliente, actualiza a la última versión de la biblioteca para usar la API Checkout Sessions.
A continuación, pasa el ID de la sesión a tu cliente y le rediriges a Checkout para que complete el pago.
const stripe = Stripe(
); const checkoutButton = document.getElementById('checkout-button'); checkoutButton.addEventListener('click', () => { stripe.redirectToCheckout({ // Make the id field from the Checkout Session creation API response // available to this file, so you can provide it as argument here // instead of the {{CHECKOUT_SESSION_ID}} placeholder. sessionId: '{{CHECKOUT_SESSION_ID}}' }) // If `redirectToCheckout` fails due to a browser or network // error, display the localized error message to your customer // using `error.message`. });'pk_test_TYooMQauvdEDq54NiTphI7jx'
El cliente será redirigido a la success_url
una vez que se hayan creado el cliente y la suscripción.
Si necesitas completar los servicios contratados después del pago, consulta Cumplimiento de la orden de compra en Checkout.
También puedes actualizar los datos de la suscripción utilizando Checkout.
Plataformas y marketplaces Connect
Si operas una plataforma o marketplace Connect y creas pagos que involucran cuentas conectadas, piensa en usar la versión actual de integración del servidor de Checkout. Sigue las instrucciones en la guía de Connect para migrar tu integración.
En el siguiente ejemplo, se muestra cómo usar la API Checkout Sessions para procesar un cargo directo. Sigue las instrucciones de la guía de Connect para obtener más información sobre cómo crear cargos a un destino.
Antes
Con la antigua versión de Checkout, recopilabas los datos de tarjeta de tu cliente del lado del cliente.
<form action="/purchase" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=
data-name="Food Marketplace" data-description="10 cucumbers from Roger's Farm" data-amount="2000"> </script> </form>"pk_test_TYooMQauvdEDq54NiTphI7jx"
A continuación, enviabas el token o la fuente resultante a tu servidor y efectuabas el cargo en nombre de la cuenta conectada.
Después
Con la versión actual de Checkout, primero creas una sesión de Checkout en tu servidor en nombre de la cuenta conectada.
Nota
Si usas una de nuestras librerías de cliente, actualiza a la última versión de la librería para usar la API Checkout Sessions.
A continuación, envía el ID a tu cliente y le rediriges a Checkout para que complete el pago. Asegúrate de proporcionar el ID de la cuenta conectada al inicializar Stripe.js.
// Initialize Stripe.js with the same connected account ID used when creating // the Checkout Session. const stripe = Stripe(
, { stripeAccount:'pk_test_TYooMQauvdEDq54NiTphI7jx'}); const checkoutButton = document.getElementById('checkout-button'); checkoutButton.addEventListener('click', () => { stripe.redirectToCheckout({ // Make the id field from the Checkout Session creation API response // available to this file, so you can provide it as argument here // instead of the {{CHECKOUT_SESSION_ID}} placeholder. sessionId: '{{CHECKOUT_SESSION_ID}}' }) // If `redirectToCheckout` fails due to a browser or network // error, display the localized error message to your customer // using `error.message`. });'{{CONNECTED_ACCOUNT_ID}}'
El cliente será redirigido a la success_url
una vez que complete el pago.
Si necesitas entregar los productos comprados o los servicios contratados después del pago, consulta Cumplimiento de la orden de compra en Checkout.
Cómo guardar métodos de pago para un uso futuro
Si prestas servicios que no cobras de inmediato a tus clientes, consulta cómo configurar pagos futuros.
Es posible que hayas utilizado la versión heredada de Checkout para crear un token o una fuente en el cliente, y que lo hayas pasado a tu servidor para guardarlo para utilizarlo más tarde. No obstante, la versión actual de integración del servidor de Checkout revierte este flujo. Primero, creas una sesión en tu servidor, pasas el ID a tu cliente y rediriges al cliente a Checkout, quien será remitido nuevamente a tu aplicación después de que se confirme la transacción.
Antes
Con la versión heredada de Checkout, mostrabas los datos del cargo y recopilabas los datos de la tarjeta del cliente.
<form action="/subscribe" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=
data-name="Cleaning Service" data-description="Charged after your home is spotless" data-amount="2000"> </script> </form>"pk_test_TYooMQauvdEDq54NiTphI7jx"
A continuación, enviabas el token o la fuente resultante a tu servidor para, en última instancia, crear un cargo.
Después
Con la versión actual de Checkout, primero crea una sesión de Checkout en tu servidor usando el modo configuración.
Nota
Si usas una de nuestras librerías de cliente, actualiza a la última versión de la librería para usar la API Checkout Sessions.
A continuación, pasa el ID de la sesión a tu cliente y le rediriges a Checkout para recopilar los datos del método de pago.
const stripe = Stripe(
); const checkoutButton = document.getElementById('checkout-button'); checkoutButton.addEventListener('click', () => { stripe.redirectToCheckout({ // Make the id field from the Checkout Session creation API response // available to this file, so you can provide it as argument here // instead of the {{CHECKOUT_SESSION_ID}} placeholder. sessionId: '{{CHECKOUT_SESSION_ID}}' }) // If `redirectToCheckout` fails due to a browser or network // error, display the localized error message to your customer // using `error.message`. });'pk_test_TYooMQauvdEDq54NiTphI7jx'
El cliente será redirigido a la success_url
una vez que complete el proceso.
A partir de ahí, puedes recuperar el Setup Intent del flujo de Checkout y usarlo para preparar la transacción.
Catálogo simple de productos con precios fijos
Si vendes productos con precios fijos (como camisetas o libros electrónicos), consulta la guía sobre pagos puntuales para saber cómo generar un fragmento de código para agregar a tu sitio web.
Es posible que hayas utilizado la versión heredada de Checkout para crear un token o una fuente en el cliente, y que lo hayas pasado a tu servidor para crear un cargo. No obstante, la nueva versión de Checkout crea el pago automáticamente sin necesidad de integración del servidor.
Código del lado del cliente
Código del lado del servidor
La tabla de conversión que aparece a continuación establece las correspondencias de las opciones de configuración entre las dos versiones de Checkout. Para obtener una lista completa de opciones de configuración de la nueva versión, consulta la referencia redirectToCheckout
.
Suscripciones simples
Si ofreces un servicio de suscripciones simples (como el acceso mensual a un software), consulta la guía sobre suscripciones para obtener más información sobre cómo crear un plan en el Dashboard y generar un fragmento de código para añadir a tu sitio web.
Es posible que hayas utilizado la versión heredada de Checkout para crear un token o una fuente en el cliente, y que lo hayas pasado a tu servidor para crear un cliente y una suscripción. No obstante, la versión actual de Checkout crea el cliente y la suscripción automáticamente sin necesidad de integración del servidor.
Código del lado del cliente
Código del lado del servidor
La tabla de conversión que aparece a continuación establece las correspondencias de las opciones de configuración entre las dos versiones de Checkout. Para obtener una lista completa de opciones de configuración de la nueva versión, consulta la referencia redirectToCheckout
.
Conversión de parámetros
La versión actual de Checkout admite la mayoría de las funcionalidades de la versión heredada. No obstante, las dos versiones no comparten la misma API. La tabla que aparece a continuación establece las correspondencias de los parámetros y las opciones de configuración entre la versión heredada y la nueva versión.
Para obtener una lista completa de las opciones de configuración aceptadas por la versión actual de Checkout, consulta la referencia de Stripe.js y la referencia de API para Checkout Sessions.
Versión heredada | Versión actual | Consejos de integración |
---|---|---|
allowRememberMe |
| La versión actual de Checkout no admite Remember Me. Para reutilizar clientes existentes, te recomendamos especificar el parámetro customer al crear una sesión de Checkout. |
amount |
| El importe total corresponde a la suma de las partidas de factura especificadas en Checkout. |
billingAddress |
| Checkout recopila automáticamente la dirección de facturación cuando es obligatorio a efectos de la prevención del fraude o conforme a la normativa. Establece este parámetro en required para recopilar siempre la dirección de facturación. |
billingAddress |
| Checkout recopila automáticamente la dirección de facturación cuando es obligatorio a efectos de la prevención del fraude o conforme a la normativa. Establece este parámetro en required para recopilar siempre la dirección de facturación. |
closed |
| Cuando un cliente quiere cerrar Checkout, debe cerrar la pestaña del navegador o ir a la cancelUrl . |
currency |
| |
description |
| Si especificas un precio, Checkout muestra una descripción generada automáticamente sobre la frecuencia con la que se producen los pagos. Si especificas Session.line_items , Checkout muestra el name de cada partida. |
email |
| Si ya sabes el correo electrónico de tu cliente, especifícalo aquí para que no tenga que volver a introducirlo. |
image |
| Checkout usa imágenes específicas para la imagen de marca de tu empresa y para los productos que vendes. Checkout muestra el logotipo de tu empresa por defecto y recurre al ícono de empresa junto al nombre de tu empresa. |
key |
| |
locale |
| Puedes especificar una configuración regional aceptada al crear una sesión de Checkout. |
name |
| Si especificas un precio, Checkout le muestra al cliente el nombre del producto asociado con ese precio y cliente. Si especificas Session.line_items , Checkout muestra el name de cada ítem de factura. |
panelLabel |
| Checkout personaliza el texto del botón automáticamente en función de los artículos que vendes. Para personalizar el texto del botón para pagos puntuales, utiliza submit_type. |
shippingAddress |
| Recopila los datos de la dirección de envío especificando una matriz de allowed_countries a los que quieres hacer envíos. |
token o source |
| Ya no hay una devolución de llamada en JavaScript al completarse el pago. Como tu cliente paga en otra página, establece la successUrl a la que redirigirás al cliente después de que haya completado el pago. |
zipCode |
| Checkout recopila automáticamente el código postal cuando es obligatorio a efectos de la prevención del fraude o conforme a la normativa. |