Stripe lets you set up payments for your app so you can charge users for access or features.

Our new integration helps set it up in minutes. It lets you:

  • Create a payment account in Create with Stripe
  • Add key Stripe functions + components to your app for building payment and checkout flows
  • Lets users subscribe to your app
  • Track which users have subscribed in your user accounts database
  • Unlock app features based on the user’s subscription status

This integration is designed for Stripe subscriptions (users pay $X per month for a paid tier, similar to Create Pro).

Other payment methods (like one-time or tips) are not officially supported yet. You can customize the Stripe elements the integration adds.

​
Prerequisites

A Create project with User Accounts enabled

​
User Flow

Here’s what your user flow will look like once set up:

  1. User visits your landing page
  2. User signs in with User Accounts
  3. User sees:
    • Free tier app with your paid upgrade upsell OR
    • Payment required from start for access
  4. User goes through upsell to buy a subscription:
    • Redirected to Stripe checkout
    • Fills in payment details in Stripe’s UI
  5. User submits payment:
    • Redirected to your app after subscribing
    • User marked as active subscriber in the users database that comes with User Accounts
    • Gains access to paid features
  6. User later cancels subscription:
    • User marked as inactive subscriber in your user accounts database
    • Access to paid features removed

After a customer subscribes, you can manage them manually from your Stripe dashboard.

​
Make a Stripe Account

1

Visit Create Dashboard -> Accept Payments

2

Complete Stripe Onboarding

Create partners with Stripe to securely store your business information.

Hit ‘Add information’ to start. A Stripe popup will appear asking for email/password.

Have a Stripe account already? Use that email to reuse your business info and save time.

Follow these steps to complete Stripe’s secure onboarding:

  1. Account

    • Enter your email
    • Create a Stripe password

  2. Personal information

    • Full legal name
    • Date of birth
    • Phone number
    • Home address

  3. Business details

    • Business name and type
    • Business address
    • Industry and website

  4. Tax Information

    • SSN or EIN
    • Tax ID verification

  5. Bank Account (for payouts)

    • Account number
    • Routing number
    • Bank verification
3

Verify Email

Check your inbox for a verification email from Stripe and click the link to verify your email.

4

Confirm Stripe Dashboard Access

Once you’ve verified your email, you’ll see your business information and a “View Stripe Dashboard” button in the ‘Accept Payments’ section of the dashboard.

Your Stripe dashboard is used to manually make changes to your subscription products, prices, customers. You’ll copy keys (STRIPE_PRICE_ID and STRIPE_WEBHOOK_SECRET) from here to Create.

We’re working on automated updates from Create to your connected Stripe account when you make a request to the assistant.

For now, you’ll need to return to the Stripe dashboard to make manual changes to your products, prices, and customers when you make changes in your Create app.

​
Add Stripe to Your Project

Before you start, make sure you have:

  • A Create project where you want to add subscriptions
  • User Accounts enabled in the project

You’re going to do a few things:

  • Use our integration to add the checkout elements (functions + components) you need
  • Set up the product, price, and webhook in your Stripe account in Test Mode
  • Add keys from your Stripe account to the added functions in Create
  • Customize look & feel of the added components in Create
  • Prompt Create to add the components to the right places in your app
  • Publish your app
  • Test your app flow in the published app

Once it all looks good:

  • Repeat the Stripe set up steps in Live Mode
  • Copy new keys to Create
  • Publish again + launch your app

​
Add Stripe Integration to Create Project

1

Go to Project

2

Press / in the chat

3

Select 'Stripe - Subscriptions'

Prompt “Add Stripe - Subscriptions to this project. [other details of your subscription]”

4

Send message

Create will automatically add the integration elements to your project

5

View Project Selector

Check that the Stripe elements appear in your project selector

​
Added Stripe Elements

When you use the integration, Create adds 4 elements to your project to help build checkout flows & track user status.

This function generates stripe checkout URL for your product/subscription

  • Redirects users to Stripe’s hosted checkout page
  • Needs the STRIPE_PRICE_ID as a secret key from your Stripe account

You won’t need to modify this besides adding your STRIPE_PRICE_ID.

Learn how to get your STRIPE_PRICE_ID in the Make product, price, and get STRIPE_PRICE_ID section below.

​
Subscription Upsell

This component gives you an upsell UI that will redirect users to Stripe to checkout. Customizable as button or link. It uses the Stripe Checkout Link function to redirect to Stripe on click.

  • Customize its look and feel
  • Add to the right pages in your app
  • Redirects the user to Stripe with Stripe Checkout Link function when the user taps “subscribe”

You can style this component and add it to the right places in your app.

Prompt examples

In the component chat:

Style this upsell to look like the rest of the app: [screenshot]. Call out that Pro is $10/month and say it gives you unlimited generations.

In another page:

Use /[Subscription Upsell] in the dashboard if the user is not subscribed.

​
Stripe Webhook

This function listens for successful payments and subscription updates. It logs the user’s subscription status in your user accounts database.

  • Automatically updates user payment status
  • Manages subscription lifecycle in your database
  • Needs the STRIPE_WEBHOOK_SECRET as a secret key from your Stripe account

You won’t need to modify this besides adding your STRIPE_WEBHOOK_SECRET as a secret.

Learn how to get your STRIPE_WEBHOOK_SECRET in the Add Stripe Webhook and STRIPE_WEBHOOK_SECRET section below.

​
useIsSubscribed

Component that handles checking the signed in user’s subscription status. You can use it gate features / access for paid members.

  • Shows/hides content based on subscription status
  • Checks subscription status for current user in your users database
  • If the user isn’t subscribed, it shows the Subscription Upsell

You can use this component when describing things you only want paid users to see, and Create will include to gate content.

Prompt examples

Use /[useIsSubscribed] to only show the /[Subscription Upsell] for free users. Hide it for paid users."

If the user is subscribed, show the extra content for pro members with /[useIsSubscribed]"

​
Set up your Stripe product

You’ll make a product and price in Stripe for your subscription. You’ll copy the STRIPE_PRICE_ID from Stripe to use in your Create app.

​
Make product, price, and get STRIPE_PRICE_ID

1

Access your Stripe Dashboard

create.xyz/dashboard -> Accept Payments -> View Stripe Dashboard

2

Go to Product catalog

3

+ Create product

4

Add Product details

Name and description.

Under Pricing, select “Recurring” and add a price per month.

5

Go to the product

6

Go to the price

7

Copy the price ID from top right corner

Copy this ID. You’ll set it in your Create app as STRIPE_PRICE_ID.

8

Go to Create project

9

Select Stripe Checkout Link function

10

Go to [3 dots menu](/builder/controls#3-dot-menu) > Secrets

11

Add STRIPE_PRICE_ID as a secret

Add STRIPE_PRICE_ID as the name. Add the price ID you copied from Stripe as the value.

​
Add Stripe Webhook and get STRIPE_WEBHOOK_SECRET

1

Go to Create project

Navigate to your Create project

2

Copy the project id from the URL in the builder

3

Create webhook URL

You’ll now make a webhook URL for it in this format: <project-groupid>.created.app/api/stripe-webhook

So the final URL here is: 326163b8-7363-489e-9def-13d8717f6ce6.created.app/api/stripe-webhook

4

Access Stripe Dashboard

Go to Stripe dashboard: create.xyz/dashboard -> Accept Payments -> View Stripe Dashboard

5

Create Event Destination

Search “Create an event destination” in the search bar

6

Select Event

Search for customer.subscription.updated as the event. Check it.

7

Choose Webhook

Choose Webhook

8

Set Endpoint URL

For Endpoint URL put in your webhook URL in the format above

9

Get Secret

After it’s created hit reveal secret

10

Copy Secret

Copy the webhook secret

11

Select Stripe Webhook function in Create

Go to your Create project > Stripe Webhook function

12

Access Secrets

Go to 3 dots menu > Secrets > Add a Secret

13

Add Secret

Add STRIPE_WEBHOOK_SECRET as the name. For the value, paste in the secret you copied from Stripe.

​
Hooking up the payment flow

You now can build:

  1. How your users pay you
  2. What happens before they pay and after they pay

You can add the Subscription Upsell and useIsSubscribed components to other parts of your app the same as other components.

Press / in the chat > Components > [name]. Then describe how you want to use it.

1

Style the Subscription Upsell

Tap on the Subscription Upsell component.

Prompt Create to make it look how you want.

Before styling:

After styling with prompts:

2

Add Subscription Upsell

Add the Subscription Upsell component where you want to show users your upsell to pay.

Use / to add it in the chat.

3

Use the useIsSubscribed to gate features

Prompt Create to use this component when you want to control access to features based on the user’s subscription status.

Use / to add it in the chat.

For example, “Use /[useIsSubscribed] If the user is free, then show them the [Subscription Upsell]. If they’ve paid, then show them the paid content”

4

Publish your app

When you publish, be sure to toggle your Stripe Checkout Link function & Stripe Webhook function to on.

Do not change the function routes. They should be /api/stripe-checkout-link and /api/stripe-webhook to have your components and webhooks work.

5

Test your app

Run through your flow in your published app.

  1. Verify when you hit the button in the Subscription Upsell, you’re redirected to Stripe
  2. After paying, you should be redirected back to your app
  3. Check in your users database to see that the signed in user is marked as subscribed

You can find your Users Database for your project quickly by:

  • Tap on the Sign In page in the builder > in the panel on the left > tap database
  • You should see that the user you signed in with is marked as “active” in the subscription status column
  1. After the user is subscribed, make sure the right content is shown to them.

If you’re not seeing the right content shown to free vs. paid users, use the useIsSubscribed component.

You can use a real card to test the flow. If needed, you can refund the payment from your Stripe dashboard.

Was this page helpful?

Suggest edits
UploadsPublish