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_BQokikJOvBiI2HlWgH4olfQ2
: \
  -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_BQokikJOvBiI2HlWgH4olfQ2
: \
  -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 como off_session si principalmente tienes la intención de cobrar a los usuarios cuando están fuera de tu aplicación o como on_session si planeas cobrarles en la aplicación. Si tienes previsto utilizar la tarjeta para pagos durante y fuera de la sesión, utiliza off_session. Si proporcionas el parámetro setup_future_usage junto con un ID de cliente, el PaymentMethod resultante se guardará en ese cliente después de que se haya confirmado el PaymentIntent y se hayan completado las acciones requeridas por parte del cliente. A continuación, haz que el PaymentIntent sea accesible del lado del cliente.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -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_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "source"="{{TOKEN_OR_SOURCE}}"

curl https://api.stripe.com/v1/payment_method/{{PAYMENT_METHOD_ID}}/attach \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -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_BQokikJOvBiI2HlWgH4olfQ2
: \
  -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.