# Stripe Subscription

*Skill Level: Intermediate*

## Before You Begin

* Ensure you have created a [Stripe](https://stripe.com) account, added your business information and bank account information, and completed any required verification.
* ***Users must be Logged in*** for the Subscription Component to work correctly.&#x20;

## Walkthrough

### Stripe Subscription

&#x20;![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F3ZzFjst0Ig5gqQEza8PW%2FScreen%20Shot%202022-08-25%20at%2012.47.58%20PM.png?alt=media\&token=c9bf6a91-e2ac-46a5-9a73-88a2507afd83)

#### Set up your Product in Stripe

1. Go to [Stripe Dashboard | Products](https://dashboard.stripe.com/subscriptions/products)
2. Click <img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FR2lOb33ZYtHFobSmkrO1%2FScreen%20Shot%202022-08-02%20at%2012.14.31%20PM.png?alt=media&#x26;token=ae233c8e-8287-49ab-a490-04061acd3b3c" alt="" data-size="line"> to create a new product
3. Enter Product information

   <figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FOLYMGYKOH8RsZ5NeKMpo%2FAdd%20Product%20Stripe.png?alt=media&#x26;token=b4569e9d-1a7c-43be-af72-553f5dc335c7" alt=""><figcaption></figcaption></figure>
4. When complete select<img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FZ7nCJw9aa9xlqt79DyDW%2FScreen%20Shot%202022-08-02%20at%2012.24.06%20PM.png?alt=media&#x26;token=188ab6d3-5ad5-480f-8c4e-910ca0251c78" alt="" data-size="line">

#### Add the Stripe Subscription Subscription Component to your App

1\) Click the "+" button to open the Add Panel

2\) Scroll down to *Installed*

3\) Drag the Stripe Subscription Component onto your checkout screen

#### Configure your Subscription Payments Component

1. Click the Connect with Stripe button to connect your Stripe account
2. In Stripe Subscription Section:
   1. Copy your Price Plan ID (price\_stringI&#x44;*)* from Stripe to Adalo and input in the Stripe component that says price\_id
      1. Go to [Stripe Dashboard | Products](https://dashboard.stripe.com/subscriptions/products)
      2. Select your Product
      3. Copy the ID and then paste it into Adalo
         1. PriceID will look something like: *price\_1IHCB8FAwoyiOM0lgJc2v4ec*
3. In Email Field section:
   1. You **must** specify the email address of the User that should receive email confirmation of the purchase. This is also how you will identify the customer in your [Stripe Dashboard](https://dashboard.stripe.com/) and is how the Component will know there is an active subscription.
4. Test Mode:
   1. [Configure Test Mode](https://app.gitbook.com/o/-Lha7TPH_T7jnvspjvYs/s/-LhGHkPsv15svPIU5I7C/~/changes/Xl1LOeoZLwaoJdDTMUQY/component-basics/marketplace-components/stripe/adding-payments-using-stripe-1) to use this Feature.

#### Using the Subscription Component

1. When a subscription is created successfully, the User will get a Confirmation.![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2Fo9VXPaKJOrgosnR1sK2K%2FScreen%20Shot%202022-08-25%20at%2012.50.15%20PM.png?alt=media\&token=e1924ffe-251b-4d0c-aea9-114a6a087736)
2. Upon returning to the Screen with the Subscription Component, the Component will verify the Logged in User's email and show an Active Subscription if applicable.![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FzevB7Qoh9QhRXuacQPJy%2FScreen%20Shot%202022-08-25%20at%2012.50.24%20PM.png?alt=media\&token=aa2f23b5-e750-47bd-b7c3-e63470b190df)
3. The User will have an option for ***Subscription Settings*** where they can Update Subscription or Cancel Subscription if an Active Subscription is located based on the Logged in User Email. ![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FPIubmBt6t49mLX7qrArd%2FScreen%20Shot%202022-08-25%20at%2012.50.32%20PM.png?alt=media\&token=fde53b18-7546-4c78-b1c4-884d4e0fa4f5)
4. The User can Unsubscribe and will receive confirmation.![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F1maAhy7G6cTVqxx5y0v1%2FScreen%20Shot%202022-08-25%20at%2012.50.50%20PM.png?alt=media\&token=92488da7-f221-4a8d-a6e7-59c59441724d)

{% hint style="warning" %}
*Please Note:* There is no option to receive User Subscription data or validating Active Subscriptions from Stripe using the Component. This must be done with a [Custom Action](https://help.adalo.com/~/changes/u7hGXGFGahgZx26fqIxT/integrations/custom-actions) using the [Stripe | API Documentation](https://stripe.com/docs/api)
{% endhint %}

### Test Mode

1. Toggle on *Test Mode* in component
2. Enter your Stripe Test Secret Key and Test Publishable Key into Subscription  component.
   * [Stripe | API Keys Documentation](https://stripe.com/docs/keys) can walk you through setting this up in your Stripe Account
3. Set up Test Product in Stripe
   1. Go to [Stripe Dashboard | Product](https://dashboard.stripe.com/subscriptions/products)
   2. Enable Test Mode in top right hand corner of Dashboard![](https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FxLDwhKbmQYaJ86ovJBQJ%2FScreen%20Shot%202022-08-25%20at%202.14.36%20PM.png?alt=media\&token=fdaabcd0-4dc1-49ea-9b70-d2fddf7d94cc)
   3. Click <img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FR2lOb33ZYtHFobSmkrO1%2FScreen%20Shot%202022-08-02%20at%2012.14.31%20PM.png?alt=media&#x26;token=ae233c8e-8287-49ab-a490-04061acd3b3c" alt="" data-size="line"> to create a new product
   4. Enter Product information

      <figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FOLYMGYKOH8RsZ5NeKMpo%2FAdd%20Product%20Stripe.png?alt=media&#x26;token=b4569e9d-1a7c-43be-af72-553f5dc335c7" alt=""><figcaption></figcaption></figure>
   5. When complete select<img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FZ7nCJw9aa9xlqt79DyDW%2FScreen%20Shot%202022-08-02%20at%2012.24.06%20PM.png?alt=media&#x26;token=188ab6d3-5ad5-480f-8c4e-910ca0251c78" alt="" data-size="line">
   6. Update *Price\_ID* in Subscription component.
   7. Open Previewer and complete payment flow as normal.
   8. Select appropriate [Stripe | Test Mode Card](https://stripe.com/docs/testing#cards) for the scenario you want to test.&#x20;
   9. Enter card info and select 'Pay Now'

{% hint style="info" %}
Products created in Test Mode can be copied to Live mode but will have a different price\_ID
{% endhint %}

### Testing Successful

When you have finished testing your Subscription component and want to go live you will have to disable the Test mode and make sure you change the Price ID to a Live product.

## Help

If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well!
