Cómo migrar 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 de 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 el servidor. Esto ya no es necesario, ya que la función confirmCardPayment, invocada 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, el cargo se crea de forma asincrónica en función de la acción que ejecuta el cliente de su lado, por lo que debes controlar los webhooks para determinar si se concreta el pago. Para tomar medidas como completar el pedido del cliente después de la confirmación del pago, implementa soporte para webhooks y monitorea el evento payment_intent.succeeded.

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

La integración de la API Payment Intents que recopila información de tarjetas dentro del 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 idea principal es cobrar a los usuarios cuando están fuera de la aplicación, o en on_session si planeas cobrarles en la aplicación. Si planeas usar la tarjeta para pagos dentro y fuera de la sesión, usa off_session. Si proporcionas el parámetro setup_future_usage junto con una identificación de cliente, se guardará el PaymentMethod resultante para 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 de 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 el servidor. Esto ya no es necesario, ya que la función confirmCardPayment, invocada 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, el cargo se crea de forma asincrónica en función de la acción que ejecuta el cliente de su lado, por lo que debes controlar los webhooks para determinar si se concreta el pago. Para tomar medidas como completar el pedido del cliente después de la confirmación del pago, implementa soporte para webhooks y monitorea el evento payment_intent.succeeded.

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