Hosted Components Service

Hosted Components Service is a modern, secure payment form solution that can be easily embedded into any web application. It provides a seamless way to collect payment information while maintaining PCI compliance and offering a great user experience.

Overview

Hosted Components offers:

• Secure payment method collection forms
• Support for multiple payment methods:
  • Credit/Debit Cards (Visa, Mastercard, Amex)
  • Bank Transfers
  • Digital Wallets (Apple Pay, Google Pay)
  • Region-specific methods (GCash, PayTo)
• Multi-country support with region-specific payment methods
• Customizable UI themes
• Responsive design that adapts to any screen size
• PCI-compliant implementation

Key Features

Multiple Payment Methods

The solution supports various payment methods that can be configured based on your needs:

• Credit/Debit Cards with secure card number collection
• Bank account details collection for supported regions
• Digital wallet integration
• Region-specific payment solutions

Country-Specific Adaptations

The form automatically adapts to different countries:

• Australia: Support for BSB and account numbers, PayTo
• New Zealand: Bank account number format with bank, branch, base, and suffix
• Philippines: GCash integration
• South Korea: Local card processing
• Global: Standard credit card processing

Customization Options

The payment form can be customized to match your website's design:

• Theme customization through CSS variables
• Configurable payment method options
• Responsive layout that adjusts to container size
• Custom styling for form elements

Security and Compliance

Built with security in mind:

• PCI-compliant implementation
• Secure iframe integration
• Input validation and error handling
• Secure data transmission

Getting Started

To integrate Hosted Components into your application, you can use the iframe implementation:

<iframe
  name="payment_methods"
  title="Payment Methods"
  src="https://main.d6x9wlghvzkti.amplifyapp.com/embed"
  allow="payment"
  scrolling="no"
  style="width: 100%; border: none;"
></iframe>

You can customize the available payment methods and country using URL parameters:

<iframe 
  src="https://main.d6x9wlghvzkti.amplifyapp.com/embed?countryCode=AU&paymentMethods=VISA,MASTERCARD"
></iframe>

What's Next?