Customize Payment Link
Amazon Payment Services provides merchants with flexible options to customize payment links to match their preferred look and feel. You can choose the method that best suits your workflow and integration requirements.
Customization Methods
Dashboard
Use the live-editor to customize colors, branding, and appearance of payment links through the merchant dashboard
Custom Templates
Upload custom CSS themes or HTML templates for advanced payment link customization and branding
Through Dashboard Live-Editor
You can customize the payment link using our live-editor on the dashboard following these steps:
Access Payment Link Template
Login to your account and navigate to the Payment Page Template tab, scroll down to the Payment Link Template and click on it.
Customize and Save
Navigate to Customize, choose a name for the template, activate the template, change the colors, and save changes.
Customization is only available for the Payment Link page itself. The local payment options supported by payment links cannot be customized, as customers are redirected to the respective payment provider's payment page.
Through Custom Templates
If you need advanced customization on the payment link, you have two options:
CSS Theme
Create a CSS theme by modifying the colors and overall design of the payment page. Inspect the elements of the payment link and edit the existing CSS values accordingly. Save your changes to a separate CSS file and upload it on the dashboard by following these steps:
Access Payment Link Template
Login to Amazon Payment Services account and navigate to the Payment Page Template tab, scroll down to the Payment Link Template and click on it.
Upload CSS Theme and Save
Navigate to Upload, choose a name for the template, upload your CSS file in English and Arabic Theme fields, and save the changes.
HTML Template
You can implement your own HTML file that you want to load in the payment link to change the look and feel for the payment link as you wish and upload it on the dashboard, by following these steps:
Access Payment Link Template
Login to Amazon Payment Services account and navigate to the Payment Page Template tab, scroll down to the Payment Link Template and click on it.
Upload HTML Template and Save
Navigate to Upload, choose a name for the template, upload your HTML file in English and Arabic Template fields, and save the changes.
Scripts of any kind are not allowed to be injected in the templates. 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.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Example</title>
</head>
<body>
<header>your HTML element such as header.</header>
<div>$$PZ$$</div> <!-- here where our payment page will be injected -->
<footer>your HTML element such as footer.</footer>
</body>
</html>