k1ng

[candid whale]

👋 Could you share what is the issue you're facing? Is there any error message?

[pseudo dirge]

@candid whale i was following this https://stripe.com/docs/payments/quickstart?client=next

"Pay now" shows up, client secret stuff is good

the console shoes this "failed to load resouce status 401", with an undefined key
https://api.stripe.com/v1/elements/sessions?key=undefined

not sure how to fix

[candid whale]

Can you share your development website, so that I can take a look?

[pseudo dirge]

@candid whale lots of code, so its a bit of pain to send. There are three files dealing with this, and they look exactly like the preview on this
https://stripe.com/docs/payments/quickstart?client=next

this is the checkoutform.jsx file

index has a useffect that hits the endpoin and gets clientsecret. that works

[pseudo dirge]

once client secret is loaded, it shows Pay Now but key is undefined

[candid whale]

From the code itself, I can't tell which line has an issue. It'll be helpful to share your development website, so that I can check the console log, networks and javascript execution to determine the issue

[pseudo dirge]

@candid whale u mean a link to it?

https://creator-studios.vercel.app/

click BUY CREDITS to trigger it

[candid whale]

From the error message:

{
  "error": {
    "message": "Invalid API Key provided: undefined",
    "type": "invalid_request_error"
  }
}

Can you double check if you set the public key correctly?

[pseudo dirge]

this part right? const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);

[candid whale]

Yes!

The stripePromise will then be set in the <Elements/> like this

<Elements stripe={stripePromise} options={options}>
  <CheckoutForm />
</Elements>

[pseudo dirge]

okay so it worked when i copy pasted it manually

let me check again one minute

@candid whale ok so it work when I enter it as a string but doesn't work with process.env
const stripePromise = loadStripe(${process.env.OPEN_PUBLISHABLE_KEY});

do you maybe know why? i don't want to use it as string on client side

[candid whale]

If you use Next and .env for storing client/browser variable, they key name should be NEXT_PUBLIC_{YOUR_KEY_NAME}: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#exposing-environment-variables-to-the-browser

[pseudo dirge]

got it thank you @candid whale

i have one more question

I didn't pass in the customer cid anywhere, how am i supposed to check which customer bought the product?

stripe.retrievePaymentIntent(clientSecret).then(({ paymentIntent }) => {
switch (paymentIntent.status) {
case "succeeded":
setMessage("Payment succeeded!");
break;
case "processing":
setMessage("Your payment is processing.");
break;
case "requires_payment_method":
setMessage("Your payment was not successful, please try again.");
break;
default:
setMessage("Something went wrong.");
break;
}
});

this thing?

[candid whale]

When you create the Payment Intent, it will create a Payment Intent ID which you can save it to your own database to associate with your own internal customer ID.

Alternatively, you can set your own customer ID in metadata which you can access it later: https://stripe.com/docs/api/payment_intents/create#create_payment_intent-metadata

[pseudo dirge]

got it

can i do this for subscriptions? @candid whale

instead of routing to a subscription link, keep it like this

[candid whale]

Do you mean you wish to use Payment Element to collect payments instead of using Checkout Session (Stripe hosted payment page)?

[pseudo dirge]

correct

but for subscriptions

[candid whale]

This is possible. You may refer to the guide of Payment Element on subscription here: https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements

[pseudo dirge]

got it

Lastly, is there a way to save payment info?

one click checkout

@candid whale

[candid whale]

Yup. You can save the payment method during payment with the guide here: https://stripe.com/docs/payments/save-during-payment