Skip to main content
Use this page for the smallest working Payment Element integration.

​
Prerequisites

  • a Pagou public key
  • a backend route that creates POST /v2/transactions
  • webhook handling for final payment state

​
Load the script

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

​
Mount the field

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");

​
Submit through your backend

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,
        orderId: "order_2001",
      }),
    });

    const payload = await response.json();
    return payload.data ?? payload;
  },
});

​
Backend request example

{
  "external_ref": "order_2001",
  "amount": 2490,
  "currency": "BRL",
  "method": "credit_card",
  "token": "pgct_token_from_browser",
  "installments": 1
}

​
Backend response example

{
  "success": true,
  "requestId": "req_4002",
  "data": {
    "id": "tr_2001",
    "status": "pending",
    "method": "credit_card"
  }
}

​
Common error

{
  "status": "error",
  "error": "Unable to initialize the card field."
}
Fix: confirm the public key, origin, and script environment. Your backend must return the transaction payload without dropping fields such as id, status, and next_action.

​
Next steps