Goldmark eats raw HTML by default
Hugo strips inline HTML from Markdown unless you set markup.goldmark.renderer.unsafe = true in your site config. Buttons in templates and partials need no setting at all.
Scriptorium · II
Add a buy button to your Hugo site
You add one line to your base template and one block where you sell. Your build does not slow down, because nothing about your build changes.
Add the script tag, once
Add the script tag to the head of your base template: layouts/_default/baseof.html in most themes, or the head partial if your theme keeps one.
<!-- layouts/_default/baseof.html -->
<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 any template or partial. To put it inside Markdown content, allow inline HTML first (see the margin notes).
<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
Make it a partial
Selling from many pages? Wrap the button in a partial or shortcode that takes the product reference and label as parameters. One definition, the whole catalog.
On the verified list
Hugo is one of the platforms the docs list as confirmed working. This exact setup is tested.
Ready when your page is
Free covers 150 transactions a month. No card to sign up.