> ## Documentation Index
> Fetch the complete documentation index at: https://docs.softr.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Simple Checkout Form

> A Stripe checkout form to allow your users make purchases.

<Frame caption="Simple Checkout Form">
  <img src="https://mintcdn.com/softr-2b8a27e1/UK9rAhLsda5WuJiB/integrations/images/simple-checkout-form/image1.png?fit=max&auto=format&n=UK9rAhLsda5WuJiB&q=85&s=baa3e0d41e88868120365662d968c8c0" alt="Simple Checkout Form" width="864" height="1168" data-path="integrations/images/simple-checkout-form/image1.png" />
</Frame>

Using this block, you can set up paid membership and charge your users for accessing certain sections (pages or blocks) of your Softr app. Prior to setting up this block, you need to [connect Stripe](/integrations/etS18kJqm1fuD58KCsjC3z/stripe-checkout/iBomMEucRZtM2y6HuutYVC) to be able to offer Stripe products (one-time products or subscriptions) to your users. So, let's go ahead and examine the block settings.

## Title and images

<Frame caption="Logo, Title, and Background Image">
  <img src="https://mintcdn.com/softr-2b8a27e1/UK9rAhLsda5WuJiB/integrations/images/simple-checkout-form/image2.png?fit=max&auto=format&n=UK9rAhLsda5WuJiB&q=85&s=df19cf029d09d4cc07fc26da8276893d" alt="Logo, Title, and Background Image" width="946" height="1286" data-path="integrations/images/simple-checkout-form/image2.png" />
</Frame>

To start with, you can add a custom title, logo, and a background image in the **Feature** tab of block settings.

## Product Setup

Next, you need to set up the product that you want to offer to your users.

<Frame caption="Product parameters">
  <img src="https://mintcdn.com/softr-2b8a27e1/UK9rAhLsda5WuJiB/integrations/images/simple-checkout-form/image3.png?fit=max&auto=format&n=UK9rAhLsda5WuJiB&q=85&s=f947eec4dfc2be8776b2dee035339941" alt="Product parameters" width="968" height="1496" data-path="integrations/images/simple-checkout-form/image3.png" />
</Frame>

The **Product** dropdown is a list with all your Stripe products. First you need to select a certain product, then fill out the rest of the product fields (**Name, Trial, Price, Interval, Description**) as you wish them to be shown on your checkout page. In the example shown below, we've chosen the **Maker (Website Builder)** product, and set the other fields to their corresponding values.

<Frame caption="Product selection">
  <img src="https://mintcdn.com/softr-2b8a27e1/UK9rAhLsda5WuJiB/integrations/images/simple-checkout-form/image4.png?fit=max&auto=format&n=UK9rAhLsda5WuJiB&q=85&s=1a7c1ba5bc6d3990000966e903a057be" alt="Product selection" width="956" height="1378" data-path="integrations/images/simple-checkout-form/image4.png" />
</Frame>

Below, you can see how it looks on the actual checkout form.

<Frame caption="Published checkout form">
  <img src="https://mintcdn.com/softr-2b8a27e1/UK9rAhLsda5WuJiB/integrations/images/simple-checkout-form/image5.png?fit=max&auto=format&n=UK9rAhLsda5WuJiB&q=85&s=5659f65afda7ade1abd60f85c640027a" alt="Published checkout form" width="1154" height="1470" data-path="integrations/images/simple-checkout-form/image5.png" />
</Frame>

### Payment details

Here, you can customize the placeholder text for the name and email fields.

### Discount code

<Frame caption="Discount Code section">
  <img src="https://mintcdn.com/softr-2b8a27e1/UK9rAhLsda5WuJiB/integrations/images/simple-checkout-form/image6.png?fit=max&auto=format&n=UK9rAhLsda5WuJiB&q=85&s=2b3aace8b38bfaa80de726768f7cafff" alt="Discount Code section" width="928" height="786" data-path="integrations/images/simple-checkout-form/image6.png" />
</Frame>

Here you can choose to show a discount code field. If it's enabled, you can modify the text for the discount button and coupon input field. **The form will accept** **[coupons](https://stripe.com/docs/billing/subscriptions/coupons)** **defined for the selected Stripe product.**

<Frame caption="Applying a discount code">
  <img src="https://mintcdn.com/softr-2b8a27e1/DJS8L7o0khZLiLBC/integrations/images/simple-checkout-form/image7.gif?s=072add664d6e7b9ba179266705544c1c" alt="Applying a discount code" width="2876" height="1424" data-path="integrations/images/simple-checkout-form/image7.gif" />
</Frame>

### Button

<Frame caption="Button settings">
  <img src="https://mintcdn.com/softr-2b8a27e1/DJS8L7o0khZLiLBC/integrations/images/simple-checkout-form/image8.png?fit=max&auto=format&n=DJS8L7o0khZLiLBC&q=85&s=dd583e35b9e05448a0faa9c0e5049192" alt="Button settings" width="926" height="656" data-path="integrations/images/simple-checkout-form/image8.png" />
</Frame>

Here, you can modify the **Text** of the payment submissions button. The **Action** of the button is predefined.

### On checkout

<Frame caption="On checkout">
  <img src="https://mintcdn.com/softr-2b8a27e1/DJS8L7o0khZLiLBC/integrations/images/simple-checkout-form/image9.png?fit=max&auto=format&n=DJS8L7o0khZLiLBC&q=85&s=b135f548b5ae29784f17cebdb0aefe5f" alt="On checkout" width="934" height="936" data-path="integrations/images/simple-checkout-form/image9.png" />
</Frame>

Lastly, you can choose to which page the user is taken after making the payment.

That's it. As soon as you have provided a checkout for a specific product, you can go ahead and define access conditions (for a [block](/user-groups-and-permissions/3oA6AaFzUiePs2sW2TpYrF/block-visibility/3spA2dfQNrcGcPNmnDXHB3) or a [page](/user-groups-and-permissions/3oA6AaFzUiePs2sW2TpYrF/page-visibility/nWJaN689VKA1TUeaEfzK9u)) for users who have paid for the product.
