Overview

Visa Click to Pay can be integrated into Hosted Session checkout flows using the Visa-provided frontend SDK.

This integration allows merchants to:

• retrieve saved Click to Pay cards,
• authenticate customers,
• tokenize payment credentials,
• complete secure checkout flows,
• process Click to Pay transactions using hosted payment sessions.

Hosted Session integrations provide a balance between:

• frontend customization,
• PCI scope reduction,
• secure payment handling,
• simplified checkout experiences.

Supported Flow

The Hosted Session integration supports:

• returning customers,
• saved Click to Pay cards,
• OTP verification,
• tokenized card payments,
• new card enrollment,
• secure checkout authentication.

High-Level Flow

The Hosted Session Click to Pay flow typically follows these steps:

1. Merchant creates an order

2. Hosted Session initializes

3. Frontend loads the Click to Pay SDK

4. SDK init() is called

5. Customer enters email or mobile number

6. SDK retrieves available cards

7. Customer selects a payment card

8. SDK performs checkout()

9. Frontend submits the checkout response to backend APIs

10. Backend validates and decrypts the payload

11. Payment authorization is processed

Architecture Overview

The Hosted Session integration consists of:

• frontend SDK integration,
• backend payment processing,
• encryption key retrieval,
• secure payload validation,
• tokenized payment handling.

The frontend handles customer interaction and SDK operations, while the backend performs secure validation and authorization processing.

SDK Initialization

The frontend must initialize the Visa Click to Pay SDK before rendering payment components.

Initialization Flow

The frontend:

• loads the SDK,
• retrieves configuration values,
• initializes Click to Pay,
• renders customer interaction components.

Required Configuration

The integration may require:

• dpaId
• dpaClientId
• supported card brands
• encryption key configuration

These values may be retrieved using:

GET /config/merchants/:merchantRef/configs/vctp

Base URL:

https://api-gateway.sandbox.ngenius-payments.com

Customer Identification Flow

The customer identification flow allows Click to Pay to retrieve saved payment methods.

Supported Identifiers

Currently supported identifiers include:

• email address,
• mobile number.

Flow

1. Customer enters identifier
2. SDK verifies identity
3. OTP authentication may be triggered
4. Available cards are retrieved

Card Retrieval and Selection

After successful customer identification, the SDK retrieves available tokenized cards.

The frontend may:

• render saved cards,
• display masked PAN values,
• allow card selection,
• allow switching customer identity,
• support empty-card states.

Checkout Flow

After card selection, the frontend calls the SDK checkout() method.

The checkout response contains:

• signed JWS payload data,
• encrypted payment information,
• transaction metadata,
• authentication data.

The response should be passed to backend APIs without modification.

Payment Processing

After a successful checkout() response, the frontend submits the payment response to the backend.

Endpoint

POST /transactions/outlets/{outletId}/orders/{orderRef}/payments/{paymentRef}/click-to-pay

Purpose

This endpoint:

• validates the JWS signature,
• decrypts the payload,
• processes the payment authorization,
• handles wallet payment flows.

OTP Authentication

Some flows may require OTP verification before card retrieval or payment completion.

The frontend should:

• render OTP components,
• handle OTP validation,
• support retry flows,
• handle authentication failures gracefully.

3DS Handling

Depending on the transaction and ECI values returned by the checkout flow:

• standard 3DS authentication may occur,
• backend payment flows may require additional authorization steps,
• the frontend may need to handle await_3ds responses.

Error Handling

Hosted Session integrations should gracefully handle:

• SDK initialization failures,
• authentication failures,
• card retrieval errors,
• checkout failures,
• payment authorization failures,
• OTP validation errors.

Sensitive payment information should never be exposed in frontend error messages.

Frontend Responsibilities

The frontend is responsible for:

• SDK initialization,
• rendering payment components,
• customer interaction,
• OTP handling,
• calling checkout(),
• forwarding responses securely to the backend.

Backend Responsibilities

The backend is responsible for:

• signature validation,
• payload decryption,
• payment authorization,
• token processing,
• 3DS handling,
• secure payment execution.

Related Documentation

• Overview
• Payment Flow
• API Endpoints
• Security & Encryption
• Direct API Integration
• Mobile SDK Integration

Additional Notes

The Hosted Session integration flow is based on:

• Visa Click to Pay SDK requirements,
• Hosted Session payment architecture,
• frontend tokenized payment flows,
• backend authorization handling.

Additional SDK implementation examples and frontend samples may be added in future revisions as implementation artifacts become available.