Zero JavaScript added to your islands
This is not a framework component, so it needs no client:load and never appears in your bundle stats. The script tag does its work in the browser, after your HTML.
Scriptorium · I
Add a buy button to your Astro site
You do not need an integration package, a client directive, or an island. The button is plain HTML that ships with your static build, which is the most Astro-shaped thing a payment widget can be.
Add the script tag, once
Put the script tag in the head of your base layout, src/layouts/Layout.astro in most projects. Every page that uses the layout can render buttons from then on.
---
// src/layouts/Layout.astro
---
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{title}</title>
<script src="https://sdk.coinmoebius.com/latest/sdk.global.js"
crossorigin="anonymous"
defer></script>
</head>Name the product in your dashboard
Open your project, switch to the Products tab, and add the product: a reference you choose, a name, a price, a currency. From here the dashboard writes both blocks on this page with your real project ID. What you see below is the shape.
Place the button where you sell
Paste the button into the body of any .astro page or component. Astro passes it through to the built HTML untouched.
<coin-moebius-buy
project-id="proj_YOUR_ID_HERE"
product-id="t-shirt-medium"
label="Buy a t-shirt">
</coin-moebius-buy>Publish. The button renders with the page, and the payment picker loads the first time a buyer clicks it. Each additional product is the same block with a different reference and label.
Watch out for these
MDX and content collections
Pages rendered through the layout already have the script. To sell from inside MDX content, paste the same button HTML straight into the file.
Static, SSR, hybrid: all fine
The button does not care how the HTML was produced. If the page reaches a browser, it sells.
Ready when your page is
Free covers 150 transactions a month. No card to sign up.