DEV Community

Cover image for Add a crypto checkout to any website with one script tag
Shieldz
Shieldz

Posted on

Add a crypto checkout to any website with one script tag

#webdev #javascript #ecommerce #web3

We're building Shieldz, a non-custodial crypto payment gateway, and we just shipped the payment widget: one script tag, and your site can take crypto payments without a backend. This post walks through how it works.

The setup

  1. In the dashboard, add a receive wallet (an address or public key, never a seed phrase).
  2. Add a product: name, price, image. You get a payment link like plink_4Hn8sKq2.
  3. Paste the script and a button: 
<script src="https://shieldz.cash/widget.js" defer></script>

<button data-shieldz-link="plink_4Hn8sKq2">Buy now</button>
Enter fullscreen mode Exit fullscreen mode

That's the whole integration. Click the button and the checkout opens as a modal over your page. The buyer connects a wallet (MetaMask, Phantom, Coinbase, Trust, Rabby…), pays, and the modal shows a paid state.

Three ways to show the checkout

1. Buy button: the snippet above. Best for a product page.

2. Inline checkout: if you'd rather the checkout be part of the page than a modal:

<div data-shieldz-inline="plink_4Hn8sKq2"></div>
Enter fullscreen mode Exit fullscreen mode

3. Your own cart: if you already have a cart in JavaScript, add your publishable key to the script tag and start checkout from code:

<script src="https://shieldz.cash/widget.js" data-key="pk_live_..." defer></script>
Enter fullscreen mode Exit fullscreen mode 
Shieldz.checkout({
  lineItems: [
    { price: "price_tote",   quantity: 1 },
    { price: "price_beanie", quantity: 2 },
  ],
  order: "A-1043", // your order id, echoed back in the webhook
});
Enter fullscreen mode Exit fullscreen mode

Buyers pay in what they hold, you get your stablecoin

You pick the asset you want to receive, e.g. USDC on Base (USDC/USDT on Base, Arbitrum, Optimism, Polygon or Ethereum). The buyer can pay with whatever they hold: USDC, USDT, ETH, SOL, BTC and more. If it's a different coin, it gets swapped on the way through NEAR Intents, Chainflip or Relay, and you receive the full price in your stablecoin.

Pricing, since people always ask:

  • Paid in your settlement asset: no fee.
  • Paid in another coin through the widget: 0.15%, added on the buyer's side.
  • Server-side API integrations: no platform fee.

Non-custodial: Shieldz never holds the money

Money goes buyer wallet → your wallet. Shieldz only knows your public address. It watches the chain and tells your server when a payment lands. There's no balance sitting with us, so there's no account to freeze, no payout schedule, and no chargebacks.

Webhooks

For fulfilment, add a webhook URL in the dashboard. You'll get invoice.paid, invoice.failed and invoice.expired events:

{
  "type": "invoice.paid",
  "data": {
    "invoice": { "amount_usd_cents": 8900, "client_reference_id": "A-1043" }
  }
}
Enter fullscreen mode Exit fullscreen mode

Every request is signed: verify X-Shieldz-Signature (HMAC-SHA256) against the raw body before you parse the JSON. In Express that means express.raw({ type: "application/json" }) on the webhook route, not express.json().

No KYC to start

You need a wallet address, a product and one line of HTML. Payments go to your wallet from the very first one.

Feedback is welcome, especially from anyone who has fought with crypto checkout before. What broke for you?

Top comments (0)