Render the Hosted checkout

Starting a payment with LoanGlide on the web consists of creating a checkout form, tokenizing customer information securely and launching the LoanGlide checkout using the Checkout function.

This guide shows you how to include loanglide.js and use LoanGlide Checkout on your web page.

📘

Note:

To get the public api keys for sandbox and production environment, please contact LoanGlide at [email protected]
##Initialize
Set up loanglide.js
Include the following script in the <head> section on the index page of your website/application.

<!-- LoanGlide -->
<script>
 let lg_config = {
      api_key: "PUBLIC_API_KEY",
      script: "https://cdn.loanglide.com/stage/lib/loanglide.js",
};
(function (w, d, s, o, c, js, fjs) {w[o] = w[o] || {};(js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);js.src = c.script;
 js.async = 1;fjs.parentNode.insertBefore(js, fjs);w.lg_config = c;
})(window, document, "script", "loanglide", lg_config)
</script>
<!-- End LoanGlide -->

🚧

Note:

Make sure you include the production PUBLIC_API_KEY and https://cdn.loanglide.com/prod/lib/loanglide.js script URL to point to our production environment.

🚧

Note:

Use only your sandbox API keys and domain for testing and development. This ensures that you don't accidentally create live loan applications.

Promotional Messaging

  1. Add the following HTML element where you want to display LoanGlide promotional messaging. You can add promotional messaging to your category, product, cart or payment pages.
    <div
    className="lg-learn-more"
    data-business-id={businessId}
    data-loan-plan={loanPlanCode}
    data-amount={loanAmount}
></div>
    data-business-id (optional): Your business id. Please work with your LoanGlide sales representative to get your Business ID.
    data-loan-plan (optional): Loan plan code you want to use to calculate the minimum monthly payment for the specified amount. If this value is not passed in, minimum monthly payment will be 9 equal payments of the specified amount. Please obtain the Loan Plan Code by logging into your merchant portal or ask your LoanGlide Sales Representative for help.
    data-amount (required): Price of the catalog item.
1450

You can add promotional messaging to your category, product, cart or payment pages.

1587

You can add LoanGlide promotional messaging on your category page.

1986

You can add LoanGlide promotional messaging on your product page.

  1. Add code to handle price changes, the price displayed on your product or cart pages may change due to product variants, quantity changes, etc. If your promotional messaging displays before the price update, the messaging will be inaccurate. To keep messaging updated, implement this refresh function into your price change callback function:
    window.loanglide.ui.refresh()

Checkout

  1. Once you included the script above, a defined instance of loanglide will be created on your client. You will gain access to methods that are within the loanglide object to trigger multiples actions.

  2. LoanGlide checkout creation is the process in which a user uses LoanGlide to pay for a purchase on your page. You can create a checkout object and launch the LoanGlide checkout widget using the checkout function.

    let data = {
  borrower: {
      firstName: "John", 
      lastName: "Wick", 
      phoneNumber: "3185456266", 
      emailAddress: "[email protected]", 
      addressLine1: "220 Baker Street", 
      addressLine2: "Floor 7", 
      city: "San Francisco", 
      state: "CA", 
      zipCode: "95268"
  }, 
  loan: {
      amount: 7000
  }
}
// open the loanglide checkout widget
window.loanglide.checkout.open(data);

    To close checkout window, call this close function to return from checkout window:

    window.loanglide.checkout.close()

  3. Handle callbacks
    With initiating a checkout widget, you can attach listener for following events to get a response from LoanGlide. We send a loanApplicationId in the response of every event listener except loan-initated event. We also send status in response of on-widget-close event.

    • loan-initiated
    window.addEventListener("loan-initiated", function(event) { 
  //process further accordingly 
})
    • loan-submitted
    window.addEventListener("loan-submitted", function(event) { 
  let { loanApplicationId } = event.response;
  //process further accordingly 
})
    • loan-preapproved
    window.addEventListener("loan-preapproved", function(event) { 
  let { loanApplicationId } = event.response;
  //process further accordingly 
})
    • loan-approved 
    window.addEventListener("loan-approved", function(event) { 
  let { loanApplicationId } = event.response;
  //process further accordingly 
})
    • no-offers-found
    window.addEventListener("no-offers-found", function(event) { 
  let { loanApplicationId } = event.response;
  //process further accordingly 
})
    • loan-rejected
    window.addEventListener("loan-rejected", function(event) { 
  let { loanApplicationId } = event.response;
  //process further accordingly 
})
    • on-widget-close
    window.addEventListener("on-widget-close", function(event) { 
  let { loanApplicationId, status } = event.response;
  //loanApplicationId will not be available until loan is submitted. 
})
    • VOIE (Verification of Income and Employement) event
    window.addEventListener("loan-in-voie", function(event) { 
  let { loanApplicationId, status, voieType } = event.response;
  //process further accordingly 
})

  4. To handle events on unsupported addEventListener browsers, add a native LoanGlide events listener. For example, you can handle loan-submitted event with a native events as:

    window.loanglide.events.on("loan-submitted", function(response) { 
 let { loanApplicationId } = response;
 //process further accordingly  
})

    Native LoanGlide events are also available for events callbacks such loan-initiated, loan-approved and others.