How to integrate QR code simulator?

Last update: November 10, 2023

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" 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 generate the QR Code Popin. For this example, this is called “showQRCode” but can be changed to any desired name.

3. Set the ‘onclick’ function for the button that loads the generate the QR Code Popin to the ‘showQRCode’ function created in step 2 above.

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

   • size
     Number to represent size of QR code in pixels

   • padding
     Number to represent whitespace around QR code in pixels

   • country
     Merchant Country code in ISO 3166-1 alpha-2 format

   • language
     Merchant Language code in ISO 3166-1 alpha-2 format

   • merchant_guid
     Merchant global unique identifier given by Oney to the partner

   let options = {
      size: 250,
      padding: 10,
      country: "FR",
      language: "FR",
      merchant_guid: "4ee34660-1659-4d8e-8849-544c46f4954b"
   };
   

5. In the ‘showQRCode’ function created in step 2, include the following call to the generateQRCode function which is found in the “loader.min.js“ file included in step 1 above:

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

   Sample generateQRCode call for easier integration

   The showQRCode function should look like the following sample:

   function showQRCode() {
       let options = {
       size: 250,
       padding: 10,
       country: "FR",
       language: "FR",
       merchant_guid: "4ee34660-1659-4d8e-8849-544c46f4954b"
       };
   }
   loadOneyWidget(function () {
       oneyMerchantApp.generateQRCode({ options });
   });
   

   Make sure the function names are input exactly.

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

6. You can now click on the button to show the generate the QR Code Popin (step 3 above) and the layer should display.