Paddle Overlay Checkout

First, let’s make a frontend key and save it in our hugo.toml under a key like paddleSandboxClientSideJsToken (you’ll also have a paddleProdClientSideJsToken). Then, on your layouts/products/single.html template make a javascript snippet like so:

<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script type="text/javascript">
  {{- $paddleToken := "" -}}
  {{- $priceIds := slice -}}
  {{ if hugo.IsServer -}}
  Paddle.Environment.set("sandbox");
  {{- $paddleToken = .Site.Params.paddleSandboxClientSideJsToke -}}
  {{- $priceIds = .Params.product.testPaddlePriceIds -}}
  {{- else -}}
  {{- $paddleToken = .Site.Params.paddleProdClientSideJsToken -}}
  {{- $priceIds = .Params.product.prodPaddlePriceIds -}}
  {{- end }}
  Paddle.Initialize({ 
  token: '{{ $paddleToken }}',
  checkout: {
    settings: {
      variant: 'one-page' // or multi-page
    }
  }
});

  let itemList = [
    {{ range $index, $id := $priceIds -}}
    { priceId: "{{ $id }}", quantity: 1 }{{ if ne (add $index 1) (len $priceIds) }},{{ end }}
    {{ end }}
  ]
  function openCheckout(items){
    Paddle.Checkout.open({
      items: items
    });
  }
</script>

I use hugo.IsServer to determine where I’m running and switch between my sandbox environment with the test variables and my production version with the live tokens/config.

Sales Page Frontmatter ¶

Each product has its own sales page. I create identical products for both production (in the live account) and testing (in the sandbox account), switching between product ID’s using the hugo.IsServer variable.

[product]
title = "The Product title"
prodPaddlePriceIds = [
    "pri_...",
]
testPaddlePriceIds = [
    "pri_...",
]

Testing Your Configuration ¶

With the proper frontmatter and javascript, you can test sales of your product. Start up the Hugo server and start the checkout flow. Make sure your server is running

Use Paddle’s test cards, once you finish the payment, you should get a response on your server and an email with both your receipt and an email for “customer created” and “transaction completed” from Paddle (if you set email notifications up).

You should also check your test account and see how customers and sales look. You’ll see the fake money listed in the account too.