Embed snippet

Drop one <script> tag on any page and turn any button into a link to PAID's hosted checkout page. No framework required.

How it works

Your server creates the checkout with your secret key — POST /v1/checkout/sessions with the line items, currency, success_url and cancel_url — and puts the returned id on the page. The snippet sends the buyer to the hosted checkout page for that id; after payment PAID returns the buyer to your success_url and sends checkout.session.completed to your webhook.

The amount is always set by your server. A checkout can no longer be created in the browser from an account id and an amount: that let anyone open a checkout for any merchant at any price, and the API now refuses it (410 checkout_link_retired).

Install

Add the script to the bottom of <body> on any page where you want PAID checkout:

<script async src="https://paid.trustfabric.ai/v1/embed.js"></script>

Declarative usage

Attach data-paid-checkout and the checkout's data-session-id to any element and PAID will turn it into a checkout trigger.

<!-- {{ checkout.id }}: the id your server got back from
     POST /v1/checkout/sessions (created with your secret key). -->
<button data-paid-checkout
  data-session-id="{{ checkout.id }}">
  Pay $49.99
</button>

<script async src="https://paid.trustfabric.ai/v1/embed.js"></script>

Supported attributes

Programmatic usage

Call paid.checkout() with the id of a checkout your server created:

// Programmatically open PAID checkout.
// Load the embed script first — it attaches window.Paid (it is not
// an ES module and there is no npm package):
//   <script async src="https://paid.trustfabric.ai/v1/embed.js"></script>

const paid = window.Paid();

document.getElementById("buy").addEventListener("click", async () => {
  // Your server creates the checkout with your secret key
  // (POST /v1/checkout/sessions) and returns its id.
  const res = await fetch("/api/create-checkout", { method: "POST" });
  const { id } = await res.json();

  // Sends the buyer to PAID's hosted checkout page. After payment
  // they return to the success_url your server set.
  await paid.checkout({ sessionId: id });
});