Issuing and Financial Accounts for platforms sample app

In addition to a full suite of documentation and SDKs for Stripe Issuing and Financial Accounts for platforms, we offer a Next.js sample app.

See a demo of our sample app at baas.stripe.dev, or check out the GitHub repository.

Accessing code

The sample app is a Next.js app that leverages TypeScript, React, and Material UI. You can fork the project from the Stripe samples GitHub repository and use the included components as a starting point for your own app.

App features

The app provides many how-to examples, including:

• Leverage Stripe Connect Onboarding to collect Know Your Customer (KYC) information for onboarding connected accounts compliantly
• Display account information and balance
• Display transactions on the financial account
• Simulate sending funds to an external account using ACH or wire
• Simulate receiving an ACH credit
• Visualize the volume of inbound and outbound money flows using ApexCharts
• Create cardholders compliantly
• Create cards using the financial account as an issuable balance
• Show sensitive card numbers in a PCI-compliant way
• Simulate card authorizations
• Get paid through a payment link, then transfer funds from your Stripe payments balance to the financial account
• Use test helpers to simulate actions impacting the account

Component breakdown

The following sections provide an overview of how each component in the sample app works.

You can learn more about Issuing APIs and features or financial account APIs and features.

Account creation

The account creation flow consists of four steps:

1. Create a connected account with the following capabilities: transfers, card_issuing, and treasury.

1. Create a financial account.

1. Create a Connect Onboarding link and use it to redirect new connected accounts to collect the necessary profile information for the requested capabilities.

Account balance

The account balance card uses only the stripe.treasury.financialAccounts.list API.

The payload of the above command contains a balance object consisting of the current balance (cash) and outbound funds.

Funds in and funds out chart

The funds movement chart uses only the stripe.treasury.transactions.list API.

The responses are grouped by positive or negative balances and creation date. The data is then ported into ApexCharts to create a dynamic display of the funds flow.

Transaction list

The transaction list uses the stripe.treasury.transactions.list API.

The columns in the transactions table are parsed from the transaction object using the following mapping:

• created → Date
• amount → Amount / Currency
• flow_type → Type
• status → Status
• description → Description

Send money interface

The money sending feature in the sample app uses the Financial Accounts for platforms OutboundPayments feature. You can use OutboundPayments to send money to a third party’s external account.

Issuing cardholder creation

You must create a Cardholder before you can issue a card using Stripe Issuing to spend funds from the financial account. Use the stripe.issuing.cardholders.create API to create cardholders.

Issuing cards

After you create a Cardholder, you can issue a card to the Cardholder using the stripe.issuing.cards.create API.

Cards list

The cards list renders using data from the stripe.issuing.cards.list API.

Card authorization list

Use the stripe.issuing.authorizations.list API to retrieve authorizations for a specific card. The following example limits the list to the 10 most recent authorizations.

The columns in the authorization table are parsed from the response object using the following mapping:

• created → Date
• amount → Amount / Amount Currency
• card.cardholder.name → Name on Card
• card.last4 → Last 4
• approved → Approved
• status → Status
• merchant_data.name → Merchant
• merchant_data.category → Merchant Category

Test helpers

The sample app features test helpers that enable you to perform certain actions, such as funding your account, creating a payment link to collect funds in a connected account, and paying out funds to the financial account. You can access most of the test helpers by clicking the Generate Test Data button or clicking Test Data.

Received Credit test helper

In testing environments, you can add funds to a financial account using the ReceivedCredit Test Helpers. This test helper simulates receiving a transfer from an external bank account into your financial account.

Payment links and payouts

You can use payment links to add funds to the connected account that’s associated with a financial account:

1. Create a Price that determines the amount added into the connected account after completion of payment.

1. After obtaining the price, Stripe creates a PaymentLink, and you redirect the customer to complete the payment. Use the Price id from the previous step to set the value for the price parameter. Alternatively, you can exclude the parameter to use a default value instead.

Payout from the connected account payments balance

Payouts can send funds from a connected account’s payments balance to their financial account. Do the following to execute a payout:

1. Check if there’s an external account configured for the connected account. To do so, use the accounts.retrieve API to obtain the account object and verify if the external_account property is populated.

1. If the connected account doesn’t have an external account, they can set up the financial account as their external account.

1. Initiate a payout to the connected account’s external account. In this case, the external account is the financial account.