#xequinox-loadstripe

1 messages · Page 1 of 1 (latest)

misty rockBOT
pulsar rain
#

xequinox-loadstripe

#

Hello! I'm sorry I don't understand what you're asking

copper inlet
#

after loading the credit card form using the client_secret, I want to confirm payment

#

but I don't have the stripe object

#

only stripePromise

pulsar rain
#

I don't know what that means.

#

Can you provide more context or exact code? What's the problem, which doc are you following exactly, etc.

copper inlet
# 
var [stripeOptions, setStripeOptions] = useState<StripeElementsOptions>({
    clientSecret: "",
});
const stripePromise = loadStripe('');


<Elements stripe={stripePromise} options={stripeOptions}>
    <PaymentElement />
</Elements>
pulsar rain
#

Okay so you're using React? What's the problem?

copper inlet
#

I want to confirm the payment after the credit details have been put in

#

the documentation says use stripe.confirmPayment

#

I only have the stripePromise

#

no stripe

#

im not using the useStripe hook

pulsar rain
#

you have to use that hook so why wouldn't you use it?

copper inlet
#

because I am using the ```
const stripePromise = loadStripe(PK)

#

from import {loadStripe} from '@stripe/stripe-js';

pulsar rain
#

I am sorry, React is not my forte but the doc you mention literally does loadStripe() and uses useStripe(). So why can't you do what the docs do?

copper inlet
#

I dont want to use react hooks

#

for the stripe object

#

I think I am mixing the vanilla JS documentation and react docs

#

one sec

#

ok

#

I am using the useStripe hook

#

and I get Error: Could not find Elements context; You need to wrap the part of your app that calls useStripe() in an <Elements> provider.

#

but the elments provider is on the elements

#

kinda sucks to wrap all my page with it

pulsar rain
#

Sorry I'm strugglign to follow you. Is this just a comment while you figured out your problem? Something else?

copper inlet
#

no

#

it says to wrap the useStripe call with the Elements provider

pulsar rain
#

but you said "I don't want to use this" then you say "I use this"

copper inlet
#

the useStripe call is a hook

pulsar rain
#

I'm sorry I have no idea what you're asking

copper inlet
#

you can't wrap the hook with an element

#

so what am I to do

pulsar rain
copper inlet
#

what its telling me to do

#

is just going to give me an error

fast ice
#

Hi @copper inlet can you share with us the details of the error?

copper inlet
#

I have a page that is a function component

#

it returns an element to the client

#

before I return the element

#

I am using loadStripe()

#

and the useStripe() hook

#

I can't wrap the useStripe hook with the elements provider

#

because its in the function and not the returned elements

fast ice
#

OK, React hooks (e.g., useStripe()) works best with functional components, can you help me understand if there's anything prevent you from using hooks in your components?

copper inlet
#

I fixed it by using a React Context in a custom per page layout

fast ice
#

OK, so is your problem resovled?

copper inlet
#

yes except now it is erroring because the initial page load doesnt have a valid clientSecret

#

Uncaught IntegrationError: Invalid value for elements(): clientSecret should be a client secret of the form ${id}_secret_${secret}. You specified: test.

#

is it possible to disable it until the clientSecret is received

fast ice
#

You need to create a PaymentIntent at your backend, and pass the PaymentIntent's client secret to frontend and set it to the Element's options

copper inlet
#

yeah

#

after a button is clicked

#

but before it is clicked, the clientSecret is ""

fast ice
#

You should hide the Elements if the client_secret is not yet available.

#

For example

return (
    clientSecret && (
      <Elements ...
copper inlet
#

its working now

#

it was a lot more complicated than need be

#

just some more validation on the context inside the page and it works nicely

#

thanks for the help