Full Example

<form id="payment-form">
  <div id="card-element"></div>
  <button id="submit-btn" type="submit">Pay</button>
</form>

<script src="https://js.pagou.ai/payments/v3.js"></script>
<script>
  Pagou.setEnvironment("sandbox");

  const elements = Pagou.elements({
    publicKey: "pk_sandbox_your_public_key",
    locale: "en",
    origin: window.location.origin
  });

  const card = elements.create("card", { theme: "default" });
  card.mount("#card-element");

  document.getElementById("payment-form").addEventListener("submit", async (event) => {
    event.preventDefault();

    const result = await elements.submit({
      createTransaction: async (tokenData) => {
        const response = await fetch("/api/pay", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            token: tokenData.token,
            amount: 2490,
            installments: 1
          })
        });

        return response.json();
      }
    });

    console.log(result);
  });
</script>

app.post("/api/pay", async (req, res) => {
	const { token, amount, installments } = req.body;

	const response = await fetch("https://api-sandbox.pagou.ai/v2/transactions", {
		method: "POST",
		headers: {
			"Content-Type": "application/json",
			Authorization: `Bearer ${process.env.PAGOU_TOKEN}`,
		},
		body: JSON.stringify({
			external_ref: "order_2001",
			amount,
			currency: "BRL",
			method: "credit_card",
			token,
			installments,
			buyer: {
				name: "Ada Lovelace",
				email: "ada@example.com",
				document: {
					type: "CPF",
					number: "12345678901",
				},
			},
			products: [{ name: "Plan upgrade", price: amount, quantity: 1 }],
		}),
	});

	res.json(await response.json());
});