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
• Enhanced logging and monitoring for better debugging and performance tracking

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
• Automatic token masking in logs for enhanced security

Enhanced Monitoring and Logging

Comprehensive logging and monitoring capabilities:

• Structured logging with Datadog-compatible format
• Payment stage tracking throughout the payment journey
• Environment-aware logging with production safety features
• Real-time monitoring of API performance and errors
• Security auditing with automatic sensitive data filtering

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>

Monitoring and Debugging

The service now includes enhanced monitoring capabilities:

Payment Journey Tracking

Track user interactions through different payment stages:

• Initialization: Page load and setup
• Payment Method Selection: User choosing payment method
• Form Validation: Input validation and error handling
• Payment Token Creation: Token generation process
• Customer Linking: Associating payment methods with customers

Environment-Specific Behavior

• Production: Sensitive data is automatically filtered, enhanced security measures
• Development/Staging: Full debugging information available, comprehensive logging

Integration Monitoring

Monitor your integration with structured logging:

// Example integration logging
window.addEventListener('message', (event) => {
	if (event.data && event.data.type === 'PAYMENT_METHOD_TOKEN') {
		console.log('Payment method token received:', {
			timestamp: new Date().toISOString(),
			paymentMethodType: event.data.paymentMethodType,
			hasCustomerLink: event.data.hasOwnProperty('link_status'),
		});
	}
});

What's Next?