Understanding the payment process and data flow

Owned by Helen Griffith
Last updated: Mar 16, 2022
2 min read
In this page

Payment process and data flow

The following architecture and data flow diagram describes the payment process and data flows between systems.

Payment process diagram

Before the payment solution is capable of processing payments, the application must be authenticated (1 and 2). See Authentication (Payment API) for details.

When authorized, a typical payment process involving an agent and a customer is as follows:

1. While on a call with a customer, the agent collects or reviews the customer’s basic (non-sensitive) payment data from their integrated CRM or eCommerce application. This data typically includes:

  • Card holder’s name
  • Card holder’s billing address details. The customer’s billing address might include country, state, city, and postcode details. Some of this data may be optional and depends on the agreement between the merchant and the Payment Service Provider.
  • Payment amount and currency
  • Payment reference ID or code. This data is optional, but is recommended for payment matching and tracking.

If there is no CRM integration, it is possible to implement a solution for the agent to manually enter the customer’s personal information into the payment UI. This is generally determined during the design phase

2. The agent starts the payment session by clicking the Start payment button in ContactPad or another UI trigger (if configured).

3. The agent’s backend system (or agent’s web application) posts the non-sensitive payment data to Vonage Contact Center’s (VCC) Payment API (3a, 3b).
VCC initiates a secure telephony session with the PCI service provider. The Payment API returns a payment session GUID as well as a unique URL and credentials to the payment user interface to load on the agent’s desktop (3c).

4. The agent’s system opens the payment UI using the provided URL in the agent’s UI. This payment UI can be opened in an iframe or as a separate popup window (4)

5. The agent talks the customer through the secure collection process. The customer, using their telephone keypad and DTMF tones, enters sensitive numeric information (5a). In most cases this information includes:

  • Card number
  • Card expiry date
  • CVV code
The payment UI displays masked digits as the the PCI solution collects DTMF tones (5b). During this secure session, no sensitive information is visible, audible, nor accessible to the agent, the agent’s desktop system, or to VCC.

6. After the customer has provided required data, the agent clicks a button in the payment UI to send the payment information to the payment service provider. The transaction result appears (6)

7. The agent’s backend system can get the payment result information (7a, 7b) by: