#damol0_ach-integration
smoky leafBOT
👋 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. Thank you for your patience!
⏱️ We automatically close idle threads, which makes them read-only. Make sure you stick around to chat in realtime! If this thread is closed and you have another question you'll need to start a new thread.
🔗 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/1213157097349455933
📝 Have more to share? You can add more detail below, including code, screenshots, videos, etc.
maiden kiteBOT
pure pond
For more background - I have no hassle with python and the idea of what needs to happen in the back end. I can understand examples in python or C#, but its my front end that I am weak on
nocturne isle
Hi there 👋 can you elaborate a bit more on what you're trying to accomplish? Is it covered by our guide on using our Payment Element in conjunction with Setup Intents to save ACH Debit payment method details for usage later?
https://docs.stripe.com/payments/ach-debit/set-up-payment
pure pond
looking at that...
so that backend stuff looks fine - and yes thats what I want to do - save a setupIntent for charging at later time - have no issues with understanding what I need to do there on the backend. however I dont know react at all, and so dont really know where to start with setting that up that front end client for debug.
Is there a version of that front end client in html + javascript i could run?
or insturctions on how to run that react client in visual studio code on macos?
nocturne isle
Hm, that page is showing HTML+JS instructions for me, are you seeing React instructions there instead?
pure pond
I guess its both, there are View components in the java script, so I read it as being React.
Is there a downloadabe (eg zip file to github source) where I can get this front end client, with insturctions on how to run and debug the front end?
that page says "To initialize Stripe in your React Native app," ...sounds like its React...is that not what you see?
nocturne isle
Nope, I'm looking in the Custom payment form section, because you mentioned a website so I didn't think you were looking for React Native code.
This link should explicitly take you to the tab I'm looking at:
https://docs.stripe.com/payments/ach-debit/set-up-payment?platform=web
pure pond
ok cool. yes that looks better. thanks. I'll try and work thru that and see how i get on.
thanks for your help
will this chat stay open if i have questions over the next while?
nocturne isle
Any time! I'll leave the chat open for about 15 minutes. If I don't here from you by then I will go ahead and close it out. You can always ask another question if any arise after closing the thread, and myself or my teammate staffing the server will be happy to take a look.
pure pond
Ok thanks
maiden kiteBOT
pure pond
is there an example index.html and script.js files I can use for this tutorial?
hoary jay
👋 hopping in here since toby has to head out
pure pond
I'm not sure what else has to be included in the files. Also, the app.py that is mentioned, is that a server side (backend) is that a front end file needed?
hoary jay
Unfortunately we don't have a full sample for that specific guide, but those docs do have example of how to do this without react if you've selected the "single page application" tab at https://docs.stripe.com/payments/ach-debit/set-up-payment?platform=web#retrieve-the-client-secret
pure pond
ok so the only thing that is included of the front end client on that page, that I see, is the bit below app.py where is shows this:
(async () => {
const response = await fetch('/secret');
const {client_secret: clientSecret} = await response.json();
// Render the form using the clientSecret
})();
What about the rest of the html needed in the front end client to host and instantiate the stripe element that will display the bank details? Like I was saying to Toby, I'm weak on the front end client stuff, so I was hoping for a good bit of the HTML done for me in the example
I've done something liek this, does that make sense?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stripe ACH Direct Debit Example</title>
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<form id="payment-form">
<div id="bank-account-elements">
<!-- A div container for the bank account details elements -->
</div>
<div id="bank-account-errors" role="alert">
<!-- Bank account errors will be shown here -->
</div>
<button id="submit-button">Submit Payment</button>
</form>
<script src="script.js"></script>
</body>
</html>
hoary jay
Really the fastest thing for you would be to spin up your own local integration and try this yourself - yes, the code you shared does generally make sense, but we're likely going to miss things just from spot checking. One alternative you could consider is downloading the quickstart for our general payments flow (see https://docs.stripe.com/payments/quickstart) so that you have something to build off of and then tweaking it for the ACH debit flow you're trying to implement
pure pond
ok will look at that now....
ok yes this seems a bit more idiot proof which is what I need, thanks
hoary jay
👍