GoHighLevel

async function createCheckout(env) {
  const res = await fetch("https://test.dodopayments.com/checkouts", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${env.DODO_PAYMENTS_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      product_cart: [{ product_id: "pdt_your_product_id", quantity: 1 }],
    }),
  });

  const data = await res.json();
  return { checkoutUrl: data.checkout_url };
}

<!-- Load the Dodo Checkout SDK -->
<script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
<script>
  DodoPaymentsCheckout.DodoPayments.Initialize({
    mode: "test", // change to "live" in production
    displayType: "overlay",
    onEvent: (event) => console.log("Checkout event:", event),
  });

  async function openDodoCheckout() {
    // calls the backend endpoint from the previous step, creating a fresh session per click
    const res = await fetch("https://api.example.com/create-checkout", { method: "POST" });
    const { checkoutUrl } = await res.json();

    DodoPaymentsCheckout.DodoPayments.Checkout.open({ checkoutUrl });
  }
</script>

<button onclick="openDodoCheckout()">Pay Now</button>

<script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>

<div id="dodo-inline-checkout"></div>

<script>
  DodoPaymentsCheckout.DodoPayments.Initialize({
    mode: "test",
    displayType: "inline",
    onEvent: (event) => console.log("Checkout event:", event),
  });

  async function mountDodoCheckout() {
    // calls the backend endpoint from the previous step
    const res = await fetch("https://api.example.com/create-checkout", { method: "POST" });
    const { checkoutUrl } = await res.json();

    DodoPaymentsCheckout.DodoPayments.Checkout.open({
      checkoutUrl,
      elementId: "dodo-inline-checkout",
    });
  }

  mountDodoCheckout();
</script>