Guides

Iframe Integration

Suggest Edits

Integrating BoomFi's Card Ramp via iFrame allows you to embed the ramp functionality directly into your application. This approach minimizes the need for complex configurations and provides a seamless user experience. The iFrame method is ideal for quick integration and maintains a clean and consistent interface within your application.

🚧

Whitelist

BoomFi must whitelist your domain before using Card Ramp in an iframe. Please contact BoomFi's Support to request your whitelisting.

How to Integrate

To integrate BoomFi's Card Ramp into your application, you need to configure the https://swap.boomfi.xyz/ URL, then add this configured URL to an iframe component into your HTML.

📘

Configuring the Card Ramp URL

To learn what you can configure in the URL, refer to the Configure Your Card Ramp page.

To embed BoomFi's Card Ramp using iFrame, you can use the following HTML snippet:

<div class="iframe-container">
  <iframe src="https://swap.boomfi.xyz/"></iframe>
</div>

.iframe-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.iframe-container iframe {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  width: 420px;
  height: 540px;
}

Adding this code into your HTML will present a result as follows:

Adding an Event Listener

Using event listeners allows your application to respond dynamically to the status of transactions within the iFrame. By listening for messages from the iFrame, you can provide real-time feedback to your users. The following code snippet is a suggestion on how to apply this:

window.addEventListener(
  "message",
  (event: MessageEvent) => {
    if (event.origin !== "https://swap.boomfi.xyz") {
      return;
    }

    // Use event.data
    switch (event.data.status) {
      case "pending":
        // Handle pending status
        console.log("Transaction is pending");
        break;
      case "failed":
        // Handle failed status
        console.log("Transaction failed");
        break;
      case "success":
        // Handle success status
        console.log("Transaction successful");
        break;
    }
  },
  false
);

The event above from BoomFi will have a payload, where in the example, the event.data.status property is accessed to handle each case. Below is an example of a payload you will find when receiving this event:

{
  "data": {
    "id": "2ieU2MDpE0AxK8n0501xToOHs5d",
    "parent_id": "",
    "org_id": "2Tpmnmh6GHJXumKN1oBy2u56Ima",
    "amount": "100",
    "currency": "EUR",
    "invoice_id": "",
    "source": "BoomFi",
    "payment_method": "Ramp",
    "customer_id": "2f02b8uYRvksofOnd2Pn1Rlyeqm",
    "status": "RequiresAction",
    "next_action": "pay_2ieU2FNcx300EdVVbG8nw2okFkv",
    "scheduled_time": 0,
    "created_at": "2024-07-01T16:12:07.112Z",
    "updated_at": "2024-07-01T16:12:07.401Z",
    "customer": {
      "id": "2f02b8uYRvksofOnd2Pn1Rlyeqm",
      "org_id": "2Tpmnmh6GHJXumKN1oBy2u56Ima",
      "name": "",
      "email": "[email protected]",
      "phone": "",
      "wallet_address": "",
      "deleted_at": null,
      "reference": "user-test-0da23b11-1692-40a8-9ca4-3b974f5747de",
      "metadata": "e30=",
      "properties": "e30=",
      "v1": "e30=",
      "created_at": "2024-04-12T12:09:02.905Z",
      "updated_at": "2024-04-12T12:09:02.905Z"
    },
    "properties": {
      "amount_usd": "107.2261879306286",
      "ramp": {
        "buy_currency": "USDC",
        "buy_currency_amount": "95.9",
        "buy_token": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
        "buy_token_chain_id": 1,
        "customer_payment_method": "Card",
        "customer_settlement_address": "0x844Acef789989Cb6E21E0F07DD4e894709f92F96",
        "fees": {
          "boomfi_fee": "1",
          "fee_ccy": "EUR",
          "network_fee": "5.61569026275441533820131343",
          "total_fee": "6.61569026275441533820131343"
        },
        "rate": "1.0269",
        "sell_currency": "EUR",
        "sell_currency_amount": "100"
      },
      "test_mode": true
    }
  }
}

Updated 4 months ago