Checkout

A two-step checkout flow optimized for conversion

Checkout Overview

Waffo Pancake uses a two-step checkout flow optimized for conversion. This design collects customer details first, then payment information, reducing abandonment and supporting accurate tax calculation.

---

Checkout URLs

Product Purchase Links (Recommended)

Every product gets a permanent purchase link that never expires:

https://checkout.waffo.ai/{store-slug}/{product-slug}

Test mode:

https://checkout.waffo.ai/{store-slug}/{product-slug}/test

Just click “Copy Link” in the Dashboard. The link stays the same even when you update the product. A checkout session is created automatically when the customer opens the link.

Checkout Sessions (API)

For advanced use cases (dynamic pricing, custom metadata, programmatic checkout), create a session via the API:

https://checkout.waffo.ai/{store-slug}/checkout/{sessionId}

Component	Description
store-slug	Your store’s unique URL slug
sessionId	Checkout session identifier (7-day TTL)

Checkout sessions are generated server-side and lock the product version, pricing, and currency at creation time.

---

Two-Step Flow

1. Consumer Details

   Collect email, country, and billing info for tax calculation and order processing.

2. Payment

   Enter card details or use Apple Pay / Google Pay to complete payment.

Step 1: Consumer Details

Collects information needed for tax calculation and order processing.

Required Fields:

Field	Purpose
Email address	Receipt, account creation, Customer Portal access
Country	Tax jurisdiction determination

Conditional Fields (Based on Country):

Field	When Shown
ZIP/Postal Code	Most countries (US, CA, UK, etc.)
State/Province	US, CA, AU, IN, and other applicable countries

Business Purchase Option: Customers can toggle “I’m purchasing as a business” to provide:

• Business name
• Tax ID (for VAT/tax exemption)

Step 2: Payment

Card Payment

• Card number
• Expiry date (MM/YY)
• CVC/CVV
• Cardholder name

Digital Wallets

• Apple Pay (iOS, Safari)
• Google Pay (Android, Chrome)
• One-click with biometric auth

Order Summary is displayed alongside the payment form with product name, image, subtotal, tax, and total.

---

Subscription Checkout

For subscription products, additional billing information displays:

Element	Example
Billing frequency	”Billed monthly”
Recurring amount	”$29.00/month”
Next billing date	Calculated from today
Trial duration	”7-day free trial” (if the product has trials enabled)

---

Customization

Make your checkout page match your brand through the Checkout Settings in your dashboard.

Logo

Upload a custom logo displayed on the checkout page. Supported formats include PNG, JPG, and SVG.

Theme Mode

Light Mode

White background, dark text. Best for most brands.

Dark Mode

Dark background, light text. Modern aesthetic.

Switch between Light and Dark mode presets. Each mode maintains its own set of color values.

Color Settings

Setting	Field Name	Default (Light)	Default (Dark)
Primary Color	checkoutColorPrimary	#111111	#FEFDFD
Background Color	checkoutColorBackground	#F4F4F4	#111315
Card Color	checkoutColorCard	#FFFFFF	#181A1B
Text Color	checkoutColorText	#111111	#FFFFFF

Border Radius

Control the roundness of UI elements with the checkoutBorderRadius setting. Default is 8px. Options range from 0px (sharp corners) to 16px (extra-large rounding).

Ensure sufficient contrast between text and background colors for accessibility. WCAG recommends a contrast ratio of at least 4.5:1.

Store Information

Option	Description
Store Name	Shown in header
Support Email	For customer questions
Terms Link	Link to your terms of service (required)
Privacy Link	Link to your privacy policy (required)

---

Multi-Language Support

Checkout automatically displays in the customer’s browser language:

Language	Code
English	en
Chinese (Simplified)	zh
Japanese	ja

---

Processing & Results

After payment submission:

1. Card validation — Luhn check, expiry, CVC verification
2. 3D Secure — Bank verification (if required by the issuing bank)
3. Authorization — Charge to card
4. Order creation — Record in system

Success Page: Order confirmation number, receipt email notification, next steps, Customer Portal link.

Failed Page: Clear error explanation, suggested action, retry button, support contact option.

---

Error Handling

Error	Cause	Customer Action
Card declined	Insufficient funds or bank block	Try different card
Invalid card	Incorrect card number	Check and re-enter
Expired card	Card past expiration	Use valid card
CVC mismatch	Wrong security code	Re-enter CVC
3DS failed	Bank verification failed	Contact bank

---

Test Checkout

Use Test Mode to try the checkout flow without real charges.

Card	Number	Result
Visa Credit	4576 7500 0000 0110	Success
Mastercard Credit	2226 9000 0000 0110	Success
Visa Credit	4576 7500 0000 0220	Declined

Test mode is indicated by a banner: “Test Mode - No real charges will be made”

---

Merchant of Record Notice

At checkout footer, customers see:

“This order is processed by our online reseller & Merchant of Record, Waffo Pancake, who also handles order-related inquiries and returns.”

This disclosure is required for MoR compliance and helps customers understand the payment relationship.