Customizing the Payment Experience
If you are using the Hosted Checkout, you can customize the display of information on the Hosted Payment Page as it relates to your business and the interaction with the payer. The customizations are defined in the INITIATE CHECKOUT operation.
You can customize the payment experience with the following options:
- Display brand information: You can display your logo and contact details by using the corresponding fields within the
interaction.merchantobject.The fields provided in theinteraction.merchantobject are displayed on the receipt page for Payment Page integrations only, not for Embedded Page. - Manage the display of payer billing and email addresses: After collecting billing and email addresses from your payer, you can display them and control the way they can be edited by setting the
interaction.displayControl.billingAddressandinteraction.displayControl.customerEmailfields to one of the following values: - HIDE: Do not display the address.
- MANDATORY: Display the address element and make data entry compulsory for the payer.
- OPTIONAL: Display the address element, but allow the payer to opt out of entering data into it.
- READ_ONLY: Display the address, but do not allow the payer to edit it.
- Manage the display of shipping details: After collecting shipping details from your payer, you can control their display by setting the
interaction.displayControl.shippingfield to one of the following values: - HIDE: Do not display the shipping details.
- READ_ONLY: Display the shipping details, but do not allow the payer to edit them.
- The payer is not able to edit any of the shipping details previously provided.
- The functionality of the Same as Shipping checkbox is not available if the required shipping details have not been supplied.
- Manage language and theme: By default, the language displayed on the Hosted Payment Page is determined from the payer's browser. However, you can override this behavior by specifying a language identifier or IETF language tag in the locale field; for example, en_US, es, or fr_CA. If the language you specify is not supported by the gateway, the page is displayed in the best matching language. By default, the theme set by your payment service provider (PSP) controls the look and feel of the Hosted Payment Page. If your PSP supports multiple themes, you can choose to override the default theme by providing the
interaction.style.themefield in your request. - Order ID: It is mandatory to include
order.idin your request to easily identify a payment initiated from Hosted Checkout. You can use an identifier generated by your shopping cart or supply your own. However, ensure that it is unique.
For more information about the individual fields, see INITIATE CHECKOUT.
Initiate checkout request example with customized details
| URL | https://{{host}}/api/rest/version/llaatteesstt/merchant/{{merchantId}}/session |
|---|---|
| HTTP Method | POST |
| Click here to download Postman Collection - the path to this operation is /Hosted Checkout/Initial Transactions/INITIATE CHECKOUT for AUTHORIZE | |
{
"apiOperation": "INITIATE_CHECKOUT",
"checkoutMode": "WEBSITE",
"interaction":{
"operation" :"AUTHORIZE",
"merchant": {
"name": "JK Enterprises LLC",
"url": "https://www.your.site.url.com"
},
"returnUrl": "https://www.your.site.url.com"
},
"order": {
"currency":"{{currency}}",
"amount": "250.00",
"id" : "{{orderId}}",
"description": "Goods and Services"
}
}
Frequently asked questions
Are there any restrictions on the file size and dimensions for the merchant logo displayed on the payment page?
There are no restrictions on the file size or logo width. The logo height should be at least 144 px.
Can I use any hosting provider for hosting the logo image?
Yes, you can host your logo image on any provider, as long as the URL is secure (HTTPS). If you are looking for a provider that can offer free HTTPS hosting, see secure image hosting providers.