Step 6: Receive payment

Integration Details

Once, the user has goes through the Flex Pay application through the iFrame, there are two potential outcomes:

1. Adverse action (the user has not been approved), in such a case:
   1. The iFrame will display a message to the user suggesting completing the purchase with an alternate payment method.
   2. The payment selector will remain enabled, however the user will be unable to continue with the Flex Pay application.
   3. The callback handler will not trigger a status change and it will remain as OFFER_AVAILABLE. Due to compliance reasons we are unable to share the specific status of the loan application. An example of an adverse action on the iFrame will look like the image below.

      

      Note: In the image above, for travel partners, if an applicant is declined then they will be prompted with a button to start a fresh application for a new user.

2. Successful application (the user has been approved), in such a case:
   1. The callback handler will fire a TOKEN_AVAILABLE status signaling that a token object (containing the details of Flex Pay virtual card similar to any bank card) is available for the merchant to process your payment.
      
      ⚠️ Make sure to obtain the available token ONLY AFTER the user clicks on the booking/purchase button on your website.

      In order to retrieve the token, you will need to call the window.Uplift.Payments.getToken() method. This method does not take any parameter and makes a request to the Uplift platform to send the token object.

   2. Once the **token** has been sent by Flex Pay, the callback handler will fire a TOKEN_RETRIEVED status with the token as an attribute of the response. This token object can then be used to process payment similar to any other bank card. The Virtual Credit Card, also known as a token, should not be stored.
      📘 Detailed attributes of the token and how to get paid using it can be found here.
      ⚠️ Please review the Response Reason Code details if the token value is NULL.

      ⚠️ IMPORTANT. Do not store or display the token

      Once the token is obtained, it is essential to ensure that card information is neither stored nor displayed in any format, such as:

      • Billing Contact Form
      • Credit Card Form
      • Window Object
      • Confirmation Page (last 4 digits)
      How to correctly retrieve the billing contact information?

      ⚠️Please make sure to use the data under the token.contact object instead of any other billing information provided by the user.

   Below is an example of the updated callback handler with the above mentioned changes.

   function myOnChangeCallback(response) {
     var statusHandlers = {
       OFFER_AVAILABLE: function(){
         //Uplift Pay Monthly Offer available for this customer.
       },
       TOKEN_AVAILABLE: function(){
         //Uplift application has been completed and ready to pay in full.
         //Retrieve the token ONLY AFTER Purchase/Book button is clicked.
         window.Uplift.Payments.getToken();
       },
       TOKEN_RETRIEVED: function(){
         //Uplift Payment Token successfully retrieved.
         var token = response.token;
         //process payment using token (uplift virtual card).
       },
       OFFER_UNAVAILABLE: function(){
        //Uplift Pay Monthly Offer is not available for this customer.
       },
       SERVICE_UNAVAILABLE: function(){
         //Uplift Payments Service is unavailable.
       }
     };
     statusHandlers[response.status]();
   }
   

Error Reporting

window.Uplift.Payments.error(errorMsg: String)

This method has one parameter, errorMsg representing the booking error message shown to the user. The errors between the user confirming purchase and processing payment e.g. inventory no longer available, payment provider is down etc.

Reporting errors will help Flex Pay improve and better serve our mutual customers.

Processing Confirmation

To complete the confirmation process, one step is required for both Pay Monthly and other payment methods.

The window.Uplift.Payments.confirm(confirmationData: Object) function takes an object as a parameter, which consists of two attributes, is_pay_monthly and confirmation_id as shown below:

window.Uplift.Payments.confirm(
  {
    "is_pay_monthly": boolean,
    "confirmation_id": "string"
  }
)

Example

Pay Monthly

window.Uplift.Payments.confirm({
   "is_pay_monthly": true,
   "confirmation_id": "616783a0"
 })

Other Payment Methods

window.Uplift.Payments.confirm({
   "is_pay_monthly": false,
   "confirmation_id": "616783a0" //optional
 })

For Pay Monthly transactions, this method informs Flex Pay that the booking was successful and allows us to provide a better customer experience for our mutual customers, in case they call Flex Pay. For alternative payment options, this method allows us to deliver improved performance metrics.