TheUchi007 - Stripe.js + React | Stripe Developers | Page 1

prisma cipher Jul 25, 2022, 5:46 PM

#

Hello! We have a guide that covers React and useEffect here: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements&html-or-react=react

light ore Jul 25, 2022, 5:48 PM

#

Hmmm I only see how to use it with Elements component

prisma cipher Jul 25, 2022, 5:49 PM

#

What are you trying to do exactly?

light ore Jul 25, 2022, 5:49 PM

#

So for example, I wanna use the method

stripe.collectBankAccountToken

#

The example shown on the docs uses vanilla JS, but since I am using a React component, I am not sure entirely how to invoke that

prisma cipher Jul 25, 2022, 5:50 PM

#

Try this: const stripe = useStripe();
Then this: stripe.collectBankAccountToken(...)

light ore Jul 25, 2022, 5:51 PM

#

Ok, let me try that

#

Hmmm I am getting the following error:

#

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

prisma cipher Jul 25, 2022, 5:54 PM

#

That makes sense; you do need to wrap it in an <Elements> provider for this to work.

light ore Jul 25, 2022, 5:55 PM

#

Hmmm

prisma cipher Jul 25, 2022, 5:55 PM

#

Backing up a bit, at a high level what are you trying to build?

light ore Jul 25, 2022, 5:55 PM

#

But wasn't Elements supposed to be used just to handle payments?

#

So, I am building a marketplace app, using Stripe Connect. I am using Custom Accounts in order to have more control over the user's Stripe details via our own Dashboard. I am able to do the onboarding process with no issues. However, the last step is to add a bank account. In order to add a bank account, I either need to create a token myself, or use Financial Connections Session, both of which I need stripeJS to invoke a certain function

#

That's where I am stuck

#

I know how with Vanilla JS, but I am using React

prisma cipher Jul 25, 2022, 5:57 PM

#

Are you trying to use react-stripe-js for this?

light ore Jul 25, 2022, 5:58 PM

#

Well, I am not sure which one to use

#

I have react-stripe-js, as well as stripe-js

#

For more context, this is what I am trying to do

#

https://stripe.com/docs/financial-connections/connect-payouts

Collect a bank account to optimize Custom Connect payouts with acco...

Learn how to collect your Custom connected account’s bank account and use account data to enhance payouts.

#

Step 4

#

stripe.collectBankAccountToken

prisma cipher Jul 25, 2022, 5:59 PM

#

Oh, I think I understand. Try this:

import {loadStripe} from '@stripe/stripe-js';
const stripe = await loadStripe('pk_...');
// Use stripe.collectBankAccountToken

light ore Jul 25, 2022, 5:59 PM

#

Hmmm ok, lemme see

#

Ok, I am getting the following error

#

stripe.collectBankAccountToken is not a function

prisma cipher Jul 25, 2022, 6:03 PM

#

That's odd. It should be a function. Let me see if there's anything special that needs to happen regarding that specific function...

light ore Jul 25, 2022, 6:05 PM

#

Thank you. That's where I am stuck lol

#

I just don't know how to have access to stripeJS functions in React

#

oh, I figured it out. You were totally correct about using the Elements component, I am really sorry

#

I thought the Elements was just to create a payment checkout form

#

But I need to wrap around the component that wants or needs access to the stripeJS functions

#

The Elements provider allows you to use Element components and access the Stripe object in any nested component.

#

can't believe I missed that

prisma cipher Jul 25, 2022, 6:11 PM

#

Ah, okay! Glad to hear you got it working!

light ore Jul 25, 2022, 6:12 PM

#

Thank you for your help!

#TheUchi007 - Stripe.js + React