javascript - ¿Cómo sé que la autenticación 3D Secure 2 funciona después de actualizar a stripe.js versión 3?

He actualizado un sitio para que use la última versión de stripe-php (6.39.0) y ahora carga stripe.js versión 3. He realizado todos los cambios necesarios en mi código para que mis campos de tarjeta de crédito se muestren ahora usando Stripe Elements. Las transacciones de prueba funcionan y he actualizado el sitio en vivo y se están aceptando pagos reales.

La razón por la que hice esta actualización fue porque Stripe me informó que necesitaba actualizar el sitio para que su integración con Stripe funcione con la Autenticación Reforzada de Clientes (SCA), que es obligatoria en la UE a partir de septiembre de 2019.

Stripe tiene diferentes números de tarjetas de crédito de prueba que puedes usar para probar cosas que surgen al procesar pagos. Estos números se pueden encontrar aquí: https://stripe.com/docs/testing#cards

4000000000003220 simula una transacción donde se debe completar la autenticación 3D Secure 2. Pero cuando utilizo este código, Stripe rechaza el pago y devuelve el mensaje:

Su tarjeta fue rechazada. Esta transacción requiere autenticación. Por favor, verifique los detalles de su tarjeta y vuelva a intentarlo.

¿Significa esto que 3D Secure 2 está funcionando o no?

En el mundo real, abriría una ventana con una interfaz del emisor de la tarjeta del cliente. Así que no estoy seguro de si mi integración está funcionando o no. Como se dijo antes, los pagos están siendo aceptados, pero necesito estar listo cuando se requiera la Autenticación Robusta del Cliente en septiembre.

Respuesta #1

Parece que tienes un problema de integración con la parte de JS. Para un cargo simple (el siguiente ejemplo no funciona para suscripciones), esta es la forma en que debes implementarlo:

Primero tienes que crear una intención de pago (documento aquí: https://stripe.com/docs/api/payment_intents/create):

\Stripe\PaymentIntent::create([
  "amount" => 2000,
  "currency" => "usd",
  "payment_method_types" => ["card"],
]);

Una vez que se devuelva la respuesta de tu PaymentIntent, tendrás una clave client_secret (documentación aquí: https://stripe.com/docs/api/payment_intents/object). Puedes ver que el estado de tu pago es "requires_payment_method"

{
  "id": "pi_1Dasb62eZvKYlo2CPsLtD0kn",
  "object": "payment_intent",
  "amount": 1000,
  "amount_capturable": 0,
  "amount_received": 0,
  ...
  "client_secret": "pi_1Dasb62eZvKYlo2CPsLtD0kn_secret_6aR6iII8CYaFCrwygLBnJW8js",
  ...
  "status": "requires_payment_method",
  ...
}

En tu lado del servidor tienes que guardar este objeto. Ahora puedes mostrar tu formulario de pago con la parte de JS usando la clave client_secret anterior (documentación aquí: https://stripe.com/docs/payments/payment-intents/verifying-status). La idea es que tienes que llamar a la función de JS al hacer clic en el botón de enviar, pero ¡no enviar! Espera la respuesta para enviar. Con un poco de jQuery esto debería ser así:

var $mySubmitButton = $('#my-submit-button'),
    $myPaymentForm = $('#my-payment-form'),
    clientSecret = $cardButton.data('client-secret'); // put your client-secret somewhere

$mySubmitButton.on('click', function(e) {
  
    e.preventDefault();

    // Disable button to disallow multiple click
    $(this).attr("disabled", true);

    stripe.handleCardPayment(
        clientSecret,
        {
            payment_method: clientMethod, // if you have a clientMethod
        }
    ).then(function(result) {
        if (result.error) {
            // show error message
            // then enable button
            $mySubmitButton.attr("disabled", false);
        } else {
            // Submit form
            $myPaymentForm.submit();
        }
    });
});

Si todo va bien, cuando hagas clic en tu botón de enviar, tendrás un popin de prueba 3D secure con las opciones de "éxito" o "fallo" en la prueba de seguridad. Si haces clic en el botón de éxito, tu formulario se envía y debes esperar al webhook "charged.success" para confirmar la transacción.

Una vez recibido, cambie el estado de su objeto de servidor y notifique al usuario sobre la transacción.

En mi caso, una vez que se envía el formulario, muestro un cargador y verifico con una llamada ajax cada segundo para ver si el estado de mi intención de pago ha cambiado (a través del webhook). Para tu entorno de prueba, puedes usar http://requestbin.net y Postman.

Advertencia: algunas tarjetas referenciadas en esta página no funcionarán correctamente (no puedes agregarlas) https://stripe.com/docs/testing#cards (sección Números de tarjeta de prueba 3D Secure y tokens). Confirmado con su soporte.

Si trabajas con tarjeta guardada, solo puedes probar con estas tarjetas: https://stripe.com/docs/payments/cards/charging-saved-cards#testing