Checkout Customization

Overview

Payzo offers 3 professional checkout templates and custom branding options to match your brand identity.

Checkout Themes

Theme 1: Centered - Dark Mode

Description: Compact centered card layout with dark background

Theme 2: Centered - Light Mode

Description: Compact centered card with light background

Theme 3: Full Page Layout

Description: Split layout with product info panel and checkout form

Custom Branding

Shop Logo

Upload your logo to display on the checkout page:

Go to Dashboard > Checkout Customization
Select your shop
Click "Upload Logo"
Choose an image file:
- Formats: PNG, JPG, WEBP, SVG
- Max Size: 2MB
- Recommended: 120x120px (square)
Click "Save Changes"

Logo Placement:

Centered Dark/Light: Top center
Full Page: Top left of dark panel

Shop Name

Your shop name is automatically displayed on checkout pages

To Change Shop Name:

Create a new shop with desired name
Use the new shop's API credentials
(Shop names cannot be changed after creation)

Customization Guide

Step 1: Access Customization Settings

Log in to Dashboard
Navigate to Checkout Customization
Select the shop you want to customize

Step 2: Choose a Theme

Select one of the 3 available themes:

Centered - Dark Mode
Centered - Light Mode
Full Page Layout

Click on the theme to select it.

Step 3: Upload Logo (Optional)

Click "Upload Logo"
Select your image file
Preview the logo
Click "Remove" if you want to remove it

Step 4: Save Changes

Click "Save Changes" to apply your customizations.

Logo Best Practices

Image Specifications

Recommended:

Size: 120x120px or larger (square)
Format: PNG with transparent background
Max File Size: 2MB
DPI: 72-144 DPI for web

Avoid:

Very small logos (less than 100px)
Large file sizes (over 2MB)
Low resolution images
Complex designs (hard to see when scaled)

Checkout URL Structure

Every checkout URL follows this format:

https://payzo.cc/checkout/{shop-slug}/{payment-id}

Example:

https://payzo.cc/checkout/my-awesome-store/pay_abc123def456

Components:

my-awesome-store: Your shop slug (from shop name)
pay_abc123def456: Unique payment ID

Mobile Responsiveness

All 3 themes are fully responsive and work perfectly on:

Mobile phones (iOS/Android)
Tablets

Checkout Page Elements

Displayed Information

Checkout pages automatically show:

Shop Logo (if uploaded)
Shop Name (from your shop settings)
Amount (from payment creation)
Currency (USD by default)
Customer Email (if provided during payment creation)
Payment Description (from metadata)

Security Badges

All checkout pages display:

"Secured by Payzo"
SSL/HTTPS indicator (browser)

Custom Success/Cancel Pages

You can specify custom URLs when creating payments in the API settings!

Or manually via code:

const payment = await fetch('https://payzo.cc/api/v1/payments', {
  method: 'POST',
  body: JSON.stringify({
    amount: 5000,
    success_url: 'https://yoursite.com/thank-you?order=123',
    cancel_url: 'https://yoursite.com/checkout-cancelled'
  })
});

Success URL: Where customers go after successful payment Cancel URL: Where customers go if they cancel

Metadata Display

Some metadata fields are displayed on checkout:

metadata: {
  description: "Premium Package - 1 Year", // Shown on checkout
  order_id: "ORD-12345" // Not shown, internal only
}

Troubleshooting

Logo Not Displaying

Check:

Logo file size is under 2MB
Logo format is PNG, JPG, WEBP, or SVG
Click "Save Changes" after uploading
Clear browser cache and refresh

Theme Changes Not Applying

Solution:

Ensure you clicked "Save Changes"
Create a new test payment to get fresh checkout URL
Clear browser cache
Try different browser/incognito mode

Checkout Looks Broken