Search code examples
javascriptphpstripe-payments

handleCardPayment Error When Using Stripe

I'm currently getting the error:

Invalid value for stripe.handleCardPayment intent secret: value should be a client secret of the form ${id}secret${secret}. You specified: pi_1FCNbuIxBpL3Mx4OJYi5hKML.

I first make an axios request from my frontend done in Vue.js to my backend done in Laravel which creates a payment intent (i.e. pi_1FCNbuIxBpL3Mx4OJYi5hKML).

 StripePackage::setApiKey('sk_test_xxxxxxxxxxx');

    $intent = \Stripe\PaymentIntent::create([
        'amount' => 1099,
        'currency' => 'eur',
    ]);

    return $intent;

I set this payment intent equal to a globally defined data variable called data_secret which is reference in the button to submit payment:

<button id='test' class='pay-with-stripe' @click='pay' type="button" style="margin-top:20px;" :data-secret="data_secret">Pay with card</button>

When clicked this button calls the pay method which in turn uses the stripe handleCardPaymentMethod:

var cardButton = document.getElementById("test");
    var clientSecret = cardButton.dataset.secret;

    this.stripe.handleCardPayment(
      clientSecret, this.card, {
        payment_method_data: {
          billing_details: {name: 'Test Name'}
        }
      }
    ).

This fires back the previously mentioned error.

I have been following this documentation and am unable to see the issue: https://stripe.com/docs/payments/payment-intents/web

Solution

  • Stripe.js's handleCardPayment method uses the PaymentIntent's client_secret field [0] (which looks like "pi_123_secret_123"), not the PaymentIntent's ID (which is "pi_123").

    It looks like your code is setting the PaymentIntent ID instead of the client_secret on your frontend.

    [0] https://stripe.com/docs/api/payment_intents/object#payment_intent_object-client_secret