Step 4: Define callback handler

Integration Details

Recall, during Step 2: Uplift library initialization for Payment Page, we defined a callback handler as one of the key-values to handle any callbacks in the payment page. Here we will define this method that will be called in case of any change in the Uplift application/payment session (e.g. customer is approved from Uplift’s payment application).

This method will let you know if Pay Monthly is available for current order, if the user has completed the Uplift Pay Monthly flow, or if Uplift is ready to pay you in full!

Define the method as shown below (showcasing the possible response statuses).

function myOnChangeCallback(response) {
   var statusHandlers = {
      OFFER_AVAILABLE: function(){
        // STATUS: Uplift Pay Monthly Offer is available for this orderInfo
        // 1. show payment selectors
        // 2. show monthly pricing node in the selector
        // 3. hide "NOT AVAILABLE" node in the selector
        // 4. enable Pay Monthly selector
        // 5. disable Purchase/Book button
      },
      TOKEN_AVAILABLE: function(){
        // STATUS: Uplift application has been completed and Uplift is ready to pay
        // 1. show payment selectors
        // 2. enable Pay Monthly selector
        // 3. enable Purchase/Book button
          
        // The virtual card should be retrieved when user clicks the Purchase/Book button
      },
      TOKEN_RETRIEVED: function(){
        // STATUS: Token is available to be charged for payment
        // Uplift Payment Token successfully retrieved.
        // 1. utilize the retrieved token (virtual card) to pay in full by Uplift.
      },
      OFFER_UNAVAILABLE: function(){
        // STATUS:  Pay monthly offer is unavailable for this orderInfo
        // 1. show payment selectors
        // 2. show "NOT AVAILABLE" node in the selector
        // 3. hide monthly pricing node in the selector
        // 4. disable Pay Monthly selector
        // 5. change payment option selection, if Pay Monthly option is selected
      },
      SERVICE_UNAVAILABLE: function(){
        // STATUS:  Uplift API is unavailable
        // 1. do not show payment selectors
      }
   };
   statusHandlers[response.status]();
}

The callback method’s response is expected to have the following format.

{
  "status": "string",      //Current step in the Uplift application flow  
  "offer": "object",       //Details on estimated offer based on order details
  "reasons": "array|null", //OFFER_AVAILABLE: array of codes,
                           //TOKEN_RETRIEVED: array of codes,
                           //OFFER_UNAVAILABLE: NULL
  "token": "object|null"   //Uplift virtual card that the merchant can use to process payment
}