Junction Jack

Stripe Integration

How to Update Stripe API Keys on Bubble

1. Login to Bubble.io and click on Junction Jack Web App
2. Click the plugins icon on the left sidebar
3. Select Stripe Marketplace Express Pro from the list of Installed Plugins
4. Scroll down to find the area when API keys are listed
5. On a new tab, open Stripe
6. Click on Developers at the bottom, then API Keys
7. Copy the keys and paste them into the matching fields on Bubble a. The API Key and the Stripe Secret key are the same, except the API key needs to have "Bearer " added to the beginning of the secret key b. On Stripe, you are unable to view a secret key after it has been created. To view, click the three dots on the key's row and select Rotate key. This will change the key and you are able to view it ONCE.
8. Retrieve the Client ID by clicking the gear (Settings) at the top of the page. Click Connect then Onboarding Options. Next, click the OAuth tab. Copy the Live client ID and paste into Bubble.
9. Repeat these steps for retrieving the dev keys and client ID, by returning to the dashboard, then adding "/test" to the end of the url

For Consultants

Consultants use Stripe Connect to connect their Stripe accounts. This allows them to receive payments.

Where do they connect in Bubble?

After creating an account, consultants are shown a modal with interview questions. After the submit button is clicked, they are redirected to Stripe to connect their account. Once they complete the login or signup process with Stripe, they will be redirected back to Junction Jack.

If they do not complete the process, or had an account prior to the implementation of Stripe, there is another fallback. Consultants who do not have a connected Stripe account will not be able to use the Search or Match features. They will be shown a modal that states they need to connect their Stripe account. Clicking the Connect button will redirect them to Stripe.

How Do I know if a customer has connected their Strip Account?

Consultants with a connected Stripe Account will have a Stripe_user_id in the User database. If this field is empty, they did not connect a Stripe account.

Where is the Stripe Connection set up in the Bubble workflow?

1. Consultant Interview a. Select homescreen from 2nd dropdown on the top bar (next to Web) b. Select Button Submit is clicked from the 3rd dropdown. Step 9 of this workflow will show connect_stripe_account A

2. Connect Stripe Account modal a. Select connect_stripe_account from 2nd dropdown on the top bar (next to Web) b. Select Button Connect is clicked from the 3rd dropdown. Step 1 is the setup of the Stripe connection.

Where so I find a Consultant's connected account in Stripe?

In Stripe, click on Connect > Connected Accounts Search for the email address of the Consultant

For Brands

Brands are required to store a credit card on their account prior to hiring a consultant.

Where do they store their credit card in Bubble?

Brands will enter their credit card details on the credit-card page. This will create a Customer Account in Stripe. They will be redirect back to the Junction Jack homepage, once this step is complete.

The credit card may be added by going to Settings and clicking Update Card.

Where do they update their credit card in Bubble?

The credit card may be updated by going to Settings and clicking Update Card.

Where do they see their payment history?

Payment history may be viewed by going to Settings and clicking Payment History

How Do I know if a customer has stored a credit card?

A brand will have a Customer ID, Card ID, Card last4, and Card Token stored in the User database.

How Do I see a Brand's payment history?

Payments are stored in App Data under All Payments

Where is the Stripe Connection set up in the Bubble workflow?

1. Credit card page a. Select credit-card from 2nd dropdown on the top bar (next to Web) b. Select StripeMarketplaceToken A Card Token Created from the 3rd dropdown.

Where so I find a Brand's customer account in Stripe?

In Stripe, click on Customers Note: Payment history is not tracked in this customer account. That is why we have created the Payments database and provide payment history to the brands. Payment record are stored in Stripe under the Consultant's payment history.

Troubleshooting

Consultants are not being taken to the Stripe Account connection page

1. Check that the API keys and Client ID in the Plugin do not contain a space at the beginning a. Login to Bubble.io and click on Junction Jack Web App b. Click the plugins icon on the left sidebar c. Select Stripe Marketplace Express Pro from the list of Installed Plugins d. Scroll down to find the area when API keys are listed

There is an error after the Consultant or Brand has visited Stripe to connect their account and is attempting to return to Junction Jack

1. Check that the Redirect listed in Bubble.io is on the list of allowed redirects in Stripe a. To view the redirect in Bubble.io:
   1. The Redirect URI will be the URL of the page where the connect express/standard account was added.
      2. You will need to visit the page to get the url from there. b. To view the redirect list in Stripe:
   2. Login to Stripe and click the gear (Settings) at the top of the page. Click Connect then Onboarding Options. Next, click the OAuth tab.
   3. Validate the URI is listed on the list. If not, add it.

NOTE: Any and all query parameters that are appended to Junction Jacks's URL must be added to Stripe's list.