CODEWITHSUNDEEP
javascriptphpstripe-payments
Aontaigh
Aontaigh

Reputation: 198

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

Upvotes: 5

Views: 19008

Answers (4)

Wolfack
Wolfack

Reputation: 2769

Make a cURL request with your secret key:

curl https://api.stripe.com/v1/payment_intents \
  -u sk_test_yadayadayada: \
  -d amount=2000 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]"=true

This will return the payment_intents object which includes the client_secret which looks like pi_YADAYADAYADA_secret_ANOTHERYADAYADAYADA

use this to create the payment element, this will work.

Upvotes: 0

Princess
Princess

Reputation: 63

In JS, I got the mentioned error when the client_secret value is not correct or undefined. Fixed by passing the correct value of client_secret which looks like pi_12345_secret_12345

stripe.handleCardPayment(
    client_secret
).then(function (result) {
    if (result.error) {
        console.log('client secret is not valid');
    } else {
        console.log('do the actions further');
    }});

Upvotes: 0

Awshaf Ishtiaque
Awshaf Ishtiaque

Reputation: 931

When I had this problem:

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

I solved it like this:

Where I was trying to render my CheckoutForm.jsx:

{clientSecret && (
        <Elements stripe={stripePromise} options={options}>
          <CheckoutForm />
        </Elements>
      )}

For options I declared as such:

const options = {
    // passing the client secret obtained from the server
    clientSecret: `${resData.id}_secret_${resData.clientSecret}`,
  };

Specifically the options like this helped me resolve the error:

${resData.id}_secret_${resData.clientSecret}

P.S. resData in my solution is a useState where its being populated with an API call in my useEffect.

Upvotes: 0

hmunoz
hmunoz

Reputation: 3331

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

Upvotes: 6

Related Questions