Migración a la API Payment Intents

Una integración creada con Stripe.js y Elements consta de los siguientes pasos:

1. Registra tu intención de cobrar el pago del lado del servidor
2. Recopila los datos del pago del lado del cliente
3. Inicia la creación del pago
4. Completa el pedido del cliente del lado del servidor

Paso 1: Registrar la intención de cobrar el pago del lado del servidor

Crea un PaymentIntent en tu servidor y hazlo accesible del lado del cliente.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d "amount"=1099 \
  -d "currency"="usd"

Paso 2: Recopilar los datos de pago del lado del cliente

Usa la función confirmCardPayment, que recopila la información del pago y la envía directamente a Stripe.

stripe.createToken(
  cardElement
).then(function(token) {
  // Send token to server
});

stripe.confirmCardPayment(
  INTENT_SECRET_FROM_STEP_1,
  {
    payment_method: {card: cardElement}
  }
).then(function(result) {
  if (result.error) {
    // Display error.message in your UI.
  } else {
    // The payment has succeeded
    // Display a success message
  }
});

Paso 3: Iniciar la creación del pago

En tu integración actual, el último paso consiste en utilizar la información de pago tokenizada para crear un cargo en tu servidor. Esto ya no es necesario, ya que la función confirmCardPayment, llamada en el paso anterior, inicia la creación del cargo.

curl https://api.stripe.com/v1/charges \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d "source"="{{FROM_PREVIOUS_STEP}}" \
  -d "amount"=1099 \
  -d "currency"="usd"

Paso 4: Completar el pedido del cliente

Con la confirmación automática, tu cargo se crea de forma asincrónica en función de la acción realizada por el cliente en su lado, por lo que debes controlar los webhooks para determinar si el pago se hace efectivo. Para llevar a cabo pasos como completar el pedido del cliente después de confirmarse que el pago se ha hecho efectivo, implementa soporte para webhooks y supervisa el evento payment_intent.succeeded.

Ahora que has hecho la migración, usa las tarjetas de prueba en la siguiente sección para verificar que la integración actualizada gestiona la autenticación mediante 3D Secure.

La integración de la API Payment Intents que recopila información de tarjetas en el flujo de finalización de compra consta de los siguientes pasos:

1. Registra tu intención de cobrar el pago del lado del servidor
2. Recopila los datos del pago del lado del cliente
3. Inicia la creación del pago
4. Completa el pedido del cliente del lado del servidor

Paso 1: Registrar la intención de cobrar el pago del lado del servidor

Crea un PaymentIntent en tu servidor. Establece setup_future_usage en off_session, si tu intención principal es cobrar a los usuarios cuando estén fuera de la aplicación, o en on_session, si tienes pensado cobrarles cuando estén en la aplicación. Si tu intención es utilizar la tarjeta para pagos tanto dentro como fuera de la sesión, usa la configuración off_session. Si especificas el parámetro setup_future_usage junto con el ID del objeto Customer, el PaymentMethod resultante se guardará para ese Customer después de que el PaymentIntent se haya confirmado y de que el cliente haya completado todas las acciones solicitadas. A continuación, pon el PaymentIntent a disposición del lado del cliente.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d "setup_future_usage"="off_session" \
  -d "amount"=1099 \
  -d "currency"="usd"

Paso 2: Recopilar los datos de pago del lado del cliente

Usa la función confirmCardPayment, que recopila la información del pago y la envía directamente a Stripe.

stripe.createToken(
// or stripe.createSource
  cardElement
).then(function(token) {
  // Send token to server
});

stripe.confirmCardPayment(
  '{{INTENT_SECRET_FROM_STEP_1}}',
  {
    payment_method: {card: cardElement},
  }
).then(function(result) {
  if (result.error) {
    // Display error.message in your UI.
  } else {
    // The payment has succeeded
    // Display a success message
  }
});

Por último, adjunta el método de pago (paymentIntent.payment_method) al cliente.

curl https://api.stripe.com/v1/customers/{{CUSTOMER_ID}}/sources \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d "source"="{{TOKEN_OR_SOURCE}}"

curl https://api.stripe.com/v1/payment_method/{{PAYMENT_METHOD_ID}}/attach \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d "customer"="{{CUSTOMER_ID}}"

Paso 3: Iniciar la creación del pago

En tu integración actual, el último paso consiste en utilizar la información de pago tokenizada para crear un cargo en tu servidor. Esto ya no es necesario, ya que la función confirmCardPayment, llamada en el paso anterior, inicia la creación del cargo.

curl https://api.stripe.com/v1/charges \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d "source"="{{FROM_PREVIOUS_STEP}}" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="usd"

Paso 4: Completar el pedido del cliente

Con la confirmación automática, tu cargo se crea de forma asincrónica en función de la acción realizada por el cliente en su lado, por lo que debes controlar los webhooks para determinar si el pago se hace efectivo. Para llevar a cabo pasos como completar el pedido del cliente después de confirmarse que el pago se ha hecho efectivo, implementa soporte para webhooks y supervisa el evento payment_intent.succeeded.

Ahora que has hecho la migración, usa las tarjetas de prueba en la siguiente sección para verificar que la integración actualizada gestiona la autenticación mediante 3D Secure.