Método 2
Checkout Modal & Embutido (Frontend SDK)
Mantenha o cliente no seu domínio durante todo o processo. O modal sobreposto ou o iframe responsivo abre diretamente na sua loja, com comunicação segura via postMessage.
O SDK pode apresentar o checkout num modal ou num iframe embutido. Use os callbacks para actualizar a interface; confirme o resultado do pagamento por webhook ou consulta server-to-server.
Fluxo de Sequência Técnica
Passo 1: Criar a Intenção no Seu Servidor (Backend)
O valor e a moeda devem ser fixados no servidor para evitar manipulação de preços no cliente. Retorne o token gerado para o frontend:
Backend (Node.js / TypeScript)
// 1. Backend Server (Node.js / Express / Next.js API Route)
import { EDPayClient } from "@edutecka-mz/edpay-sdk";
const edpay = new EDPayClient({
publicKey: process.env.EDPAY_PUBLIC_KEY!,
privateKey: process.env.EDPAY_PRIVATE_KEY!, // Secret server key
});
export async function POST(req: Request) {
const { cartId, amount } = await req.json();
// Create payment intent securely on backend
const payment = await edpay.payments.create({
amount: amount, // e.g.: 1500
currency: "MZN",
reference: "ORD-" + cartId,
customer: {
phone: "+25884xxxxxxx",
},
});
// Return public session token to the browser
return Response.json({
token: payment.data.token,
paymentUrl: payment.data.payment_url,
});
}Passo 2: Abrir o Modal de Pagamento no Frontend
Carregue o script do EDPay e invoque edpay.checkout() com a sua Chave Pública:
Frontend (HTML & JavaScript)
<!-- 1. Load official SDK on your frontend page -->
<script src="https://pay.edutecka.com/v1/edpay.js"></script>
<script>
// 2. Initialize with safe Public Key
const edpay = new EDPay({
publicKey: "pk_live_019283019283abcdef", // Public Key (Frontend safe)
});
async function handlePayment() {
// 3. Obtain token generated by your backend server
const res = await fetch("/api/checkout", { method: "POST" });
const { token, paymentUrl } = await res.json();
// 4. Mount interactive checkout modal overlay
edpay.checkout({
token: token,
mode: "modal", // 'modal' opens popup overlay; 'embedded' renders inside div
onSuccess: function(payment) {
console.log("Payment approved:", payment);
window.location.href = "/orders/success";
},
onError: function(err) {
console.warn("Payment error or cancelled:", err);
},
onClose: function() {
console.log("Modal closed by user");
}
});
}
</script>Alternativa: Renderização Embutida (Embedded Iframe)
Se preferir embutir a interface de pagamento diretamente dentro de uma coluna ou div da sua página sem popup:
Frontend Embedded
// Embedded mode (mounts inside a <div> container on your page)
edpay.checkout({
token: token,
mode: "embedded",
container: "payment-container", // DOM container ID
width: "100%",
height: "640px",
onSuccess: (payment) => {
// Handle approved payment
}
});Parâmetros de Configuração do Frontend SDK
| Parâmetro | Tipo | Padrão | Descrição |
|---|---|---|---|
| token | string | — | Token público da sessão retornado por POST /v1/payments. |
| mode | "modal" | "embedded" | "modal" | Modo de apresentação visual no navegador. |
| container | string | HTMLElement | — | ID do elemento DOM para injetar o iframe (obrigatório se mode='embedded'). |
| onSuccess | function(payment) | — | Callback executado quando a cobrança é aprovada com sucesso. |
| onError | function(error) | — | Callback executado em caso de recusa ou falha técnica. |
| onClose | function() | — | Callback executado quando o cliente fecha o modal manualmente. |