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 a payer billing and an 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 shippings details previously provided.
- The functionality of the same as Shipping check box is not available if the required shipping details have not been supplied.
Warning - Manage language: 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 Internet Engineering Task Force (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.
- Order ID: It is mandatory to include
order.idin your request to 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/100/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"
}
}
Payment method sequence customization
You can arrange the payment methods in a sequence so that they display on Hosted Checkout based on the configuration you provide. The capability to organize the sequence of payment methods is provided to those of you who are enabled for Hosted Checkout. The default sequence of payment methods displays if you have not set up the payment order, that is, you have both the options, either have the default sequence of payment methods or configure the same.
spiProducts component, which represents alternative payment methods integrated through the Alternative Payment Methods (APM) Service Provider Integration (SPI) framework, is always positioned at the bottom of the payment method list in the default Hosted Checkout template. This placement is fixed and cannot be changed, even if you customize the order of other payment methods. If you choose not to define a custom payment method order, the default sequence is used where spiProducts also appears at the end. As a result, this limitation primarily affects merchants who want complete control over payment method positioning, in which APM SPI options remain anchored to the bottom regardless of other configurations.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.