Embedded Payment widget

Payment widget via URL / Iframe

Render the Vault Widget inside an Iframe or in a full tab, in case you can't use the SDKs.

To do this, follow these steps:

1. Create an order

Create an order using the Create Order endpoint.

The answer contains a order_token which is used in the purchasing process.

2. Render the widget:

Render the Widget in your application using the orden_token:

Sandbox: https://pay.sandbox.deuna.io/now/{{order_token}}
Production: https://pay.deuna.io/now/{{order_token}}

3. Listen to widget events

To listen to widget events use the following library: https://github.com/krakenjs/zoid .

📘
Use the library for better management and security of communication via postMessages.

Example 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>

🚧
Use the onResize function must be implemented for all embedded integrations (Cards, APMs, or 3DS). This ensures the component height adjusts dynamically to the content. You can find more information in Adjust container height.