Loading tutorials…
Loading tutorials…
BigCommerce's Optimized One-Page Checkout (OPC) is the most underused conversion lever on the platform. Most owners leave it on defaults and lose 5-10% of mobile transactions to friction that a 3-hour configuration fixes.
Who this is forBigCommerce owners with mobile CR below 45% or who haven't audited checkout settings since launch. Especially relevant if you run paid traffic — checkout friction directly inflates your CAC.
What you'll need
Step 1
Store Setup → Checkout. Confirm "Optimized One-Page Checkout" is selected — not the legacy "Single-Page" or "One-Page" checkouts.
Open Store Setup → Checkout. Three checkout options have existed historically: legacy "Single-Page Checkout," "One-Page Checkout," and "Optimized One-Page Checkout" (OPC). Only OPC is actively developed by BigCommerce and supports Apple Pay, Google Pay, and modern payment methods.
If you are on anything other than OPC, switch. The migration is one click but it does reset checkout customizations — back up any CSS overrides first.
Below the checkout selector, you will see "Checkout Customizations." This is where logo, colors, and a few layout tweaks live. Avoid heavy CSS overrides — they break with every BigCommerce checkout update.
For Plus, Pro, and Enterprise plans, BigCommerce also offers "Custom Checkout" (headless React via the Checkout SDK). Powerful but a 3-week project. Stick to OPC unless you have a developer + specific need.
Step 2
Store Setup → Payments → Online Payment Methods → enable BigCommerce Payments OR Stripe OR Braintree. Pick ONE primary card processor.
Store Setup → Payments → 'Online Payment Methods' tab.
Primary processor recommendation: BigCommerce Payments (powered by PayPal). Why: lowest setup friction (no separate account), native Apple Pay + Google Pay + PayPal in one integration, 2.59-2.9% + 30¢ pricing competitive with direct Stripe.
Alternative: Stripe via "Stripe Payment Gateway." Pick this if Stripe is already in your stack (subscriptions, Stripe Tax, Stripe Connect for marketplace).
Alternative: Braintree (also a PayPal subsidiary). Pick this if you need Venmo as a checkout method or have specific enterprise requirements.
Critical: do NOT enable two card processors in parallel. Customers see two card form fields at checkout and abandon. Pick one card processor. Enable PayPal Checkout as a wallet alongside it.
Complete KYC (business details, EIN, banking). Approval is 24-48 hours for BigCommerce Payments; longer for direct Stripe if you have a complex business structure.
Step 3
Store Setup → Payments → PayPal Checkout → connect a PayPal Business account. Enable Smart Button, Pay Later messaging, and Venmo (US only).
In the Online Payment Methods list, find "PayPal Checkout" (separate from BigCommerce Payments). Click Connect.
Sign in with your PayPal Business account and approve permissions. The connection sets up both standard PayPal checkout and the Smart Button on product pages and cart.
In PayPal Checkout settings, enable: "PayPal Smart Buttons" (the dynamic button that shows Venmo, Pay Later, and PayPal Credit when eligible), "Pay Later Messaging" (the "from $X/mo" widget that lifts AOV 5-10%), and "Venmo" (US-only — a meaningful checkout lift for younger demographics).
Choose the button placement: enable on PDP (Product Detail Page), Cart, and Checkout. Most stores benefit from all three; PDP express button is most valuable on lower-AOV products (impulse purchases).
Test: in incognito, add a low-price product to cart. Click PayPal Smart Button. Complete payment with a real PayPal account. Confirm: order appears in BigCommerce admin with payment method "PayPal Checkout."
Step 4
Apple Pay and Google Pay surface through your primary card processor. Test on a real iPhone (Safari) and real Android (Chrome) before assuming they work.
On a real iPhone, open your store in Safari (Apple Pay does NOT work in Chrome on iOS — that catches many testers off-guard).
Add a product to cart, click "Check Out." On the OPC page, the Apple Pay button should appear ABOVE the email/contact field, branded black with the Apple logo. Tap it; the native Apple Pay sheet should appear with your default card.
Common Apple Pay failures: (a) domain not registered with the processor — check BigCommerce Payments / Stripe settings for "Apple Pay domain verification" and ensure it shows "Verified." (b) Mixed content on the page (HTTP image loading on HTTPS site) — Apple Pay refuses to render. Inspect with browser DevTools → Security tab.
On a real Android in Chrome, the same flow should show a Google Pay button if the device has cards saved. Less common to fail than Apple Pay, but worth verifying.
For express buttons on PDP and Cart, the same Apple Pay/Google Pay should appear. If they appear at Checkout but not Cart/PDP, the express button setting is disabled in your processor — toggle it on.
Step 5
Checkout Customizations → upload logo, set brand colors, and ensure trust signals (badge, return policy, support) appear in the order summary sidebar.
Store Setup → Checkout → "Checkout Customizations" section. Upload the same logo used on your storefront header — branding consistency at checkout lifts trust.
Set primary color and button color to match your brand. Avoid extreme contrast (red-on-yellow); checkout aesthetics are 50% conversion driver for first-time buyers.
In the order summary sidebar (right side on desktop, bottom on mobile), confirm visible: order totals breakdown (subtotal, shipping, tax), accepted payment logos, return policy link.
For trust signals NOT included by default (money-back guarantee, customer support phone, SSL badge): add via the "Order confirmation copy" field or via a checkout-extension app (e.g., Shogun Frontend Checkout). Avoid stuffing — 3-4 trust signals well-placed beat 10 stacked.
Mobile preview: open OPC on a real iPhone. The Apple Pay button must fit above the keyboard when email field is focused, or shoppers miss it. If it doesn't, reduce header logo height in customizations.
Step 6
BigCommerce fires the order-confirmation event on the Thank You page. Ensure Meta Pixel, Google Ads/GA4, and TikTok Pixel all capture the Purchase event with correct value.
Storefront → Web Analytics. BigCommerce has native integrations for: Google Analytics 4, Facebook Pixel + Conversions API, TikTok Pixel + Events API, Pinterest Tag, Snap Pixel.
For each platform: paste the relevant ID (Pixel ID for Meta, Measurement ID for GA4, etc.) and toggle on. BigCommerce fires the standard events (PageView, AddToCart, InitiateCheckout, Purchase) automatically.
For Conversions API (server-side events): in the Meta integration, paste an Access Token from your Pixel settings. CAPI is non-negotiable post-iOS 14.5 — without it you lose 20-40% of attribution.
For Google Ads conversion tracking: connect Google Ads via the GA4 integration or paste the Google Ads conversion ID + label directly. Enable Enhanced Conversions in Google Ads → Goals → Conversions for an extra 10-15% attribution recovery.
Validate with a real test purchase: in Meta Events Manager → Test Events, run a test purchase and confirm Purchase fires with BOTH browser and server data sources. In Google Ads → Goals → Conversions, the Purchase action should show "Recording" status within 24 hours.
Step 7
Test the full checkout flow on iPhone + Android + Desktop, with Apple Pay + Google Pay + PayPal + Card. Five test orders, refunded after, catch 90% of pre-launch defects.
Test matrix: 3 devices × 4 payment methods = 12 test transactions. In practice, 5 well-chosen tests cover most defects: iPhone-Apple Pay, iPhone-Card, Android-Google Pay, Android-PayPal, Desktop-Card.
For each test: complete the purchase with a real card or wallet (refund yourself after). Verify in admin that order appears with correct payment method, correct shipping address, correct tax, and correct total.
On the Thank You page, verify the order confirmation email arrived within 60 seconds. Check rendering on Gmail web + iOS Mail. Broken images or layout = lost brand trust on first touch.
In each tracking platform, confirm the Purchase event fired with the correct value and currency. Mismatched values (e.g., Purchase value reads "100" but should be "$100.00") usually mean the integration is pulling the wrong field.
Document any failures and re-test after fixing. Do NOT mark checkout setup "done" until every cell of the test matrix passes.
Common mistakes
Running on legacy checkout instead of Optimized One-Page Checkout
What goes wrong: Older checkouts don't support Apple Pay, Google Pay, or modern PayPal Smart Buttons. Mobile CR sits 5-10% below what it could be — silently, because the default appears to work.
How to avoid: Store Setup → Checkout → switch to "Optimized One-Page Checkout." Back up any custom CSS first; the switch resets customizations.
Running two card processors in parallel
What goes wrong: BC Payments AND Stripe both enabled. Customers see two card forms stacked, get confused, and abandon. CR drops 3-7% on mobile especially.
How to avoid: Pick ONE card processor. Use PayPal as the second option (not another card processor). Disable the unused processor in Online Payment Methods.
Skipping Conversions API for Meta
What goes wrong: Without server-side events, iOS 14.5+ and Safari ITP users are mostly invisible to Meta. Ad platforms have nothing to optimize against. CAC climbs 30-60% over 30 days.
How to avoid: In Storefront → Web Analytics → Meta integration, paste a CAPI Access Token. Validate via Meta Events Manager that Purchase fires with both browser and server sources.
Not testing Apple Pay on a real iPhone in Safari
What goes wrong: Domain association silently fails. iPhone shoppers see no Apple Pay button and complete the long card form — which they often abandon. Mobile CR appears mysteriously low.
How to avoid: On a real iPhone (not iOS Simulator), open the live store in Safari. Walk through checkout. If Apple Pay button is missing, re-register the domain in your processor settings.
Heavy CSS customization of OPC
What goes wrong: Custom CSS overrides break with every BigCommerce checkout update (BigCommerce ships changes silently every few weeks). Checkout looks broken to customers, you don't notice for days.
How to avoid: Use only the Checkout Customizations panel (logo, colors). For deeper customization, upgrade to Pro/Enterprise and use the Checkout SDK (custom checkout), which is a real maintained codebase rather than CSS overrides.
Forgetting to disable Test Payment Gateway
What goes wrong: Fake card numbers succeed silently. Orders ship without payment. Fraud rings find the store within hours and abuse it.
How to avoid: Store Setup → Payments → Online Payment Methods → confirm Test Payment Gateway is OFF. Should never be on after launch day.
Recap
Done — what's next
How to set up a BigCommerce store from scratch
Read the next tutorial
Hand it off
BigCommerce checkout is straightforward to install and surprisingly deep to optimize. A vetted BigCommerce specialist can configure OPC, payments, CAPI, and validate end-to-end in one focused session at $14-16/hr — typically $300-600 total for the setup, $150-300/mo to monitor and tune.
See specialist rates
BigCommerce Payments is powered by PayPal (Braintree) under the hood. Pricing is similar to Stripe (2.59-2.9% + 30¢). BC Payments is faster to set up (no separate signup), bundles PayPal + Apple Pay + Google Pay in one integration. Stripe is more flexible for complex needs (subscriptions, multi-currency, Stripe Connect for marketplaces).
Lightly via the Checkout Customizations panel (logo, colors, copy on order confirmation). For deeper customization, Plus/Pro/Enterprise plans support the Checkout SDK — a headless React checkout you build yourself or via a specialist. Most stores should NOT go headless — it adds 3-6 weeks of development and ongoing maintenance.
Yes. Via PayPal Checkout (Pay in 4 — US, UK, AU), via Affirm (US — separate setup), via Klarna (US, UK, EU — separate setup), via Afterpay (US, AU, NZ — separate setup). BNPL options typically lift AOV 10-20% on $100+ AOV stores. Enable at least one BNPL option on the checkout.
Most common: testing in Chrome on iOS instead of Safari (Apple Pay only works in Safari). Second most common: domain not registered with your card processor — check processor settings. Third: mixed content on the page (HTTP image on HTTPS page) — Apple refuses to render. Inspect with Safari Web Inspector.
Not for standard configuration — Store Setup → Payments handles 95% of stores via the GUI. You'd want a developer only for: custom checkout via the Checkout SDK, custom payment gateway not in the Payment Methods list, or B2B-specific payment flows (PO, NET-30 terms).
Yes for gift cards (BigCommerce has native gift card support — customers can apply at checkout, balance comes from gift card and rest from card/wallet). Not natively for split-tender across two card processors — that requires the Checkout SDK or a third-party app.
BigCommerce
Most new BigCommerce stores go live with broken tax rules, missing shipping zones, and unverified payment flows. Then the first 30 orders surface every gap one customer at a time. Here's the systematic setup that catches these before launch.
BigCommerce
Most BigCommerce stores 'install Meta Pixel' and call it done — but without Conversions API (CAPI) and event deduplication, you lose 20-40% of attribution on iOS and ITP. This is the full setup that ad-platform optimization actually needs.
BigCommerce
Most BigCommerce stores install GA4 in 5 minutes — but only fire half the ecommerce events. Reports show pageviews but miss add_to_cart, begin_checkout, and item-level revenue. This is the full enhanced-ecommerce setup that actually drives decisions.
Meta Ads
The browser pixel alone loses 20-30% of conversions on iOS. CAPI sends events from your server to Meta, recovering most of it. Three install paths: Shopify-native, server-side GTM, and direct API. We cover all three.