#moiz_npm-stripejs-typescript-params

1 messages · Page 1 of 1 (latest)

twin heronBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1339364687263043656

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

wheat parcel
#

Some more info:

In the current checkout, we create a payment "element", mount it, and finally call the "stripeElements.submit()" and "stripe.createPaymentMethod()". We pass the resulting "paymentMethod.id" from the last call to our backend to complete the checkout. This all works as expected in the current implementation.

Reading through the Stripe-js documentation hasn't provided the answer yet. We've also tried downgrading to earlier versions of Stripe-js npm package but haven't found a version that works the same as the script published on the static url (state above).

Let me know if you have any questions. Will appreciate some help in creating the "elements" instance using the client secret as well as 'manual' mode.

lament marsh
#

Hi there. What do you need to do in the new version of your app? What is your flow like?

#

Are you using the Payment Element? Why do you need to create a Payment Method, rather than using the details collected by the Element to confirm a PaymentIntent or SetupIntent? Do you need to do some business logic in between collecting payment method details and creating a payment?

wheat parcel
# lament marsh Hi there. What do you need to do in the new version of your app? What is your fl...

Yes, using the payment element (like this: stripePaymentElement.mount(htmlElement)) on the front-end. Our back-end then requires the paymentMethod.id as part of the final form submission. In the existing checkout, the front-end gets the paymentMethod from stripe?.createPaymentMethod({ elements: stripeElements }).

Note that we are not changing the back-end. Only creating a new front-end web app and trying to replicate the existing behaviour.

lament marsh
#

We don't generally recommend creating a PaymentMethod directly in modern Elements integrations. However, if you don't want to change your integration you can do something like the guide above, but call stripe.createPaymentMethod instead of stripe.confirmPayment

wheat parcel
#

If we create the Elements instance without a client secret, we cannot create the payment element (to execute the mount() on).

lament marsh
#

You can; I'd really recommend giving the guide a read

twin heronBOT
jagged spruce
#

Hi hi! I’m going to be taking over for my colleague here; give me a moment to read back. Thanks!

#

Is it still the same Stripe Account?

wheat parcel
#

In the Stripe-js library, Stripe.elements() has two overloads/signatures. One with client secret (but not allowing manual method creation) and second one that does not take the client secret (but allows the manual payment method creation). Looking at these docs: https://docs.stripe.com/js/elements_object/create?type=bank_account. When using the Stripe-js library, and creating the elements without the client secret, the elements.create() call fails saying a client secret is required.

Yes, it's the same Stripe Account.

Stripe JS Reference
jagged spruce
#

What's the error you're seeing?

wheat parcel
#

In the meantime, we have removed the Stripe-js library (npm package) and switched to the web-hosted Stripe library using the <script> tag. This now allows us to create elements instance, as in the existing checkout web app.

#

This code now works:

                appearance,
                clientSecret,
                paymentMethodCreation: 'manual'
            });
jagged spruce
#

So doing it vanilla works, but with the npm package it doesn't?

wheat parcel
#

Correct

#

In the npm package, we can either provide the "clientSecret" or the manual method creation. But not both. That seems to be consistent with the docs too.

jagged spruce
wheat parcel
#

Not yet.

jagged spruce
#

Are you using TypeScript?

wheat parcel
#

Yes, TypeScript

jagged spruce
#

Is it a type error?

wheat parcel
#

Yes

#

(will be a little slow in replying, during the next hour or so)

jagged spruce
#

Right now this just smells like a TypeScript error, which you could just ignore for now.

#

What was the exact error you were getting?

twin heronBOT
#

moiz_npm-stripejs-typescript-params

jagged spruce
jagged spruce
#

That should use & not |. That's likely the only change that you need here.