Select a product version with Gumroad embeds

Automatically link to a specific variant of a product using Gumroad Embeds

I’m using Gumroad for my GitHub Actions Book and have been impressed at how easy it is to get up and running with Gumroad Embedded Widgets.

It was as simple as adding a link with a class of gumroad-button and including their JS widget:

<script src="https://gumroad.com/js/gumroad.js" defer></script>

The button to click looked like the following:

<a href="gumroad-link" href="https://gum.co/ZjAMH">Purchase</a>

I wanted to show the Gumroad checkout screen as soon as the button was clicked rather than showing the product page. To enable this, you add wanted=true to the URL:

<a href="gumroad-link" href="https://gum.co/ZjAMH?wanted=true">Purchase</a>

Gumroad Checkout

This got me 90% of what I wanted, but there was one final thing. I’m selling multiple variants of the book and wanted to jump straight to the checkout page for a specific variant.

It took a while to find, but the URL accepts a variant parameter too. The value for this should be the name of the option that you want to link to. Any spaces in the name should be URL encoded.

Gumroad Variant Option

Linking directly to the checkout page for the complete package looks like the following:

<a
  href="gumroad-link"
  href="https://gum.co/ZjAMH?wanted=true&variant=The%20Complete%20Package"
>
  Purchase
</a>

You can of course mix and match these parameters. If you want to link to the product page but preselect a version, use the following:

<a
  href="gumroad-link"
  href="https://gum.co/ZjAMH?variant=The%20Complete%20Package"
>
  Purchase
</a>

So far, Gumroad seems great! It took me a little while to work this out, so I’m making a note here for the future. I hope it helps you too, should you stumble across this page.