Depending on the selected integration method, implementation responsibilities may be shared across frontend applications, backend services, hosted payment experiences, and mobile SDKs.
Supported Integration Models
The following integration options are supported for Visa Click to Pay:
| Integration Method | Complexity | Frontend Control | Backend Responsibility | Best Suited For |
|---|---|---|---|---|
| Hosted Payment Page | Low | Minimal | Minimal | Fast onboarding and hosted checkout experiences |
| Hosted Session | Medium | Moderate | Moderate | Embedded checkout experiences with greater UI flexibility |
| Direct API | High | Full | Full | Enterprise integrations and highly customized payment flows |
| Mobile SDK | Medium / High | Mobile Application | Mobile + Backend | Native mobile payment experiences |
Hosted Payment Page
The Hosted Payment Page integration provides a fully hosted checkout experience where customers are redirected to a secure payment page to complete payment using Visa Click to Pay.
This integration model is typically the fastest implementation approach and requires minimal frontend or backend payment handling.
Benefits
- Simplified integration
- Reduced PCI scope
- Secure hosted payment experience
- Faster onboarding and implementation
- Minimal payment data handling
Best suited for
- Merchants requiring rapid deployment
- Standard ecommerce payment experiences
- Teams with limited frontend or backend payment orchestration requirements
Hosted Session Integration
Hosted Session integrations allow merchants to embed secure payment experiences directly into their checkout journey while still leveraging hosted payment functionality.
This approach provides greater flexibility and a more seamless customer experience compared to fully hosted redirects.
Benefits
- Embedded payment experience
- Greater frontend flexibility
- Improved checkout continuity
- Secure hosted payment handling
- Reduced customer redirection
Best suited for
- Custom checkout experiences
- Conversion-focused payment journeys
- Businesses requiring greater UI and branding flexibility
Direct API Integration
Direct API integrations provide the highest level of flexibility and control over the Visa Click to Pay payment experience.
Developers can integrate payment flows directly into their frontend and backend systems while managing payment orchestration, authentication handling, and backend payment processing.
Benefits
- Full checkout customisation
- Advanced payment orchestration
- Direct control over frontend and backend flows
- Support for enterprise payment experiences
- Greater integration flexibility
Developer Responsibilities
Direct API integrations may require developers to:
- Handle frontend SDK integration
- Validate checkout response signatures
- Process encrypted payloads
- Manage backend payment flows
- Handle authentication and 3DS scenarios
- Process tokenised payment data securely
Best suited for
- Enterprise payment platforms
- Advanced ecommerce implementations
- Highly customised payment experiences
- Organisations with dedicated frontend and backend engineering teams
Mobile SDK Integration
Visa Click to Pay may also be integrated into supported mobile applications using mobile SDK-based payment experiences.
This enables merchants to provide streamlined mobile checkout journeys across supported mobile platforms.
Benefits
- Mobile-optimised checkout experiences
- Streamlined authentication flows
- Improved in-app payment experiences
- Support for mobile-first payment journeys
Best suited for
- Native mobile applications
- Mobile commerce experiences
- App-based payment journeys
Choosing the Right Integration Method
The best integration approach depends on:
- Your desired checkout experience
- Frontend and backend implementation capabilities
- PCI and compliance considerations
- Mobile and web payment requirements
- Required level of checkout customisation
- Internal development resources
In general:
- Choose Hosted Payment Page for the fastest implementation path
- Choose Hosted Session for embedded checkout experiences
- Choose Direct API for maximum control and flexibility
- Choose Mobile SDK for native mobile app payment journeys
High-Level Integration Flow
flowchart TD
A[Choose Integration Method] --> B[Hosted Payment Page]
A --> C[Hosted Session]
A --> D[Direct API]
A --> E[Mobile SDK]
B --> F[Lowest integration complexity]
C --> G[Embedded checkout experience]
D --> H[Maximum payment control]
E --> I[Mobile app payment flows]
Related Documentation
For additional implementation guidance:
- Review the Payment Flow documentation
- Review Merchant Onboarding APIs
- Review Security & Encryption
- Review API Reference documentation