How to set up Stripe ACH Payments in Bubble.io? Best Tutorial

How to set up Stripe ACH Payments in Bubble.io?

This is a step-by-step tutorial to help you set up Stripe ACH Payments in bubble.io using plaid and stripe. This tutorial guide you to add one of the easiest and cheapest ways to charge your customers.

Waleed Mudassar
May 10, 2022

ACH (Automated Clearing House) is a payment method which allows payments by electronically moving money between bank accounts all across the USA.

ACH payment is not an instant payment method, it can take from 3 to 5 working days to appear in your account.

Why to use Stripe ACH as a payment method?

If you live in the USA and have used card networks to get paid you know how costly it can get. Some benefits of ACH payments are:

Low cost – Since an ACH payment is not routed through the relatively expensive card networks, it tends to be a cheaper method for electronically transferring funds.
High retention – Credit and debit cards expire, leading to involuntary churn. With an ACH payment, a bank account is the source of funds and as such the risk of involuntary churn is significantly reduced.
Open to anyone – Anyone with a US bank account is able to pay via the ACH scheme. This includes both businesses and consumers.

Before starting the setup

Enable Backend Workflows inside your bubble app. You can do this by going to Settings>API and checking the Enable Backend Workflows checkbox.

Install the plaid plugin https://bubble.io/plugin/plaid-up-to-date-for-oauth-1595783105953×768669723521974300

Go to Plaid and signup for a free account

Let’s Begin

Step-1: Configure the plugin

In your plaid dashboard you will find your Client ID and Secret. Just copy it from there and paste it in your plugin settings.

Step-2: Create a Link Token

Create a workflow and add a step “Plaid – Create Link Token”. You can place this step in the workflow that will initiate Plaid or in a reusable element which has all Plaid related actions.
Fill in the action fields in user Id place your user’s unique id, in yourAppName field type your app’s name,in plaidProducts field enter [“auth”,”transactions”]
For RedirectUri field create a new page for Oauth and give URL of that page. The user will see that page for a very short amount of time so it can be designed very simply.
Visit your plaid dashboard go to Team Settings > API, then in Allowed Redirect URI page add the URL of your OAuth page which you created earlier.
Next, link the plaid webhook. Go to backend workflows and create a new API endpoint and make sure it is publicly accessible and runs without authentication,

Click Detect Data to view the full URL of the API Workflow and copy the full URL from the detect data window.
Now return to the page where you Create Link Token workflow is and in callbackURL field paste the copied URL.
Complete the remaining fields of the Create Link Token step. Input countries. Leave all the four Subtype fields as [“all”].
At last create a new step in your workflow to save the Link Token you create in step 1. This will enable you to use the link tokens for future actions. Create a new Data Type in your app called Link Tokens which contains the Link Token and Expires At fields, Set those fields to the result of the Create Link Token step.

Step-3: Initiate Plaid Link

Add the Plaid link element to the desired page or reusable element.
Add a button on which the user will click and initiate the Plaid Link.
Add a workflow to the button placed on the page and add the Start Plaid Link action specifying the Plaid Link element you added to your page.
In link token field add the Link Token created earlier and leave the recievedredirectURI blank.
Preview the app and trigger the workflow you just created by click on the button, Plaid link will appear and you will be able to proceed through the steps.

Step-4: Save Account Details

On the reusable element or the page where your user initiates the Plaid Link session create a new Workflow on the condition “A Plaid Link is successful” and set the element of this workflow to the Plaid Link element placed on the page.
The first event of this workflow is the Plaid Exchange Public Tokens step. This step gets your app the permanent access token required to access the data for the account your user just connected. In public_token field set the data to This PlaidLink’s plaidPublic Token.

Save the data coming from the previous step in database by creating a new data type called Plaid Institution

Now create a backend API workflow called create_account that takes in all the data elements you want to collect about an account.

Create a new datatype called Accounts and save are the relevant fields to that datatype.
Now trigger the new workflow to create accounts as the last step of the workflow A Plaid Link is successful.

Step-5: Complete the OAuth Page

On OAuth page place Plaid Link element anywhere on the page.
Add a workflow on page load.
In the workflow add an action Start Plaid Link. The start a Plaid Link step should use the same Link Token used for the initial Plaid Link flow for this user, and then should use the “this URL” dynamic option for the redirectreceivedURL.

Step-6: Initiate Webhooks

First go to the backend workflows. Detect Data for plaid webhook API workflow that was created earlier and leave the data prompt open in bubble.
Preview your app and go through the Plaid Link flow again to connect a new bank account.
Return to the bubble editor and your will see API Workflow Request Data page click save.
Next, make sure to return to your Create Link Token step that was created earlier and update the value in the callbackUrl field. Remove the “/initialize” from the URL that you pasted there earlier. The “/initialize” is a special word to tell Bubble to complete the step we just did, but it won’t be required for future account connections.

Step-7: Install and Configure Stripe + Plaid Plugin

Install Stripe + Plaid plugin to you bubble app.
Configure the plugin by adding the secret key from your stripe dashboard in username field and leave the password field blank.

Step-8: Add account to Stripe

In this step, use the Plaid – Auth – Get Stripe Account Token action with the access token of the Institution the user linked to your account. Then, specify the account_id of the account you need a payment token for – note that only Checking and Savings accounts are eligible for Stripe ACH payments.
Next, the workflow triggers the action Stripe ACH – Create Stripe Customer with Plaid Account. This action needs a User ID (probably your user’s email or unique ID) and the stripe_bank_account_token result of the previous step. For error handling purposes, it is recommended to add an Only When step to this action to only proceed when the stripe_bank_account_token is not empty.
Next, save the Stripe customer_id that results from the previous step. You’ll need this customer ID to trigger payments.

Step-9: Charge Customer

Charge a customer (which automatically uses the account added in the previous step) by specifying the amount (in cents) and the stripe customer ID saved in the previous step.
You should save the transaction ID returned by the previous step in your database. Since ACH transactions take multiple days to process (See links in the Next Steps section), you will need this transaction ID to keep track of the transaction.