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 Checkout pages use a session-based URL structure:
https://your-domain.com/store/{store-slug}/checkout/{sessionId}
Component Description store-slugYour store’s unique URL slug sessionIdCheckout session identifier created when a customer initiates checkout
Checkout sessions are generated server-side and contain product, pricing, and currency information.
Two-Step Flow Step 1: Customer 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#7CCB02 #ADFF85 Background Color checkoutColorBackground#FFFFFF #0A1A1F Card Color checkoutColorCard#F3F4F6 #0A1A1F Text Color checkoutColorText#111827 #FFFFFF Secondary Text Color checkoutColorTextSecondary#8C8C8C #8C8C8C
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.
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:
Card validation — Luhn check, expiry, CVC verification3D Secure — Bank verification (if required by the issuing bank)Authorization — Charge to cardOrder 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 Success 4242 4242 4242 4242 Success Declined 4000 0000 0000 0002 Declined 3DS Required 4000 0027 6000 3184 3D Secure flow
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. 
