Contents x
    Step 1: Load Uplift payments
    • 23 Dec 2024
    • 2 Minutes to read
    • Dark
      Light
    Contents

    Step 1: Load Uplift payments

    • Updated on 23 Dec 2024
    • 2 Minutes to read
    • Dark
      Light
    Article summary

    Integration Details

    The first step involves loading the Uplift Payments library by executing the up.js code snippet included below, in your current working page; this is required for both payment and non-payment pages.

    The up.js is a snippet of javascript code that will asynchronously retrieve and load the Uplift library into a window object.

    Please ensure that the Uplift library (window.Uplift.Payments) is available throughout your flow; in certain instances such as multiple page applications, the library may be unavailable throughout the flow, in such cases, call up.js to load and make the Uplift library available again.

    (function (u, p, l, i, f, t, o, b, j) { u['UpLiftPlatformObject'] = f; u[f] = u[f] || function () { (u[f].q = u[f].q || []).push(arguments) }, u[f].l = 1 * new Date(); b = p.createElement(l), j = p.getElementsByTagName(l)[0]; b.async = 1; b.src = i + '?upcode=' + t; j.parentNode.insertBefore(b, j); o = u.location.host.match(/[\w-]+\.\w{2,3}(:\d+)?$/); if (o) o = o[0]; u[f]('create', t, o) })(window, document, 'script', 'https://tag.uplift.com/external/up.js', 'up', 'UP-XXXXXXXX-XX');

    Every up.js snippet is unique per partner with a specific UP-code. Customize the code above by replacing UP-XXXXXXXX-XX with your assigned UP-code.

    ⚠️ Note that you will be provided a separate UP-code for Testing and for Production prior to development. Also note that using the Testing (Developer) UP-code creates debug messages for your visibility, these will not be shown when using the Production UP-code.

    Step-by-step Validation Guide (Recommended)
    1. Execute the Up.js code with your unique Testing (Developer) UP-code on your working page. (Travel = UP-37292414-99; Retail = UP-37292414-94)
      (function (u, p, l, i, f, t, o, b, j) { u['UpLiftPlatformObject'] = f; u[f] = u[f] || function () { (u[f].q = u[f].q || []).push(arguments) }, u[f].l = 1 * new Date(); b = p.createElement(l), j = p.getElementsByTagName(l)[0]; b.async = 1; b.src = i + '?upcode=' + t; j.parentNode.insertBefore(b, j); o = u.location.host.match(/[\w-]+\.\w{2,3}(:\d+)?$/); if (o) o = o[0]; u[f]('create', t, o) })(window, document, 'script', 'https://tag.uplift.com/external/up.js', 'up', 'UP-37292414-99');

    2. Use your web browser developer tools to validate the website.
    3. Open the console and network tab filtering by Uplift within this tool.
    4. Refresh the page.
    5. Validate the following 3 elements in the image below.
      1. Filtering network calls by Uplift.
      2. Ensure the up.js executed successfully (200 OK status).
      3. UPREADY is undefined - don’t worry, this will be addressed in the next step.

      DP-1

    6. At this point, the Uplift snippet should load the Uplift library into the window object by creating window.Uplift.Payments. Let’s validate it.

      DP-2

      This validation ensures that your customized Up.js snippet is executing successfully, however there is still a piece missing, let’s follow to the next step.

    Was this article helpful?
    What's Next