How to integrate media library?

Last update: April 12, 2024

Overview

This component gives you access to all the Oney marketing elements you may need to communicate on your website. You will be able to retrieve all Oney logos, banners, bubbles with monthly payments, tooltips, etc.

Client Side Loading

Loading All Media Keys

If you want to load the whole list of media keys for a country / language, you can integrate the following widget function:

let options = {
    country: "FR",
    language: "FR",
    successCallback: function (status, response) {
            // Handle success
            var keys = response.results;
    },
    errorCallback: function (status, response) {
        // Handle error
    }
};

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

The response.resulats object will give you the list of keys.

Loading Media by Keys

If you want to load a media by keys, please follow the following steps:

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.

   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 to load the Marketing Media. For this example, this is called loadMediaByKeys but can be changed to any desired name.

3. In the loadMediaByKeys function created in step 2, create a variable named options, with the following mandatory fields:

let options = {
    country: "FR",
    language: "FR",
    keys: ["key1", "key2"],
        successCallback: function (status, response) {
            // Handle success
            var keys = response.results;
    },
    errorCallback: function (status, response) {
        // Handle error
    }
};

4. In the loadMediaByKeys 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.loadMediaItemsByKey({ options });
});

5. The ‘options’ object should be extended with with the following fields:

• Success Callback
  It has to be 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, or the rendered HTML) with the details of the response

example of response

[
  {
    "key": "10xOney_CB",
    "value": "https://assets.oney.io/oney/2395a4c1-3234-4e7f-9be1-69a5c6ff2fee_france_10x_lessThan3000_charged.png?auto=compress,format",
    "description": "Oney Logo - 10xCB",
    "business_transaction": {
      "payment_method": "cards",
      "payment_method_type": "longtermcredit",
      "payment_mode": "10x",
      "is_free": false
    }
  },
  {
    "key": "10xOney_CB_free",
    "value": "https://assets.oney.io/oney/858645c9-bdd1-4cac-a428-a351ea71a191_france_10x_lessThan3000_free.png?auto=compress,format",
    "description": "Oney Logo - 10xCB - free",
    "business_transaction": {
      "payment_method": "cards",
      "payment_method_type": "longtermcredit",
      "payment_mode": "10x",
      "is_free": true
    }
  }
]

• Error Callback

  The errorCallback parameter is not mandatory.

  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.