Portal FeaturesCustomized Checkout Page on iPOSpays

Customized Checkout Page & Payment Links on iPOSpays

The Customized Checkout Page & Payment Links feature on iPOSpays allows merchants to design and personalize their payment experience directly within the iPOSpays Portal. This enhancement empowers merchants to align their checkout pages with their brand identity, add custom fields, and create a professional, seamless, and engaging payment journey for their customers.

Watch the video for a visual walkthrough of how you can customize your checkout page

Feature Compatibility

  • Minimum Required POS Build: Not Applicable

  • Supported Payment Pages: Send Payment Link, Hosted Payment Page (HPP), Generic Hosted Payment Page (GHPP)

  • Supported Terminals: POS, CloudPOS, iPOSgo!

  • Supported Processors: Not Applicable

  • Supported Fee Types: Not Applicable

Key Features

  • Customizable Templates: Personalize checkout pages with your brand colors, fonts, button labels, and logos.

  • Advanced Custom Fields: Add up to five custom tags to capture additional data, configurable as optional or mandatory.

  • After Payment Message: Display a personalized confirmation message (e.g., “Thank you for your payment!”) after each successful transaction.

  • Multi-Store Assignment: Assign and manage different templates for multiple stores, ensuring consistent branding across locations.

  • Real-Time Preview: Instantly view and edit design changes before saving, ensuring the checkout page looks exactly as intended.

How to Customize the Checkout Page

The Customized Checkout Page & Payment Links feature in iPOSpays allows merchants to design branded payment pages and links. You can modify colors, fonts, button labels, and confirmation messages to match your brand identity and enhance your customers’ payment experience.

Step 1: Log In to Your Merchant Account

Log in to your iPOSpays Merchant Portal using your merchant credentials.

Step 2: Access Checkout Customization Settings

  1. Go to Settings → Customize Checkout Page & Send Payment Link.

  2. Click Add Template to create a new checkout page design.

Step 3: Customize the Payment Page

After clicking the Add Template button, you’ll enter the customization module, where you can personalize the look and feel of your checkout interface.

Live Preview

  • The right panel displays a real-time preview of your checkout page.

  • You can see all color, font, and text updates instantly.

  • In the preview top right corner, you can switch between Desktop:

  • And Mobile views to verify how the page appears across devices.
  • Some UI elements are interactive, allowing you to test how customers will experience the page.

Customize Colors

Under Customize Colors, you have three color options to customize the checkout page.

  1. Brand

  2. Accent

  3. Secondary

  • Brand

Defines your primary color, applied across key UI elements that reflect your brand identity.

You can click on the brand color tile to:

— Choose a shade using the color picker or slider,

(or)

— Enter exact RGB, HSL, or HEX codes for precise color matching.

  • Accent and Secondary

— Accent Color: Controls the color of the Pay button.

— Secondary Color: Adjusts the color of supporting text and disclaimers.

— You can click on the primary and secondary color tile to:

  • Choose a shade using the color picker or slider,

(or)

  • Enter exact RGB, HSL, or HEX codes for precise color matching.

Button Label

  • Customize the text displayed on the payment button (e.g., “Pay Now,” “Complete Payment,” “Proceed to Checkout”).

Font Style

  • Select a preferred font (e.g., Mulish) for your payment page from the drop-down menu.

Logo Upload

  • Click on Choose File to upload your store logo for consistent branding.
  • Ensure the file format matches the supported type listed in the tooltip. (Upload a logo image in PNG format, maximum 100KB, dimensions between 100-120px width and 80-100px height )

Step 4: Add Custom Tags (Advanced Customization Options)

If you need to collect additional information from customers during checkout:

  1. Click on Advanced Customization Options.
  1. Toggle on Add Custom Tag.

  1. Enter a Tag Name (e.g., Order ID, Invoice No., Customer Note).

  2. Set each tag as either:

  • Mandatory – Required for transaction completion, or

  • Optional – Customer can skip it.

  1. You can add up to five custom tags.

  2. Use the ⊕ icon to add new tags, the ⊖ icon to remove them, and the trash icon to delete a tag completely.

Step 5: Configure After Payment Message

  1. Click on the After Payment tab.
  1. Edit the confirmation message that appears after a successful transaction.

Example: “Thank you for your payment! Your transaction has been successfully processed.”

  1. This message helps confirm successful payments and enhances customer communication.

Step 6: Save and Apply the Template

  1. Click Save Template once all customization is complete.

  2. Enter a Template Name to identify your design.

  3. Choose whether to apply it to:

  • All Stores under your merchant account,

(or)

  • Selected Stores only.
  1. Click Save to apply and activate your checkout page template.

Step 7: Manage Templates

After saving, you’ll be redirected to Settings → Customize Checkout Page & Send Payment Link.

After creating the template, you can:

  • Edit an existing template to make design changes.

  • Delete templates that are no longer needed.

  • Manage store assignments to reassign templates to different stores.

Step 8: Review and Test

  1. Use the Live Preview feature to ensure your checkout design looks correct.

  2. Send yourself a test payment link to verify colors, logo, and message placement.

  3. Make final adjustments if needed and save again.

Merchant Invoicing on iPOSpaysApple Pay Integration on iPOSpays