# Simple Billing Block

Using this block, you can enable your users to manage their subscriptions and purchases on your Softr app. So, let's see what the steps are involved in the setup.

## Integrating Stripe

The block is supposed to work with Stripe and get all the purchase and subscription info from there, so, first of all, you need to [integrate a Stripe checkout ](https://softr.gitbook.io/softr-documentation/integrations/stripe)with your Softr app.

{% hint style="success" %}
In our example we are going to use the **Pricing** block along with **Stripe Checkout** integration. However, you can also use the [Simple Checkout Form](https://softr.gitbook.io/softr-documentation/building-blocks/payment/user-checkout) instead (with our without the Pricing block). All the subscription and purchase info of your users processed through the **Simple Checkout Form** will be available via the **Simple Billing Form**.
{% endhint %}

## Setting up a Pricing Block

As soon as you're done with Stripe integration, you can proceed with setting up a [Pricing](https://softr.gitbook.io/softr-documentation/building-blocks/pricing/pricing-in-card-view-with-details) block, where you offer your Stripe products/subscriptions to your users.&#x20;

Below, you can see a product that we've set up on Stripe (available in the **Products** section of your Stripe dashboard).

![A product page on Stripe](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FJw2nEJco7ezptHTNATdj%2Fstripe-produ-ids-b.png?alt=media\&token=3e9bfa2d-ac2b-42f1-99af-0d59bee1e827)

Now, we are going to add this product on our Pricing block in Softr. Below, you can see how it's configured.

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FO5zrWUtH2weiIvLR3V59%2FScreen%20Recording%202022-09-01%20at%2015.55.44.gif?alt=media&#x26;token=21c4f736-b562-4a37-ad37-c9ba2d203dbc" alt=""><figcaption><p>Product added in Pricing block</p></figcaption></figure>

As you can see, we've set the **Button** action to **Stripe checkout** and enabled **Recurring payments**, as the product we've added is a subscription. Moreover, we've copied the **Monthly** and **Yearly** price IDs from the product page on Stripe as well as added **Success** and **Cancel** URLs, which are mandatory. You can find more info on configuring the Pricing block [here](https://softr.gitbook.io/softr-documentation/integrations/stripe#3.-add-checkout-details-to-your-application).

Other subscription plans or products on your Pricing block can be configured the same way. You might also need to provide your users with coupon codes. So, let's review that part as well.

### Adding Coupon Codes

Coupons can be created under **Products => Coupons**. Further on, you need to add a **Promotional Code** for your coupon, and the **Name** of your **Promotional Code** is what you should give to your users to use on checkout. Below you can see how that's set up.

![Setting up a Coupon and Promotional Code](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FSaEMgQot8qUCw7jg7ZPu%2Fpromotion-code-b.png?alt=media\&token=f9aa7855-69c6-45df-9c4c-d7f56d8987e7)

We'll use this code ("test1234") later on in this guide when demonstrating the checkout and billing management process from your users' standpoint.

So, now, let's proceed to setting up the **Simple Billing Form**.

## Configuring the Simple Billing Form Block

We are just going to add the **Simple Billing Form** block on a separate page and configure it. Let's quickly go through the block settings.

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FDUxgAGAvYSffAnKjFzfJ%2FScreen%20Recording%202022-09-01%20at%2016.46.49.gif?alt=media&#x26;token=1de778dd-8294-4713-82da-aead6186c61b" alt=""><figcaption><p>Simple Billing Form overview</p></figcaption></figure>

Above you can see an overview of the block configuration. Now, let's go through each setting in detail.

First, we can customize the block **Title** and set a **Background image**. Next we need to set the page that the user is going to be taken to if he/she wants to change the subscription plan (**Change plan**). In our case, it's the page with the **Pricing** block, which we configured above.&#x20;

### Invoices

Next up we have the **Invoices** toggle, which allows the users to view all their invoices (fetched from Stripe).&#x20;

### Cancel Subscription

We can also allow the users to cancel their subscriptions at any time. If we enable this option, a number of other fields appear below, where we can customize the section's title and descriptions as well as what appears on the confirmation pop-up.

Now that we've reviewed the configs from the site owner's perspective, let's see how everything looks from the site users' standpoint.

## Billing Management from the User's Perspective

Below you can see how the user purchases a subscription through the **Pricing** block and is later on able to view his/her subscription along with additional info (e.g. Invoices) using the Simple Billing block as well as cancel the subscription. The user also applies a promotional code during checkout.

{% hint style="info" %}
In our example, we've used a subscription-type product from Stripe, but one-off purchase products can be set up in a similar manner.
{% endhint %}

![Checkout and billing management](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2Fy6jrwHWkaqfnixbRzfUJ%2FScreen%20Recording%202022-03-21%20at%2014.29.47.gif?alt=media\&token=f435c0ed-f215-4547-8dd5-86a335b034f6)

As you can see, after completing the checkout, the user is automatically taken to the page with the **Simple Billing Form**, where he/she can manage his/her details.
