Customize Hosted Checkout
Amazon Payment Services provides merchants with flexible options to customize their hosted checkout page according to their brand identity and design requirements. You can choose the method that best suits your technical capabilities and customization needs.
Customization Methods
Theme Editor
Customize using the visual theme editor in the dashboard
Custom Templates
Upload custom CSS or HTML templates for advanced customization
Through Theme Editor
The theme editor provides a user-friendly interface to customize your payment page without coding knowledge, perfect for merchants who want quick visual customization.
Access Payment Page Template
Log into your Amazon Payment Services merchant dashboard and navigate to Payment Page Template from the left menu, then click Add Payment Page Template.
Select Theme Editor
Choose Theme Editor option from the available customization methods to access the visual customization interface.
Customize and Preview
Use the color pickers to adjust your brand colors, upload your company logo, and preview changes in real-time as you make adjustments.
Save Template
Once satisfied with your customization, save your template and it will be applied to your hosted checkout pages.
Available Customizations
| Element | Description | Options |
|---|---|---|
| Primary Color | Main brand color for buttons and highlights | Custom hex color picker |
| Secondary Color | Accent color for secondary elements | Custom hex color picker |
| Background Color | Page background color | Custom hex color picker |
| Logo | Your company logo | Upload image file (PNG, JPG, SVG) |
- Use high contrast colors for better accessibility
- Ensure your logo is clear and readable at small sizes
- Test your customization on different devices and screen sizes
- Keep brand consistency with your main website
Through Custom Templates
For advanced customization and complete control over the payment page design, you can upload custom CSS or HTML templates. This method is ideal for developers who need specific design implementations.
- CSS Template
- HTML Template
CSS Template Customization
Create a custom CSS file to modify the appearance of payment page elements while maintaining the existing structure.
Analyze Current Styles
Use browser developer tools to inspect the hosted checkout page and identify CSS selectors for elements you want to customize.
Create CSS File
Write custom styles targeting specific elements, ensuring compatibility with responsive design and different browsers.
Upload Template
Navigate to Payment Page Template in your merchant dashboard and upload your CSS file.
Test Implementation
Verify your customization works across different browsers and complete test transactions to ensure functionality.
Download our sample CSS template to get started with your customization.
- Use specific selectors to avoid conflicts
- Test on multiple browsers and devices
- Maintain accessibility standards
- Keep file size optimized for faster loading
HTML Template Customization
Create a complete HTML template to fully control the payment page layout, structure, and design.
Design Template Structure
Create your HTML template following proper HTML5 structure and responsive design principles.
Include Payment Form Placeholder
Ensure to include <div>$$PZ$$</div> where the payment form should appear - this is mandatory for the payment functionality.
Upload Template
Navigate to Payment Page Template in your merchant dashboard and upload your HTML file.
Complete Testing
Test the template across different devices and browsers, then complete test transactions to verify full functionality.
Scripts of any kind are not allowed in custom templates for security reasons. This includes JavaScript, inline scripts, or any script references.
To inject our payment page inside your HTML template, you must include this div → <div>$$PZ$$</div> within your HTML template. This placeholder div is where the payment form will be rendered.
Download our sample HTML template as a starting point for your customization.