Stripe integration in ReactJS application - Stripe Connect Integration

Table Of Contents

• What is Stripe Connect?

• How to integrate stripe connect standard account - Standard account

• Account Capabilities

• Pricing

• Payments for Connect accounts

• Points to consider while integrating

• Possible errors one might face and how to rectify it

• Conclusion

A big thank you to the readers who are visiting this 3rd installment of the stripe integration in ReactJS applications series. For those who are visiting this blog first, we would like to give an idea about what this series is about. Being a top web development company, we felt that there was a need to answer an important question of the developer community, how to integrate stripe to ReactJS applications. Stripe has three modes of integration as we know.

• Direct checkout

• Subscription

• Stripe Connect

We felt a need to provide a comprehensive information about all the three modes to fellow developers encompassing various aspects viz.

• Pre-requisites

• Things to consider before integrating.

• Step by Step process of integration.

• Standard errors faced during integration and how to address those.

All these information are scattered over the internet, so this series is our try to consolidate as much information as we can in a single blog.

In the 1st blog we explored, stripe integration direct checkout.

In the 2nd blog we explored, stripe integration subscription.

In this 3rd and last blog we will explore, integrating stripe connect. We will explore this integration is a series of 3 as it contains further three account types viz. Standard, Express, and Custom.

We will explore standard account type in this blog

What is stripe connect?

You might think it's just another way of payment, partially correct but it's way more than just another way of payment. Basically, stripe connect is a solution provided for business or a marketplace. It enables businesses to accept payment on behalf of their providers.

Suppose you have a platform which sells products from different providers, basically the providers have the product listed on your platform and you sell them on their behalf. Now, the consumer purchases the product from your platform then the amount should actually go to the provider but some portion should come to the platform as well. So, the platform basically is a mediator and collects money on behalf of providers.

Prerequisites for stripe connect

• Basic Stripe Account Setup

Sign Up: Create a regular Stripe account at stripe.com using your business email address. Skip this step if you already have an existing account.

Business Information: During the sign-up process, you will be asked to provide details about your business, including:

- Legal Business Name

- Business Type (e.g., LLC, corporation, sole proprietorship)

- Employer Identification Number (EIN) (for U.S. businesses) or relevant tax information in other countries.

- Business Address and Phone Number.

• Verify Identity and Business

Owner Details: You’ll need to provide personal information about the business owner(s) or person(s) responsible for the Stripe account:

- Full Name

- Date of Birth

- Social Security Number (for U.S. businesses) or relevant identification in other countries.

- Address

- Phone Number

  

Bank Account Information: A verified bank account where Stripe can deposit funds is required.

- Routing Number and Account Number for payouts.

Bank Verification: Some countries may require additional bank verification steps.

• Business Website or Product Description

You will be asked for the type of business you will be operating using this stripe connect account. You need to select the most appropriate from the provided options.

• Enable Stripe Connect

Activate Connect: Once your Stripe account is created and verified, you can enable Stripe Connect in your dashboard:

- Connect Settings: You’ll choose between different types of Connect accounts (Standard, Express, or Custom) based on how you want to manage connected accounts. We will see this in details in the upcoming section.

- API Keys: You’ll get API keys to integrate Stripe Connect with your platform.

- Webhook Configuration: Set up webhooks to handle events related to Connect accounts (e.g., account creation, transfers, payouts).

Once your account is ready for stripe connect and verified we can proceed with creating different provider accounts.

How to integrate stripe connect standard account - Standard account

Step 1: Create a standard account and prefill information

Use the Create Account API to create a connected account with type set to standard. You can prefill any information, but at a minimum, you must specify the type adding email while creating account is recommended. The country of the account defaults to the same country as your platform, and the account confirms the selection during onboarding. If you know what capabilities (we will see what does this mean in next section) the account needs, you can request them when you create it.

  Server.js code
  const stripe = require('stripe')('sk_test_XXXX');
  const account = await stripe.accounts.create({
    type: 'standard',
  Email : ‘abc@mailinator.com’
  });

If information is already collected, you can pass that information in the following fields while creating standard account.

If the data is passed in first step, stripe will not ask for the same data while onboarding, but it would ask the user to re-confirm the data by prefilling it.

**

When testing your integration, prefill account information using test data.

Step 2: Create an account link**

You can create an account link by calling the Account Links API with the following parameters:

• account - use the account ID returned by the API from the previous step

• refresh_url

• return_url

• type = account_onboarding

server.js
const stripe = require('stripe')('sk_test_XXXX');
const accountLink = await stripe.accountLinks.create({
  account: '{{CONNECTED_ACCOUNT_ID}}',
  refresh_url: 'https://example.com/reauth',
  return_url: 'https://example.com/return',
  type: 'account_onboarding',
});

**

Step 3: Redirect your user to the account link URL**

The response to your Account Links request includes a value for the key url. Redirect to this link to send your user into the flow. You can only use URLs from the account links once because they grant access to the account holder’s personal information. Authenticate the user in your application before redirecting them to this URL. After you create an account link on a Standard account, you won’t be able to read or write Know Your Customer (KYC) information. Prefill any KYC information before creating the first account link.

Don’t email, text, or otherwise send account link URLs outside of your platform application. Instead, provide them to the authenticated account holder within your application.

**

Step 4: Handle the user returning to your platform**

Connect Onboarding requires you to pass both a return_url and refresh_url to handle all cases where you redirect the user to your platform. It’s important that you implement these correctly to provide the best experience for your user.

You can use HTTP for your return_url and refresh_url while in test mode (for example, to test with localhost), but you can only use HTTPS in live mode. Be sure to swap testing URLs for HTTPS URLs before going live.

**

return_url

Stripe issues a redirect to this URL when the user completes the Connect Onboarding flow. This doesn’t mean that all information has been collected or that there are no outstanding requirements on the account. This only means the flow was entered and exited properly.

No state is passed through this URL. After redirecting a user to your return_url, check the state of the details_submitted parameter on their account by doing either of the following:

      - Listening to account.updated [webhooks](https://docs.stripe.com/webhooks).

      - Calling the [Accounts](https://docs.stripe.com/api/accounts) API and inspecting the returned object.

    

  

  
  

return_url

Your user redirects to the refresh_url in these cases:

      - The link expired (a few minutes went by since the link was created).

      - The user already visited the link (they refreshed the page, or clicked back or forward in the browser).

      - Your platform is no longer able to access the account.

      - The account has been rejected.

    

    

Your refresh_url triggers a method on your server to call Account Links again with the same parameters, and redirect the user to the Connect Onboarding flow to create a seamless experience.

Step 5: Handle the users that have not completed onboarding**

A user that is redirected to your return_url might not have completed the onboarding process. Use the /v1/accounts endpoint to retrieve the user’s account and check for charges_enabled. If the account isn’t fully onboarded, provide UI prompts to allow the user to continue onboarding later. The user can complete their account activation through a new account link (generated by your integration). You can check the state of the details_submitted parameter on their account to see if they’ve completed the onboarding process.

Once all the steps are completed the account goes in verification, once verification is done the user can login with the details provided and see their dashboard.

The admin or the main account holder can also see the status of each and every connect account users and their status along with the money movement for every connect user connected to their platform along with account balances.

** Integrate stripe connect today in your apps. Contact Nimblechapps! **Contact us

Account Capabilities

The capabilities you request for a connected account determine the information you need to collect for that account. Capabilities are set on the Account object.

For standard account these capabilities are handled by the stripe itself.

For more details you can check the link.

Pricing

The pricing structure for Stripe Connect varies depending on the type of account you choose: Standard, Express, or Custom. Below is a breakdown of the costs associated with each type:

1. Standard Accounts**

   • Cost: No additional fees beyond standard Stripe transaction fees.

   • Transaction Fees: Stripe’s typical fees apply, such as 2.9% + 30¢ per successful charge (may vary by country and card type).

   • Features: Users manage their own accounts, with no platform fees for managing their payouts or account.

   **

2. Express Accounts**

   • Cost: $2 per active account per month.

   • Transaction Fees: Stripe’s standard transaction fees (e.g., 2.9% + 30¢ per charge) plus 0.25% per payout, with a minimum of 25¢.

   • Features: Platform handles most of the payment flow; users have limited access to Stripe dashboard.

   **

3. Custom Accounts**

   • Cost: $2 per active account per month.

   • Transaction Fees: Stripe’s standard transaction fees plus 0.25% per payout, with a minimum of 25¢.

   • Features: Full control over the payment experience, including user onboarding, compliance, and payouts.

   **

Additional Fees:**

- **Payouts:** For Express and Custom accounts, there’s an additional fee of 0.25% of the payout amount, with a minimum of 25¢ per payout.

- **Currency Conversion:** If there’s currency conversion, Stripe charges an additional 1% fee.

- **International Cards:** For transactions using international cards, an extra 1% fee may apply.

These fees may vary based on location and business model, so it’s important to check Stripe’s official pricing page for up-to-date and country-specific details.

**

Payments for Connect accounts

For connect accounts, here will show you how the actual payment is taken from user and how it gets passed to the connect account by also giving the money to platform account as well.

We have seen in earlier blogs that we need to create Payment Intent for paying anything at customers end.

There are three types in which the connect account can be paid which are explained below.

1. Direct charges**

Create a charge directly on a connected account. Customers are often unaware of your platform’s existence. You can add an application fee to the charge which is transferred to your platform’s account balance.

This charge type is best suited for platforms providing software as a service. For example, Shopify provides tools for building online storefronts, and Thinkific enables educators to sell online courses.

With this charge type:

• You create a charge on your user’s account so the payment appears as a charge on the connected account, not in your account balance.

• The connected account’s balance increases with every charge.

• Funds always settle in the country of the connected account.

• Your account balance increases with application fees from every charge.

• The connected account’s balance is debited for refunds and chargebacks.

• You can choose whether to have Stripe debit fees directly from connected accounts or from your platform account.

Only connected accounts with the card_payments capability can be directly charged.

**

2. Destination charges**

Create a charge on the platform and immediately transfers funds to a specified connected account. You decide whether some or all of those funds are transferred, and whether to deduct an application fee.

This charge type is best suited for marketplaces such as Airbnb, a home rental marketplace or Lyft, a ridesharing app.

With this charge type:

• You create a charge on your platform’s account so the payment appears as a charge on your account. Then, you determine whether some or all of those funds are transferred to the connected account (see funds flow diagrams below).

• Your platform account balance is debited for the cost of the Stripe fees, refunds, and chargebacks.

server.js
const paymentIntent = await stripe.paymentIntents.create({
    amount: parseInt((totalAmount).toFixed(2)),
    currency: currency,
    customer: ‘Cust_1XXXXX,
    automatic_payment_methods: {
        enabled: true,
    },
    transfer_data: {
        amount: parseInt(totalAmountForTransfer).toFixed(2)),
        destination: connectedStripeAcc,
    },
});

**

In the above example, totalAmount is the amount taken from user, customer is the customerId provided from stripe for the customer who is paying.

Transfer data is the actual data that is to be transferred to the connected account, amount is the amount to be transferred, this amount depends on your business logic that how much account can be transferred.

destination is the connected account id provided by stripe to whom the amount is to be transferred to.

In most scenarios, destination charges are only supported if both your platform and the connected account are in the same region (for example, both in the US). For cross-region support, you can specify the settlement merchant to the connected account using the on_behalf_of attribute on the charge.

3. Separate charges and transfers**

Create charges on your platform and split funds between multiple connected accounts, or hold them when you don’t know the specific user at the time of the charge. The charge on your platform account is decoupled from the transfer(s) to your connected accounts.

This charge type is best suited for marketplaces that need to split payments between multiple parties, such as DoorDash, a restaurant delivery platform.

With this charge type:

• You create a charge on your platform’s account first. Create a separate transfer to move funds to your connected account. The payment appears as a charge on your account and there’s also a transfer to a connected account (amount determined by you), which is withdrawn from your account balance.

• You can transfer funds to multiple connected accounts.

• Your account balance is debited for the cost of the Stripe fees, refunds, and chargebacks.

In most scenarios, your platform and any connected account must be in the same region. Attempting to transfer funds across a disallowed border returns an error. For information about cross-region support, see Cross-border transfers.

**

Looking for a mobile or web app? Contact for free consultation. **Contact us

Points to consider while integrating

• Payment Flow and Account Types:** Choose between Standard, Express, or Custom accounts based on the level of control your platform needs.

• Platform and Connected Account Relationships: Decide whether payments go directly to connected accounts or pass through your platform first.

• User Onboarding and Verification: Implement Stripe’s hosted onboarding or build a custom flow for verifying connected users’ identities.

• Compliance and Legal Considerations: Ensure compliance with KYC, AML, and local laws, including tax reporting and GDPR requirements.

• Handling Payouts and Fees: Configure payout schedules and platform fees to control how connected accounts receive funds and how you collect your earnings.

• Webhooks and Notifications: Set up webhooks to track important events like account updates, payments, and payouts.

• Fraud Prevention and Security: Use Stripe’s built-in fraud detection and two-factor authentication to protect your platform and users.

**

Possible errors one might face and how to rectify it

Invalid API Key**

• Error: "Invalid API Key provided: sk_test_xxx."

• Cause: Incorrect or missing API key.

• Resolution: Verify you’re using the correct API key for your environment (Test or Live) and ensure it's set correctly in your code.

Account Verification Failed

• Error: "The account cannot be created or verified."

• Cause: Missing required fields or incorrect user information during onboarding.

• Resolution: Ensure all required fields (e.g., name, email, date of birth) are provided, and verify the format of inputs (e.g., correct country codes).

Insufficient Permissions for API Call

• Error: "Permission to perform this action is denied."

• Cause: Using restricted API keys or not granting the required access.

• Resolution: Check your API key's permissions and make sure the correct keys (publishable/secret) are used for different operations.

Incorrect Webhook Signature

• Error: "Webhook signature verification failed."

• Cause: Webhook endpoint cannot verify the request from Stripe.

• Resolution: Ensure the webhook signature verification code is correct, and the secret used matches the one in your Stripe dashboard.

**Connected Account Not Verified

• Error:** "The connected account has not completed the verification process."

• Cause: KYC (Know Your Customer) verification is incomplete.

• Resolution: Notify the connected account owner to complete verification, or check the dashboard for missing information (e.g., identity documents).

Invalid Payment Amount

• Error: "Amount must be at least 50 cents."

• Cause: The payment amount is below Stripe's minimum transaction limit.

• Resolution: Ensure the payment amount is at least the minimum allowed (usually 50 cents or the equivalent in other currencies).

Currency Mismatch

• Error: "Currency provided does not match the account’s default currency."

• Cause: Attempting to charge in a currency not supported by the connected account.

• Resolution: Ensure the currency you’re charging is supported by the connected account, or create a separate transfer for a different currency.

Transfer Group Not Found

• Error: "Transfer group identifier not found."

• Cause: Incorrect or missing transfer group when splitting payments.

• Resolution: Verify that the transfer group identifier is correctly associated with the charge and connected account.

Payout Failure

• Error: "Payout failed due to invalid bank account."

• Cause: The connected account’s bank information is invalid or outdated.

• Resolution: Ask the user to update their bank details in the Stripe dashboard or through your platform.

Invalid Destination Account

• Error: "Invalid destination account for this payment."

• Cause: The connected account cannot receive funds (e.g., unsupported country or currency).

• Resolution: Check the connected account's settings and ensure it can accept payments in the specified currency and country.

Conclusion

We have explored all the forms of stripe integration in ReactJS applications throughout this series. We still have two more i.e. Express and Custom for the stripe connect integration to look into in the consequent blog, so stay tuned for the same. We really feel that this sort of a series will benefit our counterparts and specifically, the ReactJS developers would be glad to know that they have the consolidated information about stripe integration at a single place. We urge our community to connect with us, should they have any questions pertaining to this.