Skip to main content

Overlay mode/ IFrame

Integrate Lunu's payment technology into your app with ease using our SDK. Choose this integration mode to display Lunu as an overlay on your web app or iFrame view, and trigger the display of Onramp as needed with basic configuration. Maintain the look and feel of your brand with high levels of customization and control. Provide your users with a seamless and intuitive payment experience that is fully integrated into your app by choosing this integration mode

Prerequisite​

The partner/retailer must follow the authentication process by making a request to /f2c/v1/customer/init API endpoint with the required parameters, such as customer_external_id and access token, before initiating the overlay.

Simply copy the code and edit according to your need!

<script>
(function(d, t) {
    var n = d.getElementsByTagName(t)[0], s = d.createElement(t);
    s.type = 'text/javascript';
    s.charset = 'utf-8';
    s.async = true;
    s.src = 'https://f2c.lunu.io/iframe.js?t=' + 1 * new Date();
    s.onload = function() {

    // Widget initialization
    const widget = new window.Lunu.widgets.Replenishment({
        baseUrl: 'https://f2c.lunu.io', // widget base url; default: https://f2c.lunu.io
        params: {
        // basic parameters 
        // you can find all available parameters below the code block
        id: '24301ae5-000f-5000-9000-13f5f1c2f8e0', // REQUIRED customer_id (F2C customer ID)
        merchant_trx_id: '24301ae5-000f-5000-9000-13f5f1c2f8e0', // transaction id in your system
        merchant_redirect_url: 'https://site.com', // url for redirect on the final step 
        },
        onClose() {

        // Handling the widget close event by the user
        },
    });

    // widget.remove();
    };
    n.parentNode.insertBefore(s, n);
})(document, 'script');
</script>

Avalilable parameters​

  • id
    • required: yes;
    • default: undefined;
    • type: string (UUID);
    • description: userID from lunu database;
  • merchant_trx_id
    • required: no;
    • default: undefined;
    • type: string (UUID);
    • description: transaction id from merchant database;
  • merchant_redirect_url
    • required: no;
    • default: undefined;
    • type: string (URL);
    • description: if this parameter is preset customer will see the button with redirect function after the payment will be marked as successfull;
  • widget_type
    • required: no;
    • default: deposit;
    • type: string, one of:
      • payment;
      • deposit;
    • description: flow that widget will lead user;
  • fiat_amount
    • required: if "widget_type" is "payment" and you want user to perform operation based on fiat amount - required, else - no.
    • default: undefined;
    • type: string (number);
    • description: default amount of fiat;
  • crypto_amount
    • required: if "widget_type" is "payment" and you want user to perform operation based on crypto amount - required, else - no.
    • default: undefined;
    • type: string (number);
    • description: default amount of crypto;
  • fiat_code
    • required: if "widget_type" is "payment" - required, else - no.
    • default: undefined;
    • type: string, one of:
      • USD;
      • EUR;
      • GBP;
      • PLN;
      • DKK;
      • NOK;
      • CZK;
      • SEK;
      • AUD;
      • CAD;
    • description: default code of crypto;
  • crypto_code
    • required: if "widget_type" is "payment" - required, else - no.
    • default: undefined;
    • type: string, one of:
      • USDT;
      • USDC;
    • description: default code of crypto;
  • default_method
    • required: no;
    • default: undefined;
    • type: string, one of:
      • creditCard
      • applePay
      • googlePay
      • sofort
      • iDeal
      • bancontact
      • description: preset for payment method. Could be set to skip 'paymentMethod' step so user wouldn't change it;
  • card_type
    • required: if "default_method" is "creditCard" - required, else - no;
    • default: undefined;
    • type: string, one of:
      • mastercard
      • Visa
    • description: type of payment card;
  • external_email
    • required: no;
    • default: undefined;
    • type: string (email);
    • description: preset for user email that requires at authorization|registration step. Could be set to skip 'checkout' step;