Payment Status

Flex Pay Web API Integration (Payments)

The table below provides guidance regarding when certain elements in the Flex Pay Web API Integration should be enabled/shown on your website during the checkout process based on the response provided by Flex Pay integration in the Callback handler as the customer completes their payment application.

Additionally, the last column of the table (Token sent) describes key information for when the token is available in order for you to charge the virtual card.

Using this information, we have provided a template of the updated callback handler for your reference below, complete with the expected responses and actions as the customer completes their Flex Pay application and the corresponding payment process.

function myOnChangeCallback(response) {
   var statusHandlers = {
      OFFER_AVAILABLE: function(){
        // STATUS: Flex Pay 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: Flex Pay application has been completed and Flex Pay is ready to pay
        // 1. show payment selectors
        // 2. enable Pay Monthly selector
        // 3. enable Purchase/Book button
        // 4. retrieve the token ONLY AFTER Purchase/Book button is clicked
        // using: window.Uplift.Payments.getToken();
          
        // 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
        // Flex Pay Payment Token successfully retrieved.
        // 1. utilize the retrieved token (virtual card) to pay in full by Flex Pay.
      },
      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:  Flex Pay API is unavailable
        // 1. do not show payment selectors
      }
   };
   statusHandlers[response.status]();
}

Flex Pay Agent Connect

The table below provides guidance regarding when certain elements in the Flex Pay Agent Connect should be enabled/shown on your website during the checkout process based on the response provided by Flex Pay integration in the callback handler as the customer completes their payment application.

Additionally, the last column of the table (Token sent) describes key information for when the token is available in order for you to charge the virtual card.

Using this information, we have provided a template of the updated callback handler for your reference below, complete with the expected responses and actions as the agent's client completes their Flex Pay application and the corresponding payment process.

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. show monthly pricing (from response) in the selector
      // Note: the pricing is in minor units (cents)
      // 4. store tripId (if exists) returned in response
      // 5. show disclaimer text (from response) using tool tip UI
      const {offer, tripId} = response;
      const {disclaimerText, monthlyPaymentAmount} = offer;
    },
    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. show "NOT AVAILABLE" messaging in the selector
      // 3. hide monthly pricing node in the selector
      // 4. 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]();
}