Iframe Integration

❗️
BoomFi Card Ramp is being retired on 13 November 2025
The BoomFi Card Ramp will be sunset on 13 November 2025 as we streamline our product suite and focus on enhancing our core crypto payments infrastructure.
After this date, the Card Ramp will no longer be available for new or existing transactions. Merchants and partners currently using the feature are encouraged to complete or migrate any active payment flows before the sunset date to ensure a smooth transition.
Support for reconciliation and reporting of historical transactions will remain available through the BoomFi Dashboard and API until further notice. For assistance with migration or alternative on-ramp solutions, please contact your BoomFi account manager or reach out to [email protected]

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/" allow="camera; microphone"></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;
}

🚧
Camera and Mic Permissions
To complete the verification process directly you need to add the allow="camera; microphone" option. This enables the KYC (Know Your Customer) process via our third-party provider, Sumsub.
If camera and microphone permissions are not enabled, you can still proceed with the Continue on phone option to complete the verification on your mobile device.

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