Checkout Screen

Overview

The checkout screen refers to the final step of the purchasing process where customers review their selected items, enter their payment information, and complete the transaction.

This screen provides a smooth and user-friendly experience for customers, ensuring a seamless transition from product selection to the final purchase. It aims to facilitate secure and efficient transactions while accommodating various payment options.

Checkout Flow

The checkout flow begins when users select a paywall content (Organization, Channel, Post or Live Stream), represented by a lock icon. A paywall content refers to content that is accessible only to users who have paid for access. When content is behind a paywall, users encounter a barrier that restricts their access to the content until they complete a payment or subscription process.

Step 1 - Selecting a Product and a Product Price

The first step of the checkout flow is the Product screen. This screen displays all the products and their respective prices associated with the paywall content.

• Select Item: highlighted in the breadcrumb, using the Channel's primary color;
• Payment: next step of the flow;
• Product image;
• Product name;
• Product description;
• Prices and their respective recurrences;
• Select button: disabled until one price is selected, then uses the Channel's primary color.

Step 2 - Payment

The last step of the checkout flow. The elements on this screen will depend on the user's location.

Brazil

Billing Information

• Full name: must match the name in your CPF (Brazilian ID), a required field;
• CPF/CNPJ number: required field;
• CPF/CNPJ selection: required field, CPF is selected by default;
• Phone number: required field;
• Zip code: required field;
• Address 1: required field;
• Street Number: required field;
• Address 2: optional field;
• Neighborhood: required field;
• City: required field;
• State: required field.

Payment Method

By default, the following payment methods are available, however this feature can be customized by each Organization.

• Credit Card;
• Bank Slip;
• Pix.

Order Details

• Product Image;
• Product Name;
• Product Description;
• Subtotal;
• Total;
• Place Order button: disabled until all required fields are filled out. Uses the Channel's primary color.

Promo Code

Depending on the product price selected, an additional field "Promo Code" will be displayed.

• Promo code text field;
• Apply button: disabled until text is entered, then uses the Channel's primary color.

All other countries

Billing Information

• Full name: required field;
• Phone number: required field.

Payment Method

• Credit Card.

Order Details

• Product Image;
• Product Name;
• Product Description;
• Subtotal;
• Total;
• Place Order button: disabled until all required fields are filled out. Uses the Channel's primary color.

Promo Code

Depending on the product price selected, an additional field "Promo Code" will be displayed.

• Promo code text field;
• Apply button: disabled until text is entered, then uses the Channel's primary color.

Payment Confirmation

The paywall content can now be accessed by the user.