reactjs - Stripe error react-Uncaught IntegrationError: Invalid value for elements(): clientSecret should be a client secret of

admin管理员组

文章数量:1122846

From the Stripe docs, I have integrated Stripe in my React TypeScript 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;

How can I fix this issue?

From the Stripe docs, I have integrated Stripe in my React TypeScript 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;

How can I fix this issue?

• reactjs
• stripe-payments
• react-typescript

Share Improve this question Follow edited Nov 23, 2024 at 16:36 halfer 20.4k1919 gold badges108108 silver badges200200 bronze badges asked Nov 22, 2024 at 17:35 Jayna TanawalaJayna Tanawala 4931414 silver badges2929 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签：