javascript - How do I know that 3D Secure 2 authentication works after upgrading to stripe.js version 3 - Stack Overflow

admin管理员组

文章数量:1328400

I have updated a site so it uses latest stripe-php (6.39.0) and it now loads stripe.js version 3. I’ve made all the necessary changes to my code so that my credit card fields are now displayed using Stripe Elements. Test transactions work and I have updated the live site and real payments are being excepted.

The reason I made this update was because I was informed by stripe that I needed to upgrade the site so that its stripe integration will work with Strong Customer Authentication (SCA) which is required in the EU by September 2019.

Stripe has different credit card test numbers you can use to test things that arise when processing payments. This numbers can be found here:

4000000000003220 simulates a transactions where 3D Secure 2 authentication must be pleted. But when I use this code stripe turns down payment and returns the message:

"Your card was declined. This transaction requires authentication. Please check your card details and try again."

Does this mean that 3D Secure 2 is working or not?

In the real world it would open a window with an interface from the customer's card issuer. So I not sure wether my integration is working or not. As said before payments are being excepted butI need to ready when Strong Customer Authentication is required in September.

I have updated a site so it uses latest stripe-php (6.39.0) and it now loads stripe.js version 3. I’ve made all the necessary changes to my code so that my credit card fields are now displayed using Stripe Elements. Test transactions work and I have updated the live site and real payments are being excepted.

The reason I made this update was because I was informed by stripe that I needed to upgrade the site so that its stripe integration will work with Strong Customer Authentication (SCA) which is required in the EU by September 2019.

Stripe has different credit card test numbers you can use to test things that arise when processing payments. This numbers can be found here: https://stripe./docs/testing#cards

4000000000003220 simulates a transactions where 3D Secure 2 authentication must be pleted. But when I use this code stripe turns down payment and returns the message:

"Your card was declined. This transaction requires authentication. Please check your card details and try again."

Does this mean that 3D Secure 2 is working or not?

In the real world it would open a window with an interface from the customer's card issuer. So I not sure wether my integration is working or not. As said before payments are being excepted butI need to ready when Strong Customer Authentication is required in September.

• javascript
• php
• stripe-payments

Share Improve this question Follow edited Jan 21, 2021 at 10:48 Uwe Keim 40.8k6161 gold badges188188 silver badges304304 bronze badges asked Jun 25, 2019 at 18:35 lomokevlomokev 12811 silver badge88 bronze badges 8

• Are you perhaps testing in live mode? That test card will only work when using your test publishable key (pk_test_123). If you are in test mode and it's still not working I suggest reaching out to Stripe support support.stripe./contact – Paul Asjes Commented Jun 26, 2019 at 1:03
• Based on your previous question(stackoverflow./questions/56444002/…) it sounds like by "I needed to upgrade the site" you mean you just upgraded your Stripe library version and started using Elements? That is not sufficient to handle SCA and 3D Secure — there are specific code migrations you need to make to your existing code, for example using PaymentIntents in your backend code instead of Charges : stripe./docs/strong-customer-authentication/migration#step-3 – karllekko Commented Jun 26, 2019 at 11:07
• @PaulAsjes I am running those tests in test mode. – lomokev Commented Jun 26, 2019 at 12:18
• @karllekko I’ve upgraded my php library for the latest version from GitHub and I am not loading stripe js version 3. I had to make changes in my code where my payment from is and the code where payments are processed, live payments are working. – lomokev Commented Jun 26, 2019 at 12:21
• I think it's impossible to really say what's happening without sharing your exact code. Or you can reach out to support.stripe./email with more details and they could help. – karllekko Commented Jun 26, 2019 at 13:15

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 7

It seems you have an integration problem with the JS part. For a simple charge (the following example does not work for subscription), this is the way you have to implement it:

First you have to create a Payment intent (doc here: https://stripe./docs/api/payment_intents/create):

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

Once your PaymentIntent response is returned, you will have a client_secret key (doc here : https://stripe./docs/api/payment_intents/object). You can see that your payment status is "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",
  ...
}

On your server side you have to save this object. You can now show your payment form with the JS part with the previous client_secret key (doc here : https://stripe./docs/payments/payment-intents/verifying-status). The idea is that you have to call the Js function on click on the submit button but do not submit ! Wait for the response to submit. With some jquery this should like this:

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();
        }
    });
});

If everything goes right, when you click your submit button, you will have a test 3D secure popin with the options to "success" or "fail" the security test. If you click on success button, your form is submitted and you have to wait for the webhook "charged.success" to confirm transaction.

Once received, change you server object status and notify user about the transaction.

In my case, once the form submitted, I show a loader and check with ajax call every second to see if my payment intent status have changed (through the webhook). For your test environnement, you can use http://requestbin and Postman.

Beware: some cards referenced on this page will not work properly (you can't add them) https://stripe./docs/testing#cards (section 3D Secure test card numbers and tokens). Confirmed with their support.

If you work with saved card, you can test only with these cards: https://stripe./docs/payments/cards/charging-saved-cards#testing

本文标签：