Payments

Set up subscription payments for your app with Stripe

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.

Stripe Checkout Link

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

   

   Example URL: https://www.create.xyz/build/326163b8-7363-489e-9def-13d8717f6ce6?view=9b95002f-0f1c-4c60-bf98-18a61e7a52cb&select=9b95002f-0f1c-4c60-bf98-18a61e7a52cb

   The project ID is between /build/ and the ?: 326163b8-7363-489e-9def-13d8717f6ce6

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

   

   4. 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.