Back to documentation

Embedding your checkout

Add SurcoPay to a website you already have. Copy one snippet from your dashboard, paste it where the checkout should appear, and you're selling.

How it works

The snippet loads a small script from SurcoPay, which places your checkout on the page inside a secure frame. It sizes itself to fit, so you don't need to guess a height.

Card details go straight from your buyer's browser to Stripe, and PayPal approval happens on PayPal's own screen. Your website never touches payment data, so embedding the checkout does not put your site in scope for card compliance.

Before you start

  1. Connect a payment provider in Settings → Payment Providers.
  2. Create your product and upload its file.
  3. Copy the snippet from Widget Embed. The live preview there shows exactly what buyers will see.

Your website

Plain HTML

Netlify, Vercel, GitHub Pages, cPanel, anything

  1. Paste the snippet into your page's HTML where the checkout should appear.
  2. That's it — no build step, no dependencies.

WordPress

Block editor, Classic editor or Elementor

  1. Block editor: edit the page, click +, search for Custom HTML, paste the snippet.
  2. Classic editor: switch to the Text tab (not Visual) and paste.
  3. Elementor: add an HTML widget and paste.

wordpress.com strips scripts below the Business plan, and some security plugins do the same. Use the checkout link instead if nothing renders.

Wix

Paid plan with a connected domain

  1. Editor → Add Elements (+) → Embed Code → Embed HTML.
  2. Click Enter Code, paste the snippet, Apply.
  3. Drag the element to the size you want — the checkout resizes itself to fit.

Squarespace

Business plan or higher

  1. Edit the page and add a Code block.
  2. Paste the snippet, leaving HTML selected, and save.

Personal plans strip scripts. On one of those, use a Button block pointing at your checkout link.

Shopify

Online Store 2.0 themes

  1. Online Store → Themes → Customize.
  2. Add section or block → Custom Liquid, then paste the snippet.
  3. Or on a page: Pages → edit → click <> in the toolbar → paste.

Webflow

Requires a paid site plan

  1. Add an Embed element where the checkout should go.
  2. Paste the snippet, then save and publish.

Carrd

Pro plan

  1. Add an Embed element.
  2. Set type to Code and paste the snippet.

Framer

  1. Insert → Embed component, set to Code/HTML.
  2. Paste the snippet and publish.

Google Sites

  1. Insert → Embed → Embed code tab.
  2. Paste the snippet → Next → Insert.

React, Next.js, Vue

For developers

  1. Load widget.js once in a useEffect (or onMounted), then call SurcoPay.init in the script's onload.
  2. Guard against double-mounting in React 18 development, which runs effects twice.

No website? Use your checkout link

Every product has a checkout page that works on its own, with nothing to install. Copy it from Widget Embed and use it anywhere you can put a link:

  • Instagram and TikTok bio links
  • Linktree and similar
  • Notion pages
  • Email newsletters
  • WhatsApp and direct messages
  • Any plan that strips custom scripts

If something looks wrong

Nothing renders at all

Your platform stripped the script tag — usually a plan that doesn't allow custom code, or a security plugin. Use the checkout link instead, or upgrade the plan.

The checkout appears but is cut off

It should size itself automatically. If your platform wraps embeds in a fixed-height box (Wix and Google Sites do), make that box taller.

A payment method is missing

That provider isn't connected yet, or isn't enabled on the product. Check Settings → Payment Providers, and the product's payment methods.

Apple Pay or Google Pay don't show

Both need your site on HTTPS, and Apple Pay needs your domain registered in your Stripe dashboard. Neither appears on a local test site.

Nothing renders and the browser console mentions frame-ancestors

Your site sends a Content-Security-Policy that blocks embedded frames. Add app.surcopay.com to your frame-src directive, or use the checkout link.

Payment fails instantly

You're likely on Stripe test keys. Test keys only accept test cards — 4242 4242 4242 4242 with any future date and any CVC.

Stuck on something not listed here? Tell us your product ID and where you're embedding, and we'll take a look.

Contact support