Designing the Embedded Checkout

Learn about designing the embeded checkout

Once your embeded checkout form is created, you can customize the payment form and the successful payment page displayed to users.

Payment Page Settings

This section includes settings such as the sales package to be offered and the payment methods to be used.

Package Settings

Select the package you want to offer for sale.

Payment Settings

Define the payment options to be used. After activating your preferred payment methods under your project, you need to add them to the form.

If you're using Apple Pay or Google Pay, your checkout link domain must be added and verified. Otherwise, even if the buttons are included in the form, they may not appear when published.

For detailed information, please refer to the following guide:

Payment Methods Configuration

Registration Settings

Specify the type of registration data to be collected from the user. Two additional features are available for this setting:

• Hide E-mail / Phone Number Input if Already Set If this is enabled, and the user information (email or phone number) is already passed to Zotlo when the form is opened, the relevant input will be hidden.

• Allow Mail When enabled, users can edit the email or phone number field directly within the form.

These two features work in conjunction with the Register by Pass scenario.

Register by Pass

If your own application already collects a unique user identifier (e.g., email, phone number, or a UUID v4), you can send this information to Zotlo to skip the registration step.

To bypass the registration step in Zotlo, append the user information as the subscriberId parameter in the checkout link URL.

Example: If your checkout link is hosted on premium.example.com, redirect the user to:

• [email protected]

• or premium.example.com?subscriberId=12124567890

If you send a UUID in v4 format, the email field will still be displayed as required. This is necessary for Zotlo’s end-user subscription management processes.

Mailing Settings

Mailing Settings Configure whether a confirmation email will be sent to the user after purchase.

Theme Settings

This section allows you to configure the visual appearance of the form. It is especially useful when multiple payment methods are available, as themes determine how these options are presented to users. If you select Theme 3, you’ll have access to additional customization options:

• Show Header: Displays the project name and icon at the top of the form—improves brand visibility.

• Show Image: Add a image element to highlight your product or service on the payment screen.

• Show Package Name: Show the package name on the form. If it’s a subscription, the billing period will be shown (e.g., “Monthly Subscription”).

• Show Subtotal Text: Displays the subtotal price of the selected package.

• Show Bonus/Discount Text: Adds a customizable text and value below the subtotal, simulating a bonus or discount.

  • Discount Rate: If you want to simulate a discount, you can set a percentage. The displayed price will be increased, and the extra amount shown as a “Discount.”

Note: Users will still only pay the original package price shown in the Total field. This is a visual-only discount.

Form Design Settings

Customize the layout and visual structure of the form, including spacing, alignment, and component positioning.You can configure field spacing, padding, element alignment, and ensure dark mode support for payment buttons.

Labels Settings

Control the visibility and styling of form field labels.

Consent Settings

Manage the appearance of consent fields required for legal compliance (e.g., distance sales agreement , information form)

Total Price Settings

Customize the appearance of the Total Amount field shown to the user. Use font size, color, and layout options to ensure pricing clarity.

Button Design Settings

Configure the appearance of action buttons (e.g., "Buy Now", "Start Subscription"). Customize colors, sizes, shapes, and hover effects.

Note: These settings do not affect third-party buttons like Apple Pay, Google Pay, or PayPal due to their brand guidelines.

Button Text Settings

Set the text displayed on the purchase button. Zotlo supports dynamic messages based on user status. For example:

• Trial Activation State: If the user is purchasing a subscription package with a trial price, the text you selected for this situation will appear.

• You can also specify different texts for other situations to convey the most appropriate message to the user.

Footer Settings

Control the appearance of footer elements such as legal disclaimers, privacy policy links, and terms of use. This section helps ensure transparency and regulatory compliance.

After Payment Page Settings

Zotlo allows you to fully control the user experience after a successful payment. You can either display a hosted success page provided by Zotlo or redirect users to a custom URL of your choice.

Successful Payment Page Display

If you choose to display a hosted success page via Zotlo, the first step is to select a theme for the page. Zotlo offers multiple themes optimized for different post-payment use cases.

App-to-Web Theme

This theme is ideal for users redirected from a mobile app to the web and then back to the app after completing payment. It provides a seamless transition for mobile games or apps conducting in-app purchases through the web.

• Deeplink Redirection : This theme requires you to enter a deeplink, which is used to redirect users based on their device (iOS, Android, etc.). After the payment, the customer is automatically redirected back to the appropriate in-app content.

• Auto-Redirect Setting: If enabled, users will be redirected to the specified deeplink automatically after a set time, even if they do not click the button manually.

Additional Customization Options (for App-to-Web Theme)

When using the App-to-Web theme, you can customize both the visual and textual elements to match your brand:

• Button Text: Customize the text displayed on the redirect button. You can use dynamic labels based on user status, such as "Return to App" or "Back to Game" for general redirection, or specific messaging for trial activation.

• Visual Settings: Adjust text and button colors (default and hover states), border color, thickness, and border radius.

The general design options (e.g., background color, border styling) for the success page work the same as the main checkout form design settings, ensuring a consistent brand experience throughout the payment flow.

Web-to-App Theme

This theme is suited for users who begin their journey on the web and are redirected to a mobile app or another webpage after payment. It helps maximize conversions from web-based marketing campaigns by smoothly guiding users to your product or app.

• App Store Links Requirement : In this theme, you are required to enter app store download links. Based on the links provided in the Zotlo panel, users will see buttons for the appropriate app stores (e.g., App Store, Google Play) on the success page.

• Generic Link Option: If you want to add a single redirection URL (e.g., to a landing page or website), you can use the Generic Link field to configure a general redirect button.

Like the App-to-Web theme, you can customize the visual style of the button and text, including hover effects, border radius, and color settings.

Custom Redirection After Payment

Instead of using Zotlo’s hosted success page, you may choose to redirect users to a custom URL once the payment is completed. This is ideal if you want to use your own thank-you page, redirect users in-app, or apply specific marketing flows.

You can add a deeplink via the panel for user redirection or specify a return_url during the Checkout SDK configuration. The priority order for redirection in these cases is as follows:

1. Checkout SDK Return URL (Highest Priority): When embedding the checkout form on your website using the Checkout SDK, you can set a return_url parameter during configuration. If this return_url is provided, users will be redirected directly to this URL after completing the payment.

2. Redirection to Deeplinks Defined in the Panel: If no return_url is specified in the SDK configuration, Zotlo will use the deeplinks set in your Project Settings on the Zotlo panel. In this scenario, users are redirected automatically based on their operating system (iOS, Android, etc.).

3. Redirect Back to the Referrer URL: If both the return_url parameter in the SDK and the panel’s redirection settings are empty, users will be redirected back to the page from which they initiated the payment (the referrer URL). This serves as the default fallback redirection.