MyCheckout hosted payment pages
What are the MyCheckout hosted payment pages
Once a customer has added items to the shopping cart and filled out the shipping and billing details, he or she needs to choose the payment method and needs to provide the payment details. If you choose not to touch and store the credit card details of your consumers, you can outsource your payment page to us and use the MyCheckout hosted payment pages.
The payment method selection can be done on your site or can be hosted by us. The payment page itself is hosted by Ingenico ePayments and takes care of building forms, validating the input and securing your customers’ payment details. You can easily adapt the look and feel of that page in the configuration center.
Advantages of using the MyCheckout hosted payment pages
The MyCheckout hosted payment pages offers you the following advantages:
- The page automatically adapts to the screen size of your consumer’s device, as it is a responsive page;
- You can alter the look and feel of the page easily online in the MyCheckout editor, which is part of the configuration center. You can find the configuration center in the login section;
- Your page will work on desktop, laptop, tablets and mobile phones. It will not only work on Android, iOS and Windows Phone, but also on BlackBerry and feature phones;
- You can offer over 50 languages/locales (e.g. pt-PT, pt-BR) to your customers;
- You can alter the text on your payment page yourself. Just one line or all texts? You can do it yourself, online, in our configuration center;
- The MyCheckout hosted payment pages are designed to work with all the payment products that the Ingenico ePayments platforms offers.
Add the MyCheckout hosted payment page to your site
To get started with a hosted checkout on our MyCheckout hosted payment pages, you initiate a Hosted Checkout via the Create hosted checkout REST API method. Details on the input you need to provide can be found on the Full API Refence for this API method. The Create Hosted Checkout method will return you an HTTP status 201 and a partialRedirectUrl field with the URL to redirect your customer to the hosted process. The hosted process will run on the https://secured-by-ingenico.com domain. Note that you can set your own return URL to get your customer back to by providing a returnUrl as part of the HostedCheckoutSpecificInput data type. You can also, per checkout, toggle the usage of the hosted result page using the showResultPage parameter of the HostedCheckoutSpecificInput. This allows you to set whether the Ingenico ePayments platform should show a payment result page (that you can style in the configuration center) or not. If you don't use the hosted result page, your customers will be redirected to your return URL right after the payment completes.
Give the page your desired look and feel
- The look and feel opens up the MyCheckout editor, in which you can easily alter the look and the feel of the payment page yourself.
- The language packs make it possible to upload your own localization;
- The subdomain settings allow you to choose a part of the subdomain yourself;
- Test URL allows you to set a test url so you are able to test a variant easily on any device with a browser
If you have multiple merchants linked to your account, remember to chose the right merchant first before visiting any of the pages below the merchant settings.
Multiple merchants linked to your account
One merchant linked to your account
Look and feel
In the look and feel part you can manage and setup your payment pages.
You can choose two different type of templates:
- Responsive template: the page adapts automatically to the screen of the device of your consumer. It works on desktop, tablet and mobile, both in portrait and landscape mode.
Adding a new variant of your hosted payment page
You can choose a template by pressing the ‘Add a variant’ button. After that you can name that variant, which makes it easier to distinguish. Once you have pressed the ‘save variant’ button, you will see the new variant on the homepage.
After creating a new variant, the default status is deactivated. You can activate the variant by clicking the 'Actions' link and choose activate in the dropdown.
On your variant you can see:
- The name of the variant which you gave it upon creation
- The published state, which can be:
- Published: the page is ‘live’
- Published with unpublished changes: the page is live, but the changes you made afterwards are not live
- The chosen template
- Latest change: who altered the page when?
- The ID of the page which you do need to put in the variant field of the HostedCheckoutSpecificInput data element in the Create Hosted Checkout Server API method, that you use to start the hosted process for a customer
- Actions: the actions you can take:
- Edit: if you press this, you will enter the editor, which is a tool in which you can alter the look and feel of your payment page yourself
- View published version: this is the page your customers currently see
- Deactivate: turn this page off. It is not possible to deactivate your default variant
- Set as default: make this page the default payment page for your site
- Duplicate: make a copy of your current page. You might want to use this for A/B-testing.
Edit the payment page
The MyCheckout editor is the tool to customize all your payment pages. This tool comes with a guided tour which will explain the available options to design your payment pages the way you like it. The first time you open this tool you will get notified by a popup in the bottom left corner of the screen. Clicking the question mark in the bottom left corner is also the place where you can always restart the tour.
The editor allows you to change elements such as: the logo, background colors, background images, buttons, fonts, input fields, and much more.
Our MyCheckout hosted payment pages supports all payment products that the Ingenico ePayments platforms offer, so credit cards, wallets, bank transfer etc. Some of these products are hosted on the page itself and some require a redirect to the third party (e.g. Skrill). Products that are hosted on the page itself will follow the styling you configure in the configuration center. Redirect products will not, as their visual appearance is not handled by the Ingenico ePayments platform.
The texts that are shown on the MyCheckout hosted payment pages are translated in 35 languages and a lot more locales, so you can offer the page in the language your customers speak.
If you want to change the default text as it is provided by us, you have the following options:
- Change the texts for all variants: use the language pack option in the configuration center
- Change the text for only one variant: use the MyCheckout editor of the payment page (in the ‘Look and Feel’ section of the configuration center)
Change the text
In order to change the language packs you first download the default package of the language you want to change.
Alter the words in the second column as the first column provides the details which text belongs to which field on the MyCheckout hosted payment pages. Once you are done, do not forget to save the file locally on your computer.
Now it is time to upload your own texts:
- Press the ‘Actions’ button
- Choose the option ‘Upload new language pack’
- Select the language and locale
- Add the file by dropping it in the pop-up screen or upload it by clicking 'click to upload’
- Press the ‘Next’ button
- We will provide you with an overview of the language keys which have changed and you can verify these again
- If the changes are correct, press ‘Yes this is correct’. If they are not correct, you can choose to go back or cancel the upload completely.
Your new texts are uploaded to our system and will be activated automatically after publishing.
In order to show your customers the language of their country, you need to provide us this info in the API. This can be done by setting the locale field in the HostedCheckoutSpecificInput field of the Create Hosted Checkout method you use to start the hosted process for your customer.
One of the languages in the list is set as default. If you do not let us know which language you want to present to your customer, we will present your customer the default language you chose. We will also default to this language when the locale you provide is not recognized.
You can choose to deactivate a certain language by clicking on the ‘Actions’ button and then ‘deactivate’.
The languages and locales we offer you are:
|Language name||LanguageCode ISO 639-1||Locale|
The main domain for the MyCheckout hosted payment pages is:
By default we offer a few subdomains that work for all our clients and that cannot be changed, indicated as "shared" subdomains. Using one of these shared subdomains works because the page shown to your consumer is based on your API key that is used when creating the URL for the hosted payment page and not on the subdomain of that URL that it does contain. In case you want a subdomain which contains a reference to your company name or own site, so that consumers will feel more confident in paying on that site, you can request up to 5 subdomains, excluding the shared subdomains.
As indicated above, you can add up to five subdomains yourself in the configuration center. Simply press the button “Request new subdomain” and add the name you want in the ‘Name’ field that pops up in your screen. Press ‘Send request’ and we will provide you feedback whether this domain is approved or not.
Testing your design
Generating a test URL
In case you want to test out your design, please press the “Test” button in the MyCheckout editor and set the test URL. The test URL defined here will be used as the starting point for your device to enter the test mode, which you can access from the page editor. This can be the homepage of your website or the shopping cart or the checkout page, depending on your needs.
Alternatively you can set the test URL in the submenu of the “payment page setup” tab in the configuration center.
How do you start the test?
Once you have setup the test URL, you are ready to validate your hosted payment page in your regular checkout flow. In order to do so, press the “Test” button in the MyCheckout editor. You can scan the QR-code, copy the URL or send it via e-mail.
What happens once you click the test URL?
Once you have clicked the test URL, the device on which you have done this, is now set up to test a specific MyCheckout hosted payment page variant. This means that this device will automatically use this variant whenever you do a checkout in your sandbox website. This enables you to experience the variant in the real environment. All other visitors will of course continue to see the currently set up published variant.
To start testing simply navigate to your website and start a checkout. Remember that you will be working in the sandbox environment so any orders you place are real orders.
The test mode message
Every time you start a checkout it will clearly show you that it is running in test mode by showing you the following message
This message will appear every time you visit the checkout for as long as this device is set up as a test device. When you choose to dismiss the message it will not be shown again until you restart your browser. When you choose to end the test mode the device will no longer be marked to use the test variant. You can always turn the test mode back on by clicking on the URL that brought you to this page.
The test mode end message
The person that sent you this test link can always choose to end the test. When that happens and you start a checkout the following message will appear.
If you want to start a new test you should contact the person that started the original test in the first place. That person will be able to send you a new test link.
In this case the normal published variant will be used.
Testing multiple variants
Each test link sets up the device to test a specific variant. Furthermore a device can only have one test variant enabled at any specific time. If you want to test multiple variants (one after the other) you can click on their test links before you start each test. The device will be switched to that test variant. You can switch as often as you like.
You can do A/B testing by creating different variants of your payment pages (but of course you need to have at least two of them published at any time to use A/B testing) and verify the results yourself afterwards.
Add the ID of the variant visible in the configuration center to the variant field in the HostedCheckoutSpecificInput data element, that is available in the Create Hosted Checkout Server API method, On every new MyCheckout hosted payment page session you initiate for your customers, you can specify whatever variant you want to use. By keeping track of the conversion results of a specific variant, you have full power to drive A/B testing of any type and rate between alternatives A and B, or even C to Z you want to test. Note that you have full freedom on how you want to work with this variant field. Drive it from your e-commerce system, do a simple 50-50, do something time- or even location based: it’s entirely up to you.
Redisplaying an instructions page
Some payment products show payment instructions to your customer at the end of the payment flow. For example, Western Union. It can be good service to offer your customers the option to redisplay those instructions as part of e.g. a "my account" section of an e-commerce platform. The MyCheckout hosted payment pages offer such redisplays as a service, maximizing the opportunities for your user friendly e-commerce experience. Usually, customers want to revert back to the instructions much later then when the initial payment session ended. That's why you have to start the redisplay process by starting a new session using the Server API's Create SessionKey method, that will return you a clientSessionId.
With the response of the initial Server API CreatePaymentRequest or hosted CreateHostedCheckout you will have received (for an instructions type payment product) a text return value in the CreatedPaymentDetails field named instructionsRenderingData. As a merchant, you should store this exact value in your order history for the customer as you need it to redisplay the instructions. Using the newly created clientSessionId and the instructionsRenderingData, post to the /instructions endpoint of the API in the /instructions/<merchantID>/<clientSessionID>/ format. In addition to the instructionsRenderingData, you can optionally provide a locale and variant if you want to use A/B testing here. When not supplied, defaults will be used.
You can re-render the instructions page as often as you want and as long as you keep the instructionsRenderingData in your system. The instructions redisplay will change visually if you update your MyCheckout hosted payment pages styling using the configuration center, but the financial values displayed will remain exactly as they were at the time of the payment. Note that of course the instructions redisplay is responsive and thus supports smartphones, tablets and other form factors in an elegant way.