# Purchase Screen

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FRzswM3ILBwRUTSN54qrg%2Fpurchasescreen.png?alt=media&#x26;token=e5d47392-54c1-4b02-86af-af59593543bd" alt=""><figcaption></figcaption></figure>

This screen is where your users will complete the purchase process for the offering they would like. It contains a Stripe component, which is found in the Component Marketplace.

{% hint style="info" %}
You will need a Stripe account to utilize the Stripe Component
{% endhint %}

## The Components

### **Text Component — 2 Components**

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FyKv0sIlXVVuEAed7RpsM%2Ftextcomponentsgreen.png?alt=media&#x26;token=2a80618e-5cf5-41c1-b733-72a0b82eb7cb" alt="" width="449"><figcaption></figcaption></figure>

The “Label” text component uses a custom formula — the class price + the service fee ($3.13, in this case). If you do not want to charge a service fee, remove the custom formula and select the Current Class > Price in the text box.

A similar calculation with a custom formula is done in the Text component that displays the total transaction cost.

### Stripe Component — Stripe Payment

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F0IyC7rmIGZ6fKXdiNQZP%2Fstripe.png?alt=media&#x26;token=e49c7cd1-6989-49af-b9f6-a0ee42ebe3ea" alt="" width="563"><figcaption></figcaption></figure>

Follow the instructions in this help doc to set up your Stripe component. Here, you can control the amount paid, the charge description, the receipt email, and the actions that happen after a successful payment.

⚡ **Submit Button Actions**

Each action happens in the order they are listed on the screen. These actions will only occur if the payment is successful.

1. A Create Action to create a record in the Transaction Collection. A mix of Text and Magic Text fills in the associated Transaction Properties.
2. An Update Action to update the Class record and subtract an available spot.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FEQe3j4gELvQh8JYYLkuJ%2Fcustomformula.png?alt=media&#x26;token=405b53ec-8f3b-413a-93e0-915e93c49e3e" alt=""><figcaption></figcaption></figure>

3. A Link Action to the ‘Congrats’ Screen.

## Tips & Tricks

You can test the purchase flow without setting up the Stripe Component utilizing this section:

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F1S4gvdLtwVIZUfnCAbpl%2Fteststripe.png?alt=media&#x26;token=c43b5f4a-6b1f-4d56-b990-0b648df3c589" alt="" width="563"><figcaption></figcaption></figure>

The ‘DEMO “PAY”’ button is set up with the same settings and actions as the Stripe Component; however, no real purchase will have been made. To collect money for your classes, ensure your Stripe Component is set up.

Once you are finished testing with the ‘DEMO “PAY”’ button, delete the button & the gray help text for your published app.
