Reactjs - Stripe error react-Uncaught IntegrationError: Invalid value for elements(): clientSecret should be a client secret of the form ${id}_secret_${secret}

JaynaTanawala
November 22, 2024
30 views
0 votes
2 Answers

From stripe docs, I have integrated stripe in my react typescript based project. But I am getting client secret id error. Below is my code:

placeOrder.tsx:

import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import CheckoutForm from './Checkout';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('pk_test_..Pdx'); // public key from stripe dashboard

export default function PlaceORder() {
  const options = {
    // passing the client secret obtained from the server
    clientSecret: 'sk_test_.....YKGWngQO', // client secret from stipe dashboard
    theme: 'stripe',
  };

  
  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

checkout.tsx:

import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      <PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;

Please help me out to fix this issue!

Answers

- Airo
- November 22, 2024 at 7:45 pm
- 0 votes
0
can you show me the error you are having?

Login or Signup to reply.

- JustinMichael
- November 22, 2024 at 8:30 pm
- 0 votes
0
You’re attempting to use your Stripe API key as a client secret, but your Stripe API key is not a client secret.

Your Stripe API key is used to make API requests, and you actually have several of them. There are secret keys, beginning with sk_, which should only be used server-side and treated as sensitive information, like a password to your Stripe account. There are also publishable keys, beginning with pk_, which are used for client-side operations and are designed to be public. There are also different variants of each for test mode (sk_test_ and pk_test_) and live mode (sk_live_ and pk_live_).

Client secrets, on the other hand, are associated with a specific Stripe object, and the client secret (when combined with your publishable key) grant extra permissions on that object that normally wouldn’t be allowed with the publishable key alone.

In your case, you’re trying to initialize the Payment Element with a client secret, which means the client secret you want belongs to either a Setup Intent or a Payment Intent. Your server-side code needs to use your secret API key to create or retrieve the Intent, then pass its client secret to your frontend code.

Login or Signup to reply.