Skip to main content

Message Flow

For a high-level overview of HPC, see Introduction. For a hands-on integration tutorial, follow the Quick Start.

The following sequence diagram outlines the complete flow for a typical merchant payment form, from user interaction through to the Direct API response.

A more detailed description for each of the steps:

  1. The user indicates they wish to make a payment.
  2. The payment page displays the form with placeholder containers for the HPC components.
  3. The OrchestratorMerchant class is initialized with container IDs and any customization options.
  4. HPC initializes the components into their placeholder containers, and each raises an hpc.initializationComplete event.
  5. The user interacts with the form, filling in fields.
  6. As HPC components are filled in, validation events are raised on their respective containers to indicate current validity. Card brand detection events may also fire for the card number field.
  7. The user indicates they are finished and wishes to start the transaction (e.g., clicks Pay).
  8. The payment page calls startSession() on the orchestrator, triggering tokenization of all HPC component values.
  9. The orchestrator returns a session key for each configured field as a Map.
  10. The payment page POSTs the session keys and any other form data to the merchant's server.
  11. The merchant backend calls the Payen Direct API authorization endpoint, substituting session keys in place of actual card data. See Authorization for request structure.
  12. The Direct API returns the transaction result to the merchant backend.
info

As this deals with PCI-sensitive data, ensure you never log or store session keys persistently, and use HTTPS transport for your payment page. See OrchestratorMerchant API for security guidance.