Documentación

Payment Widget via URL / Iframe

Suggest Edits

Payment Widget via URL / Iframe (no recomendado)

Puedes renderizar el Vault Widget dentro de un Iframe o en un tab completo, en caso de que no puedas usar los SDKs.

Para esto, el comercio debe seguir los siguientes pasos:

1. Crea una orden

Crea una orden mediante el endpoint Crear Orden.

La respuesta contiene un order_token que se usa en el proceso de compra.

2. Renderiza el widget:

Renderiza el Widget en tu aplicación usando el orden_token:

3. Escucha eventos del Widget

Para escuchar los eventos del widget usa la siguiente librería: https://github.com/krakenjs/zoid.

📘

Usa la librería se usa para una mejor administración y seguridad de la comunicación vía postMessages.

Ejemplo de snippet

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Document</title>
       <script src="zoid.js"></script>
       <style>
         body {
           text-align: center;
         }
       </style>
     </head>
     <body>
       <div id="payment-widget" style="margin: auto"></div>

       <script>
         function buildPaymentLink(orderToken, env) {
           var baseUrl = "https://pay.deuna.com";

           switch (env) {
             case "production":
               baseUrl = "https://pay.deuna.com";
               break;
             case "sandbox":
               baseUrl = "https://pay.sandbox.deuna.com";
               break;
           }

           return baseUrl + "/now/" + orderToken;
         }

         const PaymentWidgetComponent = zoid.create({
           tag: "d-una-checkout",
           url: buildPaymentLink(
             "e7bdb89c-b277-44f6-8df4-b0bea4ad6aca",
             "sandbox"
           ),
           dimensions: {
             width: "450px",
             height: "100dvh",
           },
         });

         PaymentWidgetComponent({
           timeout: 7000,
           onRendered: () => {},
           onEventDispatch: (event) => {
             const type = event.type;
             const data = event.data;

             const mapper = {
               purchaseError: () => {
                 console.log("purchase failed");
               },
               purchase: () => {
                 console.log("purchase successful");
               },
               onBinDetected: () => {
                 if (data.metadata) {
                   console.log("cardBin", data.metadata.cardBin);
                 }
               },
               onInstallmentSelected: () => {
                 if (data.metadata) {
                   console.log("onInstallment", data.metadata);
                 }
               },
             };

             mapper[type]?.(); // Call the handler based on event type
           },
         })
           .render("#payment-widget")
           .catch((error) => {});
       </script>
     </body>
   </html>

Updated 16 days ago