Integration Details

A) Configuring Flex Pay Agent Initialization

Recall, during the Step2: Initialize Uplift Agent Connect, we defined a callback handler (with the key: onChange) 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 Flex Pay application/payment session (such as customer approved for Flex Pay offer, Flex Pay ready to pay in full etc.).

This method will let you know if Pay Monthly is available for the customers’ current order, any change in session status, or if Flex Pay is ready to pay you in full! This method takes one parameter in the form of key-value pairs.

Define the method as shown below (showcasing the possible response statuses). We will handle how to use the content of this response in the next steps.

function myOnChangeHandler(response) {
  var statusHandlers = {
    OFFER_AVAILABLE: function() {
      // STATUS: Flex Pay offer is available
      // 1. show and enable payment selectors
      // 2. disable Purchase/Book button
      // 3. store tripId (if exists) returned in response
      const {tripId} = response;
    },
    TOKEN_AVAILABLE: function() {
      // STATUS: Flex Pay is ready to pay, guest confirmed for loan
      // 1. show and enable payment selectors
      // 2. enable Purchase/Book button
      // 3. retrieve the token (.getToken()) after book button click
    },
    TOKEN_RETRIEVED: function() {
      // STATUS: Token is available to be charged for payment
      const {token} = response;
    },
    OFFER_UNAVAILABLE: function() {
      // STATUS:  Pay monthly offer is unavailable for this client
      // 1. show and disable payment selectors
      // 2. clear any existing tripId for this session (response will be null)
    },
    SERVICE_UNAVAILABLE: function() {
      // STATUS:  Flex Pay 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": { 
     //OFFER_AVAILABLE: valid content, OFFER_UNAVAILABLE: empty, rest: undefined
     monthlyPaymentAmount: Number //Estimated offer (in minor units/cents)
     disclaimerText: String       //Marketing Banner disclaimer text
   },
  "trip_id": "string|null",     //OFFER_AVAILABLE: id for specific trip, OFFER_UNAVAILABLE: NULL
  "reasons": "array|null", //OFFER_AVAILABLE: array of codes, OFFER_UNAVAILABLE: NULL
  "token": "object|null"   //Flex Pay virtual card that the merchant can use to process payment
}

📘 For more detailed explanation, refer to the following documentation: payment status, token key and error codes.

⚠️ Note that we will add more elements to this function in the following steps and additional components to enable this integration (and if you test at this point, it may result in an error due to missing components mentioned in following steps).