---
title: "Step 6: Receive payment"
slug: "step-6-receive-payment"
updated: 2026-10-14T14:51:39Z
published: 2026-10-14T14:51:39Z
canonical: "developer.upgrade.com/step-6-receive-payment"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://developer.upgrade.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Step 6: Receive payment

## Overview

⚠️ Steps 4-6 are exclusive to **payment pages**. If you are building a non-payment page, skip to the [Enable User Interface Section](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-v2) to configure your `<up-from-pricing>` components.

This is the final step of the payment flow. After the customer completes the Flex Pay application through the iFrame, how you receive payment depends on your disbursement method:

- **Virtual Credit Card:** Retrieve a virtual credit card and process payment like any other credit or debit card
- **Direct Settle:** Authorize the transaction via the Flex Pay [**Transactions API**](https://developer.upgrade.com/apidocs/overview-3) to receive payment via bank transfer (ACH)

Your disbursement method is set during onboarding. Contact your Flex Pay account manager if you are unsure which applies to you.

## Integration Details

After the customer finishes the iFrame application, there are two possible outcomes:

## 1. Successful Application (Approved)

The [callback handler](https://uplift-docs.document360.io/docs/step-4-define-callback-handler-v2) fires `TOKEN_AVAILABLE`, signaling that payment is ready to be processed

⚠ Retrieve payment **only after** the customer clicks your booking/purchase button. Do not auto-retrieve on `TOKEN_AVAILABLE`.

**Virtual Credit Card (VCC)**

1. Call `window.Uplift.Payments.getToken()` (no parameters) to request the virtual card from the Flex Pay platform.
2. The callback handler then fires `TOKEN_RETRIEVED` with the token in the response. Use this token to process payment exactly as you would with any other bank card.

📘 Detailed token attributes and usage: [Token Reference](https://uplift-docs.document360.io/docs/token). If the token value is NULL: [Response Reason Codes](https://uplift-docs.document360.io/docs/response-reason-code).

⚠️ **Do not store or display the token.** Once obtained, card information must not appear in:

  - Billing contact forms
  - Credit card forms
  - Window objects
  - Confirmation pages (not even last 4 digits)

⚠ For billing contact information, always use the data under [**token.contact**](https://uplift-docs.document360.io/docs/token) instead of any other billing information provided by the user.

**Direct Settle (Transactions API)**

1. Call `window.Uplift.Payments.getToken()` (no parameters) to request the orderID from the Flex Pay platform.
2. The callback handler then fires `TOKEN_RETRIEVED` with the orderID in the response. Use this orderID as input to the [**Transactions API**](https://developer.upgrade.com/apidocs/overview-3) to submit an [**Authorization**](https://developer.upgrade.com/apidocs/authorize-transaction)

Here is the complete callback handler with token retrieval (VCC) or OrderID (Direct Settle):

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

### Error Reporting

⚠️ Exclusive to Flex Pay transactions.

If an error prevents the customer from completing a booking after payment was processed (for example, inventory sold out, payment provider downtime), report it to Flex Pay:

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

The `errorMsg` parameter is the error message shown to the user. Reporting these errors helps us improve the experience for your shared customers.

### Processing Confirmation

After the payment is complete, send a confirmation to Flex Pay. This is required for both **Pay Monthly** and **other payment methods**.

⚠️ Execute `confirm()` **only on the Confirmation Page**.

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

📘 `confirmation_id` is **mandatory** only for Pay Monthly transactions (`is_pay_monthly: true`).

**Example**

![step6-confirm-example](https://cdn.document360.io/ff52d920-99b4-4c2b-9b32-5d5fe9700cb0/Images/Documentation/step6-confirm-example.png)

#### Pay Monthly

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

#### Other Payment Methods

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

For Pay Monthly transactions, this confirms the booking was successful and allows Flex Pay to support shared customers. For other methods, it provides performance metrics.

📘 If your confirmation happens on the same payment page (rather than a separate page), make sure `up.js` is loaded, `window.upReady` is defined, and the library is initialized for a **non-payment page** as explained in [Step 2](https://uplift-docs.document360.io/docs/step-2-initialize-flex-pay-payments-v2).

⚠️ Review the [Purchase Button](https://uplift-docs.document360.io/docs/purchase-button) page for the expected behavior.

⚠ Before launching Flex Pay on your Production site:

1. Verify the checkout page and payment behavior meets [Payment Status](https://uplift-docs.document360.io/docs/payment-status) requirements
2. Complete the [QA Checklist](https://uplift-docs.document360.io/docs/step-7-qa-checklist-v2)

### From Pricing After Payment Completion

After the payment flow completes, any `<up-from-pricing>` components still on the page (for example, in an order summary visible on the confirmation page) continue to display the last known offer. They do not require any manual cleanup - the SDK manages their lifecycle through the internal bridge.

## 2. Adverse Action (Not Approved)

- The iFrame displays a message suggesting the customer use an alternative payment method.
- The payment selector remains enabled, but the customer cannot continue with Flex Pay.
- The callback handler stays at `OFFER_AVAILABLE` status. Due to compliance requirements, the specific application outcome cannot be disclosed.

![DP-17](https://cdn.document360.io/ff52d920-99b4-4c2b-9b32-5d5fe9700cb0/Images/Documentation/DP-17.png)

**Note:** For travel partners, declined applicants will see a button to start a new application for a different user.

**Step-by-step Validation Guide (Recommended)**

1. Update the callback handler with console logs for token flow:

```javascript
function myOnChangeCallback(response) {
  console.log('myOnChangeCallback is working!');
  var statusHandlers = {
    OFFER_AVAILABLE: function () {
      //Flex Pay Monthly Offer available for this customer.
      console.log('There is an offer available for you!');
    },
    TOKEN_AVAILABLE: function () {
      //Flex Pay application has been completed and ready to pay in full.
      //Retrieve the token (virtual card) or orderID (for Direct Settle) ONLY AFTER Purchase/Book button is clicked.
      console.log('getToken');
      window.Uplift.Payments.getToken();
    },
    TOKEN_RETRIEVED: function () {
      //Flex Pay Payment Token successfully retrieved.
      var token = response.token;
      console.log('This is your Flex Pay payment information', token);
      //Process payment using token (Flex Pay virtual card) or orderID (for Direct Settle).
    },
    OFFER_UNAVAILABLE: function () {
      //Flex Pay Monthly Offer is not available for this customer.
      console.log('Sorry! The offer is unavailable...');
    },
    SERVICE_UNAVAILABLE: function () {
      //Flex Pay Payments Service is unavailable.
      console.log('Sorry! The Flex Pay service is unavailable...');
    },
  };
  statusHandlers[response.status]();
}
```

1. Refresh the page, call `window.Uplift.Payments.select()` from the console, and complete a test application using the [provided testing profiles](https://uplift-docs.document360.io/docs/testing-details) (approved outcome). You should end at the following screen:

![DP-17B](https://cdn.document360.io/ff52d920-99b4-4c2b-9b32-5d5fe9700cb0/Images/Documentation/NEW%20-%20DP%2017B.png)

1. The callback handler should have retrieved the payment details. Check the console:

![DP-18](https://cdn.document360.io/ff52d920-99b4-4c2b-9b32-5d5fe9700cb0/Images/Documentation/DP-18.png)

*Virtual Credit Card (VCC)*

⚠️ Once you have the virtual card information, charge it as you would any other credit card to complete the transaction.

![](https://cdn.document360.io/ff52d920-99b4-4c2b-9b32-5d5fe9700cb0/Images/Documentation/image(44).png)

*OrderID (Direct Settle)*

> [!WARNING]
> ⚠️ Once you have the OrderID, authorize the transaction via the [**Transactions API**](https://developer.upgrade.com/apidocs/overview-3)

1. Send the confirmation to Flex Pay with your booking reference:

```javascript
window.Uplift.Payments.confirm({
    "is_pay_monthly": true,
    "confirmation_id": "ConfirmationID123"
  })
```

Replace `ConfirmationID123` with the actual confirmation ID from your system. Sharing this allows Flex Pay to support your shared customers with any inquiries.

You have now completed the full Flex Pay payment integration. Continue to the [Enable User Interface Section](https://uplift-docs.document360.io/docs/from-pricing-and-information-modal-v2) to configure `<up-from-pricing>` components and [Pay Monthly Selectors](https://uplift-docs.document360.io/docs/pay-monthly-selectors-v2) for your customers.

⚠️ Before going live, replace your testing UP-code with the Production code and remove any console logs used during development.

⚠ Before launching Flex Pay on your Production site:

1. Verify the checkout page and payment behavior meets [Payment Status](https://uplift-docs.document360.io/docs/payment-status) requirements
2. Complete the [QA Checklist](https://uplift-docs.document360.io/docs/step-7-qa-checklist-v2)