Payment Buttonembed snippet

A pay button. Anywhere on your site.

Copy a six-line snippet. Paste it into WordPress, Squarespace, Webflow, Wix, plain HTML — even an email signature. A styled Pay button shows up, takes one click, and routes the buyer to your branded checkout.

3 styles
blue · dark · outline
0 code
copy & paste
Any
website builder
</>
One-line snippet
copy · paste · live
yourblog.com/best-coffee-2026

A field guide to slow coffee

Published Mar 14, 2026 · Maria · 6 min read

There’s a kind of morning where the kettle clicks and you have nowhere to be. Pour the water in slow concentric circles, let the bloom bloom, and the rest of the day softens around it.

If you’d like to support this newsletter and keep my Friday mornings caffeinated:

↳ EMBEDDED PAY BUTTONPay €4.50

Thanks for reading. I’ll write again next Friday — kettle willing.

Why an embed button

The shortest path from “nice post” to checkout.

A button on the page where someone already wants to pay you converts harder than a link buried in your bio. The Payment Button puts the checkout exactly where their attention is — without an iframe, popup, or third-party script tag.

01

It’s a link, not an iframe.

No third-party scripts on your site. No CSP headaches, no lazy-loaded popup. The button is a plain anchor styled by one tiny stylesheet — fast and predictable everywhere.

02

Lands on your branded checkout

Customers click and arrive at your PayRequest payment page — your handle, your colors, your methods. The host site (WordPress, Wix, etc.) never has to handle card data.

03

Three styles, copy-paste-ready

Blue for primary CTAs, Dark for light backgrounds, Outline to blend in. Add the --secure modifier for a built-in lock-icon trust cue.

04

Smart Link analytics, intact.

Every click on the embedded button feeds your Smart Link views, conversions, and revenue numbers — exactly as if buyers came in via a direct payment URL.

05

Edit the label inline

“Pay €4.50” is just text inside the snippet. Change it to “Buy now”, “Donate”, “Subscribe”, or any language — no dashboard round-trip needed.

06

Reuse the stylesheet once.

Paste the one-line stylesheet include at the top of the page (or your theme's header). Drop in as many buttons as you like — they all share the styles.

Three styles, one snippet

Pick the button that matches your page.

Each style is a single class. Switch between them by changing one word in the snippet — the button restyles instantly.

Pay €4.50
01 · BlueDefault

Primary CTA blue.

PayRequest’s signature blue. Highest contrast, hardest to miss. Use it as the main “buy” call-to-action on most posts and pages.

.pr-btn .pr-btn--default
Pay €4.50
02 · DarkLight backgrounds

Black, minimal, editorial.

Best for clean, light-mode sites with a typographic vibe. Carries weight without shouting — pairs well with serif-heavy blogs and portfolios.

.pr-btn .pr-btn--dark
Pay €4.50
03 · OutlineAlready-styled pages

Transparent. Inherits.

Just a border and your label. Slots into already-busy designs, sidebars, or as a secondary CTA underneath a primary button. No background to fight.

.pr-btn .pr-btn--outline

Add a lock for higher-trust pages.

Append pr-btn--secure as a modifier and the button gains a small lock icon — a quiet trust signal for paid memberships, deposits, or any sale where reassurance helps.

Pay €4.50
class="pr-btn pr-btn--default pr-btn--secure"
5 steps, under a minute

From dashboard to live button in 60 seconds.

Pick the link. Pick the style. Copy the snippet. Paste it where you want the button to show. That's the whole process — and we've broken it into five just so you can blink between them.

1
Open the Smart Link

Payment Page → Smart Links. Pick the link you want to embed.

~ 5 sec
2
Click Share

The share dialog opens with URL, QR, and embed options.

~ 5 sec
3
Pick a style

Blue, Dark, or Outline — preview updates as you click.

~ 10 sec
4
Copy snippet

One click, full HTML on your clipboard. Stylesheet included.

~ 2 sec
5
Paste & ship

Custom HTML block in WordPress, Code block in Squarespace, anywhere else.

live
The snippet

Six lines. One paste.

The first line loads the button stylesheet (paste it once per page — or once in your theme header). The second line is the button itself. Reuse the button as many times as you like.

<!-- 1. Include the PayRequest button stylesheet (one-time per page) -->
<link rel="stylesheet"
      href="https://payrequest.app/embed/button.css">

<!-- 2. The button -->
<a href="https://payrequest.me/yourhandle/coffee"
   class="pr-btn pr-btn--default"
   target="_blank"
   rel="noopener">Pay €4.50</a>
Works in any builder

Drop it into whatever you build with.

If your site can render an HTML block, the Payment Button works. Here's where to paste the snippet on the platforms most of you use.

W
WordPress
GUTENBERG · CLASSIC
  1. Edit the post or page
  2. Add a Custom HTML block (Gutenberg) or Code Snippet widget (Classic)
  3. Paste the snippet
  4. Update / Publish — button is live
Sq
Squarespace
CODE BLOCK
  1. Edit the page section
  2. Insert a Code block
  3. Paste the snippet, save
  4. Publish — appears in-line with the rest of the section
Wx
Wix
EMBED HTML
  1. Add → Embed Code → Embed HTML
  2. Pick "Code" mode and paste the snippet
  3. Resize the embed widget to button height
  4. Publish — button is live
Wf
Webflow
EMBED ELEMENT
  1. Drop in an Embed element from the Add panel
  2. Paste the snippet, click Save & Close
  3. Publish to your custom domain
  4. Reuse the embed across symbols and CMS items
Gh
Ghost
HTML CARD
  1. Open the post in the editor
  2. Type / and pick HTML
  3. Paste the snippet, click outside
  4. Publish or update — button is live
</>
Plain HTML
ANY THEME
  1. Open your template (or any .html file)
  2. Paste the <link> in the <head> once
  3. Drop the <a> wherever you want the button
  4. Save, deploy, refresh — done
Tracking still works

Every embed feeds the same Smart Link.

Pasting the button on a third-party site doesn’t break analytics — it adds to them. Clicks, paid conversions, and revenue from your blog, your newsletter, your Squarespace landing page all roll up into one Smart Link dashboard.

Use referrer data to see which embed location is actually closing sales. The WordPress post in your sidebar might be quietly out-converting the homepage — and now you’d know.

Click-through count
every press of every embedded button is logged
Revenue attribution
each successful payment ties back to its origin URL
Conversion rate per source
see which posts and platforms actually close
/
coffee
payrequest.me/maria/coffeelive
Views (7d)
2,847
↑ 18%
Conv. rate
12.4%
↑ 2.1pp
Revenue
€1,587
↑ €240
Top embed sources
WPyourblog.com/best-coffee-20261,12414.2%
EMfriday-newsletter · 2026-mar-1481218.7%
Xx.com/maria · pinned post4866.1%
Ddirect · payrequest.me/maria/coffee42510.4%
Common questions

Honest answers about the embed.

Neither. The Payment Button is a plain HTML link styled by one tiny stylesheet. Customers click it and are taken to your branded PayRequest checkout in a new tab — no embedded checkout, no third-party scripts running on your site, no CSP headaches.
Stop linking. Start buttoning.

Pick a Smart Link. Embed in a minute.

The next sale on your blog, your portfolio, your Webflow page is one paste away. Three styles, no code, full analytics — and customers always land on your branded checkout.

No card to start · Free plan available · 2-min setup
Preview · BluePay €4.50Preview · DarkBuy nowPreview · OutlineSubscribePreview · Blue + SecureDonate €10