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

  1. <!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 about 13 hours ago