Web Integration Introduction
Connected Payments Web Integration enables you to accept payments on your website. Choose between an embedded iFrame or a hosted payment page, both fully customisable to match your brand.
Quick Start Guide
Choose your integration path based on your requirements:
- Embedded iFrame
- Hosted Redirect
- Digital Wallets
Best for: Seamless checkout flows, single-page applications, custom UX requirements
What You'll Build
Embed a payment form directly on your page using an iFrame. Maintain full control over the user experience while receiving real-time events via PostMessages.
Key Benefits
- Seamless user experience (no redirect)
- Real-time payment status updates
- Full control over page layout
- Custom error handling
Best for: Quick integration, reduced development effort, traditional checkout flows
What You'll Build
Redirect customers to a fully hosted payment page on Connected Payments servers. Customise the page to match your brand and reduce implementation complexity.
Key Benefits
- Fastest implementation
- Minimal code required
- No PostMessage handling needed
Best for: Supporting digital wallets and modern payment methods
What You'll Build
Integrate popular digital wallets and alternative payment methods to provide customers with their preferred payment options.
Available Options
- Apple Pay – iOS, Mac, and Safari payments
- Google Pay – Android and web payments
- Click to Pay – Streamlined card payments
Complete Documentation Index
Core Integration Guides
| Guide | Description | When to Use |
|---|---|---|
| iFrame Integration Guide | Complete implementation guide for both embedded and hosted modes | Start here for any web integration |
| PostMessages Reference | Complete event reference for iFrame communication | Required for embedded integrations |
| Form Submissions Guide | Handle payment submissions, responses, and redirects | Essential for processing payments |
Troubleshooting & Support
| Resource | Description | When to Use |
|---|---|---|
| Troubleshooting Guide | Quick reference for common issues and fixes | When encountering integration problems |
| iFrame FAQs | Frequently asked questions | Quick answers to common questions |
Digital Wallets
| Integration | Description | When to Use |
|---|---|---|
| Apple Pay Integration | Secure payments on iOS, Mac, and Safari | Supporting Apple device users |
| Google Pay Integration | Fast checkout on Android and web | Supporting Android and web wallet users |
| Click to Pay | Streamlined card payments | Simplifying card payment experience |
| Overview | Compare all alternate payment methods | Choosing the right payment method |
Key Features
- Security
- Customisation
- Advanced Features
Secure Communication
- HMAC signature validation for all requests
- HTTPS required for production
- Tokenisation support for recurring payments
Integration Comparison
| Feature | Embedded (iFrame) | Hosted (redirect) |
|---|---|---|
| User Experience | Seamless (no redirect) | Traditional (redirect) |
| Real-time Events | Yes (PostMessages) | No |
| Custom Layout Control | Full control | Limited |
| PostMessage Handling | Required | Not needed |
| Best For | Modern SPAs, custom UX | Quick integration, traditional flows |