Skip to main content

Hosted Payment Components

Payen Hosted Payment Components (HPC) provide a toolkit that allows you to embed secure, PCI-compliant payment fields directly into your website forms. This enables you to create a seamless user experience with integrated card payment actions following your brand guidelines, while achieving PCI compliance under PCI SAQ-A. Your servers or domain never see a PAN, CVV or other sensitive data.

Components are provided for Card Number, Expiry Date, and CVV. These render inside iframes hosted by Payen, keeping card data out of your DOM and reducing your PCI compliance scope.

How It Works​

  1. You define placeholder container elements in your HTML
  2. The OrchestratorMerchant class initializes embedded fields into those containers
  3. As the user types, validation events are raised on your container elements
  4. On submission, you call startSession() to receive ephemeral session keys
  5. You forward these keys to your server, which calls the Payen Direct API

Key Features​

  • PCI reduction — Card data never touches your server or DOM; tokenization happens inside hosted iframes
  • Customizable — Match your brand with configurable styles, placeholders, and feedback classes
  • Responsive — Components automatically scale to fit any container layout
  • Event-driven — React to validation state changes, focus transitions, and card brand detection

Prerequisites​

Before integrating HPC you will need:

  • Integration credentials including your endpoint URL (provided by Payen)
  • A modern browser that supports ES modules and import statements
  • HTTPS enabled on your payment page (required for secure iframe communication)
  • Your Content Security Policy configured to allow loading scripts from the Payen HPC endpoint

Getting Started​

Follow the Quick Start guide to build a working payment form in five steps.

Overview of This Section​

PageWhat It Covers
Quick StartStep-by-step integration tutorial with complete code examples
Message FlowSequence diagram of the complete payment flow from user interaction to API call
CustomizationsConfiguration options, styling, feedback classes, and default values
EventsCustom DOM events including validation, focus, card brand detection, and initialization completion
OrchestratorMerchant APIFull class and method reference including error handling