Use this page to review Pelcro's default UI flow and compare it with custom UI implementations from client projects.

Browse the default flow from product selection through the customer dashboard.
Review custom implementations for paywalls, checkout steps, account pages, dashboards, and payment updates.

Default UI

Product Selection

This is the first step in the default flow, where customers choose the product or offer they want to purchase.

Learn how to configure the paywall and its elements—such as the title, subtitle, and button text—here: paywalls documentation.

Plan Selection

After choosing a product, customers move to plan selection to review the billing options available for that product.

Registration and Login

Customers create an account or sign in at this step before continuing to checkout.

To configure social login options and other identity providers, please refer to the documentation provided here: social logins documentation.

Note:
You can add extra fields to the registration form, such as first and last name, by enabling enableNameFieldsInRegister in your UI settings.
See the React Elements Usage Documentation for more details.

Address Selection

If the purchase requires address details, customers enter them here before payment.

Checkout and Payment

Customers complete the purchase in this step by reviewing the checkout details and submitting payment.

Note:
For added flexibility, you can include a legal consent checkbox in the checkout modal and configure it in the React Elements UI settings.

Customer Dashboard

After or pre-purchase, your customers can use the dashboard to manage their account, subscriptions, and payment details.

Note:
Subscription management and cancellation behavior can be configured from the platform.
You can set up cancellation reasons, refund behavior, and immediate cancellation—refer to the Subscription Documentation for further details.