su.su_

[fluid ocean]

👋 again and how can I help you further?

[dry lava]

IntegrationError: Missing value for Stripe(): apiKey should be a string.

I keep gettings this error, I want to know if I set it up correct...

const stripePromise = loadStripe(process.env.STRIPE_PUBLIC_TEST);

function CheckoutPage() {
  const ClientSecret = `${process.env.STRIPE_PUBLIC_TEST}`;

  const options = {
    clientSecret: `${ClientSecret}`
  }

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

export default CheckoutPage;

I saw on your documentation, but since I'm using next.js, I thought it might be different

[fluid ocean]

You would want to log out what value in STRIPE_PUBLIC_TEST is that?

also ClientSecret should comes from backend, not process.env

[dry lava]

that's the public key I put in the .env folder.

[dry lava]

is clientSecret the secret key or another unique key?

[fluid ocean]

No, it is the client secret of the PaymentIntent, which is generated on backend, each time a payment is made

[dry lava]

how can I do that?

is there a function?

[fluid ocean]

Have you seen the Doc I shared earlier? It has a step to create PaymentIntent

[dry lava]

yeah But i'm using react/next and I think it works differently

oh, can you do something like payment.client_secret?

[fluid ocean]

It should be the same because flow. Not familiar with NextJS but this might help: https://vercel.com/guides/getting-started-with-nextjs-typescript-stripe

Well this is checkout so it's different, but generally you create PaymentIntent on the backend, similar to what they are doing in

const params: Stripe.Checkout.SessionCreateParams = {

[dry lava]

So, let me try to get the front end working first. I set it like <PaymentElement/> right, and I just import it?

[fluid ocean]

Yes

[dry lava]

IntegrationError: Missing value for Stripe(): apiKey should be a string.``` does this refer to the secret and pblic key?

const stripePromise = loadStripe(process.env.STRIPE_PUBLIC_TEST); In my env file, I set it to a string. Is this correct?

[fluid ocean]

yes, and that should be the Publishable Key, format pk_test_xxx

[dry lava]

it still saying Missing value for Stripe(): apiKey should be a string.

[fluid ocean]

probably you don't have that value? Did you put STRIPE_PUBLIC_TEST into your environment file?

[dry lava]

yes

wait, its saying there is a missing value?

[fluid ocean]

Well it says "should be a string". I wonder what value it currently has

[dry lava]

I defined it like this in my files, and in my env file i did :
STRIPE_PUBLIC_TEST= pk_test_51NC....

[fluid ocean]

sure, so if you console.log(process.env.STRIPE_PUBLIC_TEST) do you see its value?

[dry lava]

it comes back as undefined : Stripe Public Key: undefined

oh wait, i think I fixed it

I other debugging errors now

I GOT IT TO WORK!

[fluid ocean]

Glad to hear!