How to integrate the simulation pop-in?

Last update: April 12, 2024

Getting started

These parameters can be added to the ‘options’ object above and will be displayed exactly as passed in.

1 - Add a script tag linking to the loader javascript file found at: “loader.min.js“ (187 bytes) in the page where the Simulation Popin is to be displayed. You can remove the "-staging" part in the URL for Production environment.

Example:

<script type="text/javascript" src="https://assets-staging.oney.io/build/loader.min.js"></script>

2 - In your javascript create a function that will be called on click of the button to load the Simulation popin. For this example, this is called showOneyWidget but can be changed to any desired name.

3 - Set the onclick function for the button that loads the Oney Simulation Popin to the showOneyWidget function created in step 2 above.

4 - In the showOneyWidget function created in step 2, create a variable named options, with the following mandatory fields:

let options = {        
  country: "IT",
  language: "IT",
  merchant_guid: "678e2eaa-b73d-4dd6-aa4f-7b712d9566e4",
  payment_amount: 560.00
};

5 - In the showOneyWidget function created in step 2, include the following call to the loadOneyWidget function which is found in the “loader.min.js” file included in step 1 above:

loadOneyWidget(function () {
  oneyMerchantApp.loadSimulationPopin({ options });
});

The showOneyWidget function should look like the following sample:

function showOneyWidget() {
  let options = {        
    country: "IT",
    language: "IT",
    merchant_guid: "678e2eaa-b73d-4dd6-aa4f-7b712d9566e4",
    payment_amount: 560.00
  };

  loadOneyWidget(function () {
    oneyMerchantApp.loadSimulationPopin({ options });
  });
}

6 - You can now click on the button to show the Oney Simulation Popin (step 3 above) and the layer should display.

Country-specific parameters

These parameters can be added to the ‘options’ object above and will be displayed exactly as passed in.

• France
• Romania
• Portugal

Advanced configuration

The options object created above can be expanded to filter a transaction by payment method:

Filtering by using the payment method

1. The parameter filter_by is added to the options object with the value filters.

2. The parameter filters is added to the options object with a list of objects each representing a unique business transaction.
   Each object has different fields to fill.

The showOneyWidget function should look like the below sample:

function showOneyWidget() {
    let options = {        
        country: "IT",
        language: "IT",
        merchant_guid: "678e2eaa-b73d-4dd6-aa4f-7b712d9566e4",
        payment_amount: 560.99,
        filter_by: "filters",
        filters: [
            {
                "payment_method":"bnpl",
                "payment_method_type":"split",
                "payment_mode":"4x", 
                "with_down_payment":"true",
                "is_free":false
            },

            {
                "payment_method":"bnpl",
                "payment_method_type":"split",
                "payment_mode":"10x",
                "with_down_payment":"true",
                "is_free":true
            }
        ]
    };

    loadOneyWidget(function () {
        oneyMerchantApp.loadSimulationPopin({ options });
    });
}

• Belgium
• France
• Italy
• Portugal
• Romania
• Spain

Error Callback

The options object can be expanded to receive a response that can be handled by the developer when something goes wrong. This will be especially useful when setting up, or to have the possibility to log errors.

The correct value to pass in is a function accepting two parameters:

• status
  An integer with the HTTP status code of the response

• response
  A string (which can be a stringified JSON object) with the details of the response

The errorCallback function will look something like the following example:

...
options.errorCallback = function (status, response) {
    console.log(status + " - " + response);
}

loadOneyWidget(function () {
    oneyMerchantApp.loadSimulationPopin({ options });
});

In this case, the only action being performed is outputting the error to the console, but this can be changed to fit your needs

Full example

<html>
    <head></head>
    <body>
      <h2>Merchant Website</h2>
      <button onclick="showOneyWidget()">
        Load simulation popin
      </button>
      <script type="text/javascript" src="https://dsstgintmkthub.z6.web.core.windows.net/build/loader.min.js"></script>
      <script>
        function showOneyWidget () {

          let options = {        
            country: "ES",
            language: "ES",
            merchant_guid: "177637a4-917f-4010-b259-736b33dfa75f",
            payment_amount: 560.00
          };

          loadOneyWidget(function () {
            oneyMerchantApp.loadSimulationPopin({ options });
          });
        }
      </script>
    </body>
</html>