How to integrate checkout pop-in?

Last update: April 12, 2024

This section is mandatory and will be reviewed by our integration team in order to check if you meet credit legal requirements.

Getting started

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 Checkout section. For this example, this is called showCheckout but can be changed to any desired name.

   If the checkout section is not loaded with a button, but on page load, the function created can be called at any point in the merchant javascript.

3. Set the onclick function for the button that loads the Checkout section to the showCheckout function created in step 2 above.

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

1. In the showCheckout 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.loadCheckoutSection({ options });
   });
   

   The showCheckout function should look like the following sample:

   function showCheckout() {
       let options = {
           country: "FR",
           language: "FR",
           merchant_guid: "4ee34660-1659-4d8e-8849-544c46f4954b",
           payment_amount: 560.0,
           filter_by: "business_transaction_code",
           business_transaction_code: "3x005",
           checkout_placeholder: "#checkoutPlaceholder"
       };
   
       loadOneyWidget(function() {
           oneyMerchanApp.loadCheckoutSection({ options });
       });
   }
   

   Make sure the function names are input exactly.

   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 Checkout section (step 3 above) and it 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 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 given by Oney.
   Each object have different fields depending on your country.

The showOneyWidget function should look like the below sample:

let options = {        
    country: "FR",
    language: "FR",
    merchant_guid: "4ee34660-1659-4d8e-8849-544c46f4954b",
    payment_amount: 560.00,
    filter_by: "filters",
    filters: [
        {
            payment_mode: "3x",
            is_free: true
        }
    ],
    checkout_placeholder: "#checkoutPlaceholder"
};

• 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() {
    oneyMerchanApp.loadCheckoutSection({ 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.

hide_logo

hide_logo allows you to hide the Oney header to set the logo yourself. Valid boolean values = true or false

Full example

Sample with options for IT

<html>
    <head>
    </head>
    <body>
        <h2>Merchant Website</h2>
        <button onclick="showCheckout()">
            Load Checkout
        </button>
        <div id="checkoutPlaceholder"></div>
        <script type="text/javascript" src="https://assets.oney.io/build/loader.min.js"></script>
        <script>
            function showCheckout() {

                let options = {
                    country: "IT",
                    language: "IT",
                    merchant_guid: "dbbf2f7f-8d96-47e0-b8d8-0619a1c1f6d2",
                    payment_amount: 560.00,
                    filter_by: "business_transaction_code",
                    business_transaction_code: "3x005",
                    checkout_placeholder: "#checkoutPlaceholder"
                };

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

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