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 Worldline platform 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 Worldline 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.

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.
• Minimal template: if you want to use an iframe to implement the page (offering you customization of your own preference around it), you can choose this format, although you might consider using our powerful JavaScript Client SDK to handle iframe-like situations in a much more graceful and flexible way.

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
• Unpublished
• 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.

Payment products

Our MyCheckout hosted payment pages supports all payment products that the Worldline platform offers, 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 Worldline platform.

Language packs

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:

Subdomains

The main domain for the MyCheckout hosted payment pages is:
https://secured-by-ingenico.com

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.

A/B testing

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.

My Look & Feel

Introduction

My Look & Feel is a feature you can use for the MyCheckout hosted payment pages. My Look & Feel replicates your website’s style and format (like your logos, button, background, etc.) by extracting your web page elements to recreate your website’s look and feel into your MyCheckout hosted payment pages. To do so, web crawling and scraping techniques are used in identifying the design data needed to copy your website’s style and format.

Once the style of your website has been imported in our MyCheckout editor, you can easily customize your MyCheckout hosted payment pages to your needs. You can create different variants to help you manage the look and feel of your MyCheckout hosted payment pages.

How to use my Look & Feel?

1. Login within your Configuration Center account and select the section “Look & Feel” within the left menu.
2. Click "Copy my look & feel" to start creating a variant. For more information about hosted payment pages, click "Learn more".
3. Click "Add a variant" to begin. If you have already an existing variant and you want to use this feature, you will need to create a new variant.
4. Name the variant you are creating and set the template as: Responsive or minimal.
5. Fill in your "Website URL".
6. The URL you enter is the one that is used for the web crawling and scraping, which will extract your design data. By putting in the website URL in the configuration center, you state that you have the full authority to allow Worldline to perform any action needed to replicate your MyCheckout Hosted payment pages with your website’s look and feel.
7. Click "Save variant" to save and continue. A message is displayed to inform you that the variant has been successfully created.
8. Click the variant to activate it.
9. To see the results of My Look & Feel, click “Actions” and “Edit”. Your website will be analyzed once the MyCheckout Editor is opened. A window then displays the progress of the analysis. Once the elements of your website have been extracted and imported in the MyCheckout editor, you can see the result in the MyCheckout editor.
10. You can easily adjust the variant in the MyCheckout Editor, to ensure it meets your requirements, like you would do with any new variant for which you do not use the My Look and Feel feature.

Terms and Conditions

As these design data may be protected by intellectual property rights, you warrant us that you have the necessary rights to allow Worldline to perform any action that is needed (such as for example copying and displaying design data) in order to have your My Checkout Hosted Payment Page with the same look and feel as your website.

Depending on the number of pages of your website and depending on the code used in your website, it might be that we are not able to provide this service or it might be that the result is not accurate. Worldline provides no guarantee in this respect.

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.