Documentación

Embedded Payment Widget

Suggest Edits

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>

Updated 3 days ago