# SaaS platform quickstart
# Build a SaaS platform integration
> You can customize this guide by selecting integration options in the [Interactive platform guide](https://docs.stripe.com/connect/interactive-platform-guide.md).
Use this working code sample to integrate Stripe Hosted Checkout for payments with Stripe Connect. With this approach, Stripe hosts the checkout page for you and payments go directly to your connected accounts.
const SuccessDisplay = ({ sessionId }) => {
return (
Subscription to Starter Plan successful!
);
};
const Message = ({ message }) => (
{message}
);
const SubscribeBtn = ({ accountId }) => {
const handleSubscribe = async () => {
if (!accountId) return;
const response = await fetch(`/api/subscribe-to-platform`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ accountId }),
});
if (!response.ok) {
console.error("Subscription failed:", data);
return;
}
const data = await response.json();
const checkoutSessionUrl = data.url;
window.location.href = checkoutSessionUrl;
};
return (
);
};
const SubscriptionToPlatformStatus = ({ accountId }) => {
let [message, setMessage] = useState("");
let [success, setSuccess] = useState(false);
let [sessionId, setSessionId] = useState("");
useEffect(() => {
// Check to see if this is a redirect back from Checkout
const query = new URLSearchParams(window.location.search);
if (query.get("success")) {
setSuccess(true);
setSessionId(query.get("session_id"));
}
if (query.get("canceled")) {
setSuccess(false);
setMessage(
"Order canceled -- continue to shop around and checkout when you're ready."
);
}
}, [sessionId]);
if (!success && message === "") {
return ;
} else if (success && sessionId !== "") {
return ;
} else {
return ;
}
};
const handleCreateProduct = async (formData) => {
if (!accountId) return;
if (needsOnboarding) return;
const response = await fetch("/api/create-product", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ...formData, accountId }),
});
const data = await response.json();
setShowForm(false);
};
export default function Page() {
// Get the checkout session ID from the URL
const [searchParams] = useSearchParams();
const sessionId = searchParams.get("session_id");
const [accountId] = useState(localStorage.getItem("accountId"));
return (
);
}
const response = await fetch("/api/create-connect-account", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ email }),
});
const response = await fetch("/api/create-account-link", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ accountId }),
});
const data = await response.json();
window.location.href = data.url;
export async function POST(request) {
try {
const { email } = await request.json();
// Create a Connect account with the specified controller properties
const account = await stripe.v2.core.accounts.create({
display_name: email,
contact_email: email,
dashboard: "full",
defaults: {
responsibilities: {
fees_collector: "stripe",
losses_collector: "stripe",
},
},
identity: {
country: "US",
entity_type: "company",
},
configuration: {
merchant: {
capabilities: {
card_payments: { requested: true },
},
},
},
});
return NextResponse.json({ accountId: account.id });
} catch (error) {
return NextResponse.json(
{ error: { message: error.message } },
{ status: 400 }
);
}
}
export async function POST(request) {
try {
const { accountId } = await request.json();
const accountLink = await stripe.v2.core.accountLinks.create({
account: accountId,
use_case: {
type: 'account_onboarding',
account_onboarding: {
configurations: ['merchant', 'customer'],
refresh_url: 'https://example.com',
return_url: 'https://example.com',
},
},
});
return NextResponse.json({ url: accountLink.url });
} catch (error) {
console.error('Error creating account link:', error);
return NextResponse.json(
{ error: { message: error.message } },
{ status: 400 }
);
}
}
export async function GET(request, { params }) {
try {
const { accountId } = await params;
const options = {};
// If accountId is not 'platform', fetch from connected account
if (accountId !== "platform") {
options.stripeAccount = accountId;
}
const prices = await stripe.prices.list(
{
expand: ["data.product"],
active: true,
limit: 100,
},
options
);
return NextResponse.json(
prices.data.map((price) => ({
id: price.product.id,
name: price.product.name,
price: price.unit_amount,
priceId: price.id,
period: price.recurring ? price.recurring.interval : null,
image: "https://i.imgur.com/6Mvijcm.png"
}))
);
} catch (error) {
console.error('Error fetching products:', error);
return NextResponse.json(
{ error: { message: error.message } },
{ status: 400 }
);
}
}
export async function POST(request) {
try {
const { productName, productDescription, productPrice, accountId } = await request.json();
// In direct charges model, create products on the connected account
const product = await stripe.products.create({
name: productName,
description: productDescription,
}, {
stripeAccount: accountId,
});
const price = await stripe.prices.create({
product: product.id,
unit_amount: productPrice,
currency: 'usd',
}, {
stripeAccount: accountId,
});
return NextResponse.json({
productId: product.id,
priceId: price.id,
});
} catch (error) {
console.error('Error creating product:', error);
return NextResponse.json(
{ error: { message: error.message } },
{ status: 400 }
);
}
}
const sessionParams = {
line_items: [
{
price: priceId,
quantity: 1,
},
],
mode: mode,
// Defines where Stripe will redirect a customer after successful payment
success_url: `${process.env.DOMAIN}/done?session_id={CHECKOUT_SESSION_ID}`,
// Defines where Stripe will redirect if a customer cancels payment
cancel_url: `${process.env.DOMAIN}`,
};
let session;
if (accountId) {
session = await stripe.checkout.sessions.create(sessionParams, {
stripeAccount: accountId,
});
} else {
session = await stripe.checkout.sessions.create(sessionParams);
}
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)
### Install dependencies
Run `npm install` from the root of the project to install the dependencies.
### Run the application
Run `npm run dev` from the root of the project to start the application.
### Navigate to the application
Go to in your web browser.
### Install the Stripe Node library
Install the package and import it in your code. Alternatively, if you’re starting from scratch and need a `package.json` file, download the project files using the Download link in the code editor.
#### npm
Install the library:
```bash
npm install --save stripe@20.1.0
```
#### GitHub
Download the stripe-node library source code directly [from GitHub](https://github.com/stripe/stripe-node/releases/tag/v20.1.0).
### Add an endpoint to create a connected account
Set up an endpoint on your server for your client to call to handle creating a connected account.
### Create a connected account
Call the Stripe API to create a connected account. We’ve configured the attributes used based on your preferences. You can prefill verification information, the business profile of the connected account, and other fields on the account if your platform has already collected it.
Use your Stripe API keys to make API requests on behalf of your connected accounts.
### Call the endpoint to create a connected account
Call the endpoint you added above to create a connected account.
### Add an Account Link endpoint
Set up an endpoint on your server to create an Account Link.
### Provide a return URL
When your connected account completes the onboarding flow, it redirects them to the return URL. That doesn’t mean that all information has been collected or that the connected account has no outstanding requirements. It only means that they entered and exited the flow properly.
### Provide a refresh URL
Stripe redirects your connected account to the refresh URL when the link is expired, the link has already been visited, your platform can’t access the connected account, or the account is rejected. Have the refresh URL create a new onboarding Account Link and redirect your connected accounts to it.
### Call the endpoint to create an Account Link
Provide the connected account ID.
### Redirect the connected account to the URL
Send the connected account to Stripe to complete onboarding using Account Link. They’re redirected back to your app when onboarding is complete.
### Connected account completes onboarding data collection
At this point the connected account will be redirected to a hosted form and will put in the necessary onboarding information for the capabilities requested.
When testing your integration, fill account information using [test data](https://docs.stripe.com/connect/testing.md).
### Handle the connected account returning
Display a useful message on the return URL.
### Handle the Account Link refreshing
Generate a new Account Link on the refresh URL.
### Add an endpoint to create a product for the connected account
Set up an endpoint for creating products and prices on behalf of your connected account. Products define what your connected accounts sell and prices track how much and how often to charge.
### Call the endpoint to create a product
Call the endpoint from the client.
### Add an endpoint to fetch the products
Set up an endpoint for fetching all products for a given connected account.
### Call the endpoint to fetch the products
In your business model, each connected account usually has its own storefront. To fetch all the products for a specific connected account, call the endpoint within your storefront.
### Create an endpoint to create a Checkout Session
The `/create-checkout-session` endpoint creates a Checkout Session and redirects the customer to a Stripe-hosted checkout page.
### Add an application fee amount
The amount that your platform plans to take from the payment.
### Indicate the connected account
The connected account that the payment will be created on.
### Create an endpoint to subscribe a connected account to the platform
Set up an endpoint that creates a subscription for the connected account to pay the platform a SaaS fee.
### Create an endpoint for the billing portal
Set up an endpoint that creates a billing portal session so connected accounts can manage their platform subscription.
### Call the endpoint to redirect the customer to checkout
The `form` makes a request to the `/api/create-checkout-session` endpoint on the server which redirects the customer to a Stripe-hosted checkout page.
### Post-checkout page
After a user completes their payment, Stripe redirects the customer to a payment success page.
### Listen for webhook events
Create a `/webhook` endpoint and obtain your webhook secret key in the [Webhooks](https://dashboard.stripe.com/webhooks) tab in Workbench to listen for events related to your payments. Use a webhook to receive these events and run actions.
### Try it out
You know the integration is working successfully if you complete a payment and see the `/done` page. Once you have the Stripe dashboard setup, the test payment will show there as well. Use any of these test cards to simulate a payment:
| Scenario | Card Number |
| ----------------------------------- | ---------------- |
| Payment succeeds | 4242424242424242 |
| Payment requires 3DS authentication | 4000002500003155 |
| Payment is declined | 4000000000009995 |