# Pricing in card view with details

Using this block, you can display the different pricing options of your product or service. You can also link each option to a corresponding checkout page (internal or external), which we'll discuss a bit later.

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2F6dplybAdQ4W7lzF8TsMv%2Fpricing-b.png?alt=media&#x26;token=1b41635d-23e9-4b2b-a2b5-e757f1f6d3a7" alt=""><figcaption><p>Pricing in card view with details</p></figcaption></figure>

Let's review the block settings, which are located under the **Features** tab.

### Title and Subtitle

Here, you can customize the **Title** and **Subtitle** of the block.

### Multiple billing cycles

You can enable this option if, for instance, you want to show different prices for **yearly** and **monthly** billing. Under **Cycle description**, you can add a custom text for your Yearly option.

### Pricing Tiers

Here, you add the details for each of your pricing tiers (Title, Yearly and Monthly prices, Features, etc.).

### Button

Each tier has a button that can be used to take the users to the checkout page. If you're using a payment service other than Stripe, you can use the **Redirect to url** option under **Add action** to take the users to your external checkout page.

To use the Stripe Checkout option, your first need to [connect your Stripe account ](https://softr.gitbook.io/softr-documentation/integrations/stripe)to your Softr app.&#x20;

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FUi8tFfaS0tNZCoTa0vlg%2Fbutton-action-b.png?alt=media&#x26;token=cd19f415-a615-46fb-bf7f-11c5bb0f57d2" alt=""><figcaption><p>Button action options</p></figcaption></figure>

**So, let's select the Stripe Checkout option and start configuring the checkout settings.**

### Recurring payments

Enable this if you want to charge your customers periodically based on a specific schedule (e.g. for a monthly subscription). When configuring a product on Stripe, you have the option to set it as **One time** or **Recurring**.

![Choosing a product type on Stripe](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FuNUkoUyWuRgmNTs4ohuT%2Frecurring-b.png?alt=media\&token=c16a981c-6dfd-4a12-9d1c-dd9b1c401f25)

### Allow promotion codes

Here, you need to choose if you're going to accept [promotion codes](https://stripe.com/docs/billing/subscriptions/coupons/codes) on your Stripe checkout.

### Enable automatic tax

You can select to apply automatic taxes on checkout, which needs to be configured on Stripe.&#x20;

#### Adding the Tax feature on Stripe

First of all, if you don't have the Tax feature enabled on Stripe, you can add it from the Features and Products list as shown below.

![Adding the Tax feature](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FmzNL63MyHPJL6Cnn47oa%2Fadding-tax-b.png?alt=media\&token=adc0c257-e755-45fa-953e-be8286825d3c)

Now, the Tax settings will become available from your Stripe settings.

![Tax settings](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FfyeXvpzWDoCiBEVL549Z%2Ftax-settings-b.png?alt=media\&token=25fe56c3-5acd-44ad-9965-38fe0eb79dd4)

#### Configuring tax settings

Further on, you need to configure your tax settings, setting up **Default product tax category**, **Tax registration locations**, and others.

![Tax settings](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2Fd3VnfwGQZvu7Hjb8Lq7z%2Ftax-settings-config-b.png?alt=media\&token=b5f486ed-e469-4d5d-9f04-b10638e1b6d7)

#### Testing taxes

That's it. Now when you create a new product (or edit an existing one) on Stripe, taxes will be applied automatically for your selected locations based on the **Product tax category**.

![Creating a product](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FucUyNJWg7QEn6neRelhf%2Ftax-application-b.png?alt=media\&token=106a19e0-93ca-491b-8646-c04eb4ab6cbb)

Let's also see what this looks like from the perspective of your Softr app users.

![User checkout](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FG5aYQ4VUpX3MXEGpiAnC%2FScreen%20Recording%202022-05-27%20at%2016.59.23.gif?alt=media\&token=d2786211-b990-49c0-a18b-0e039dfbfbe9)

### Plan IDs and Success/Cancel URL

Now you just need to configure each plan corresponding to your Stripe products. If you have multiple billing cycles, you need to configure "**Monthly Plan"** & "**Yearly Plan"** fields in Softr. In case of a single billing cycle, you will configure only one **"Plan"** field.

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2F75eEVzlIdSskT8KTcjgp%2Fplan-ids-b.png?alt=media&#x26;token=af603549-3f7b-4585-8531-c357d6c143d4" alt=""><figcaption><p>Plan IDs and Success/Cancel URLs</p></figcaption></figure>

You can find the **Monthly/Yearly Plan ID** by navigating to your [Stripe Dashboard](https://dashboard.stripe.com/). On the dashboard, open **Products Menu**, select a specific product, and choose the corresponding Plan ID from the Pricing plans list. In case your Products list or Pricing list is empty, please make sure to follow the [Stripe documentation](https://stripe.com/docs/billing/subscriptions/set-up-subscription#without-code) to create Products & Plans first.

And finally, you need to fill out **"Success Url"** and **"Error Url"** fields, which show correspondingly where will customers be redirected upon completion (or cancellation/error scenario) of the checkout process.

{% hint style="warning" %}
The **"Success Url"** and **"Error Url"** fields are mandatory and Stripe checkout won't work if they are empty or don't start with either http\:// or https\://.
{% endhint %}
