Skip to main content
Payment Element is Pagou’s recommended browser integration for new card checkouts. It combines:
  • hosted card fields inside a secure iframe
  • browser-side tokenization
  • built-in support for next_action continuation
  • a clean handoff to your backend for POST /v2/transactions

​
When to use it

Use Payment Element when:
  • you are building a new card checkout
  • you are replacing a legacy browser tokenization flow
  • you need 3DS handling in the same customer session
  • you want your backend to keep full control of transaction creation and order state

​
Integration model

Payment Element does not replace your backend. It narrows the browser’s job to secure card entry and submit orchestration.

​
What the browser does

  • initializes Pagou
  • mounts the card field
  • submits through elements.submit(...)
  • continues next_action if required
  • shows pending, success, or retry messaging

​
What the backend does

  • authenticates with your secret Pagou credentials
  • creates the transaction
  • stores transaction IDs and order references
  • processes webhook events
  • decides when an order is actually paid

​
Core APIs

The current browser surface is: 
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" });

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

​
Operating rules

  • preserve id, status, and next_action in the backend response
  • do not fulfill from the browser response alone
  • keep the order pending until webhook or reconciliation confirms final state
  • reconcile uncertain results with GET /v2/transactions/{id}

​
Start here