mkleymenov / stripe-connect-demo

Stripe Connect demo app for IT Konekt 2024

Stripe Connect Demo for ITKonekt 2024

A simple marketplace web application that leverages Stripe Connect and Stripe Billing for onboarding merchants, collecting payments from customers, and routing funds from customers to merchants. The application makes heavy use of Stripe low-code components and hosted experiences, such as:

• Stripe-hosted Connect onboarding
• Express Connect Dashboard
• Connect Payments embedded component
• Stripe-hosted Checkout experience
• Stripe-hosted Customer Portal

Tech Stack

• Java 21
• Gradle
• Spring Boot
• H2 database (local)
• TypeScript
• React.js (create-react-app)

Build and Run

Server

Build with Gradle

./gradlew build

Run with Gradle

You'll have to manually export environment variables from the server/.env file because Gradle does not support loading environment variables from files. See the Stripe Account Setup and API Keys section for instructions on how to get API keys.

STRIPE_API_KEY=sk_test_XXX STRIPE_WEBHOOK_SECRET=whsec_test_XXX ./gradlew bootRun

Run with IntelliJ

Create a new Spring Boot run configuration. Set the main class to com.dataart.itkonekt.App.

In the Build and Run section select Modify options... -> Environment variables. Specify the full path to the server/.env file in the Environment variables input.

The final configuration should look as follows:

Client

All commands below should be run from the web directory.

Install dependencies

npm install

Build

npm run build

Run

Note: React scripts will automatically read environment variables from .env or .env.local files. See the Stripe Account Setup and API Keys section for instructions on how to get API keys

npm run start

Application Overview

The web application consists of three pages:

• A Home page with customer and merchant registration and quick login links.

  

• A Merchant page with a Connect account onboarding / dashboard link, a merchant product configuration panel, and a list of payments received from customers.

  

• A Customer page with a Customer Portal link and a catalogue of products offered by merchants.

  

A typical user journey looks like follows:

1. Create a new Merchant account
2. Complete the hosted Connect Onboarding flow
3. Create a Product
4. Create a new Customer account
5. Buy one or more products
6. Check out Customer Portal to view and manage subscriptions, invoices and billing details.
7. Log in as the Merchant from whom a product was purchased
8. Check out the list of payments
9. Log in to the Express Connect Dashboard, check out received payments.

Test Data

The application is intended to be used with a Stripe account Test mode API keys. This means that all Stripe features are behaving identically to the Live mode, but no real charges take place, in particular because real cards / bank accounts cannot be used in the Test mode. Instead, Stripe provides a set of test data for payments and Connect accounts that can be used to simulate both success and error scenarios.

For example, in order to make a successful purchase of a merchant product, one can use a test Visa card with number 4242424242424242, any valid expiration date, and any 3-digit CVC.

Stripe Account Setup and API Keys

The application assumes that a user has a Stripe account with Connect product enabled in a Test mode. In order to set up the account:

• Create a new Stripe account at https://stripe.com.
• Log in to the Stripe Dashboard. Switch to the Test mode (a toggle in the upper right corner).
• Go to the Connect section and go through the Connect activation wizard.
  • The application is intended to be used with Express Connect accounts (connected accounts are created by the platform, onboarding is hosted by Stripe) and Destination Charges (customers transact with the platform which then forwards payments to connected accounts).
  • Make sure to accept the responsibilities imposed on your account by the selected Connect integration method.
• Go to the Customer Portal settings and click 'Save' to save the current configuration (also feel free to customize the configuration).
• [Optional] Customize branding for your account and your connected accounts. You may need to temporary switch to the Live mode in order to get access to all branding options.
• [Optional] Customize branding for your connected accounts Express Dashboard.
• [Optional] Customize payment methods available for customers on Stripe Checkout.

After your Stripe account is set up, go to the Developers -> API keys page to get a publishable and a secret API keys for your account (make sure you're in the Test mode!).

• Set the STRIPE_API_KEY environment variable in server/.env file to the secret API key.
• Set the REACT_APP_STRIPE_PUBLISHABLE_KEY environment variable in web/.env to the publishable API key

Stripe Webhooks

You can use Stripe CLI to forward any webhook events from your Stripe account to the local server.

stripe listen --forward-to http://localhost:8080/webhook

Copy the webhook signing secret (whsec_XXX) printed by the Stripe CLI and set it as a value for the STRIPE_WEBHOOK_SECRET environment variable in server/.env file. If the server is running, restart it to apply the changes.

---

Made with ❤️ by Mikhail Kleymenov