Add The Direct Lending Selector

This is feature was develop to enable merchants and platforms to present different payment options within their OWN Checkout page (vs the ChargeAfter modal).
Build dynamically, it will also allow to present more and more options automatically by adding those new lenders to the ChargeAfter platform, without any additional line of code.

In case where a merchant would like to present the list of available direct lenders within their own checkout (Lenders who are not only presented within a standard waterfall), this option should be implemented.

The getDirectLenders function enables to retrieve the appropriate data to display those lenders as a direct option to the consumer.
This is usually the case while the lenders available are BNPL lenders with a high consumer financing brand.

Implementation:
The getDirectLenders() function should be called in order to retrieve the list of lenders outside of the waterfall (also called direct lenders).

ChargeAfter.getDirectLenders() : Promise<DirectLender[]>

API Response
The response of the getDirectLenders function is an array of Lender objects, including the following parameters:

  • id - This is the lender identification number within the ChargeAfter platform. This id will be use in order to display the Checkout UI directly with this specific lender
  • name - Display name of the merchant
  • buyerType - Finance type of the merchant. "Consumer" will be return in case where the lender is proposing financing for individuals. "Organization" will be return in case where the lender is proposing financing for businesses.
  • title - This is the text or description of the lender. It should be display below the lender name.
  • logo - This is the link to the logo of the merchant
type DirectLender = {
    id: string; // the lender id 
    name: string; // the lender name
    buyerType: 'Consumer' | 'Organization'; // the lender finance type
    title?: string; // lender title to show on the payment option may be undefined
    logo: string; // the lender logo
}

Load Checkout UI

When the consumer clicks on a specific payment option, the ChargeAfter modal should be triggered and should open the flow of the lender selected.
Using the lender id previously retrieved, merchant can now launch the Checkout UI by using this id within the present() API call and open the modal directly to this selected lender.

ChargeAfter.checkout.present({
    consumerDetails: {...},
    cartDetails: {...},
    ...
   
    // This parameter is OPTIONAL. The id here is the lender id and this is used to load the Checkout UI directly to a specific lender
   lenderId : XXXXXXXXX,

})

📘

NOTE

This function is applicable for CHECKOUT ONLY mode