How to integrate the pedagogic 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. Remove the "-staging" part of 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 Pedagogic 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
};

1. 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.loadPedagogicPopin({ 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.loadPedagogicPopin({ options });
     });
   }
   

   Make sure the function names are input exactly.

   If no filter is provided, all paid business transactions are mentioned in the legal text.

   The ‘options’ variable is mandatory, and the fields in the above sample are all mandatory.

2. You can now click on the button to show the Oney Pedagogic 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 for specific business transaction in one of two ways:

Filtering by Business Transaction Codes

1. The parameter ‘filter_by’ is added to the ‘options’ object with the value "business_transaction_codes”.

2. The ‘business_transaction_codes’ parameter is added to the ‘options’ object with a list of strings each representing a unique business transaction code given by Oney.

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: "business_transaction_codes",
    business_transaction_codes: [
        "3x005"
    ]
    };

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

Filtering by using Filters

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 have different fields depending on your country.

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":"10x",
                "with_down_payment":"true",
                "is_free":true
  }
        ]
    };

    loadOneyWidget(function () {
        oneyMerchantApp.loadPedagogicPopin({ 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.loadPedagogicPopin({ 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.loadPedagogicPopin({ options });
          });
        }
      </script>
    </body>
</html>