Developers

What are the MyCheckout hosted payment pages

sandbox-preview-mobile

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 the GlobalCollect platform 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.

hpp1


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 GlobalCollect 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 poweredbyglobalcollect.comdomain. 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 GlobalCollect 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

In the configuration center you find the payment page setup tab:

  • The subdomain settings allow you to choose a part of the subdomain yourself;
  • The language packs make it possible to upload your own localization;
  • 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.

hpp2

hpp3

Subdomain settings:

hpp4

The main domain for the MyCheckout hosted payment pages is:
https://www.poweredbyglobalcollect.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.

hpp5

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.

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 substantially: use the language pack option
  • Change some words: use the editor of the payment page (in the ‘Look and Feel’ section) to do this

Change the text

In order to change the language packs you first download the default package of us of the language you want to change.

hpp6

hpp7

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.

hpp8

Now it is time to upload your own texts:

hpp9

  • 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 selecting ‘choose a folder’
  • hpp10
  • Press the ‘Next’ button
  • We will provide you with an overview of the buttons 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
Arabic ar  
Chinese (Simplified) zh CHS
Chinese (Traditional) tc CHT
Czech cs  
Danish da  
Dutch nl NL
Dutch-Belgium nl BE
English en GB
English-Australia en AU
English-Canada en CA
English-Ireland en IE
English-NZ en NZ
English-US en US
Estonian et  
Farsi (Persian) fa  
Finnish fi  
French fr FR
French-Belgium fr BE
French-Canada fr CA
German de DE
German-Austria de AT
German-Switzerland de CH
Greek el  
Hebrew he  
Hindi hi  
Hungarian hu  
Italian it  
Japanese ja  
Korean ko  
Latvian lv  
Lithuanian lt  
Malaysian ms  
Norwegian (Bokmal) nb  
Polish pl  
Portugese-Brazil pt BR
Portuguese pt PT
Romanian ro  
Russian ru  
Slovene sl  
Spanish es ES
Spanish-Argentina es AR
Spanish-Colombia es CO
Spanish-Mexico es MX
Swahili sw  
Swedish sv  
Thaï th  
Turkish tr  
Ukrainian uk  
Urdu ur  
Vietnamese vi

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. The minimal template is responsive as well and has a main difference that it does not offer a header and a footer. It has a fix width of 300 px.


Adding a new 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.

hpp11

hpp12

hpp13

hpp14

hpp15

hpp16

hpp17

hpp18

hpp19

On your variant you do 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 template you chose
  • 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.

hpp20

Edit the payment page

hpp21

In the editor you can customize the look and feel of your payment page. In the header of the editor you can see and choose:

  • Published: this indicates that the page is published
  • View/Edit mode: you can choose between the edit mode, in which you can alter the page, and the view mode, in which you can review your changes without all the editing overlays hindering your overview.
  • Test options: If you want to test the page on certain devices or different mobile phones, you can press here and see the URL of the test page. Alternatively you can scan the QR-code or send the link via e-mail.hpp22hpp23
  • View:
    • Payment
      • Payment selection: this is the optional payment product selection page
      • Payment product: this is the actual payment page your consumers will
      • Payment success/failure: this is the optional confirmation page
  • Device: the device on which you want the page to be shown (phone, tablet, desktop in both portrait and landscape mode)
  • Country: the country you are viewing, so that you can see the payment products applicable in that specific country
  • Currency: here you can set the correct currency linked to the country you are viewing
  • Language: the current language you are altering and viewing;

hpp24

On the page itself you can press any item and a popup menu will offer you the editable parts of that section.

On the left side you see four menu items. Below we will explain what each of these menu items allow you to do:

hpp25

Template Basics

In this section you can alter the basic lay-out of your page.

Background

The total background of your page can be adapted. You either choose an image of your gallery or you upload the image you like. Once you have selected the image, you can indicate whether you want the image to be repeated and where it will be positioned.

You can also choose not to show an image and only select a color as background. We recommend not to use large background images for a better performance of your payment pages.

In the case of a transparent background color, the MyCheckout editor will honor the default background color as set by the system/browser.

Once you are done, you press ‘Save changes’.

hpp26

Fonts

The text on the payment page can be written in one of the fifteen fonts we offer. All texts will be shown in this font. You can select the color of your text as well as the font size. Once you are done, press ‘Save changes’.

hpp27

Links

Here you style the default appearance of all text links in the MyCheckout hosted payment pages.

hpp28

Inputs

You can style the colors and borders of input fields to your needs. There is an option available for the settings of appearance of the labels:

  • The field labels inside the box, combined with icons for credit card fields
  • The field labels inside the box
  • The field labels above the box

hpp29

Primary Button

This is the pay button. You can choose between a normal button and a hover button. Please note that a hover button will not work nicely on a mobile device. You can alter the background color by either putting the number of the color in the field or selecting it from the menu.

The font type, font size and font color can be chosen from the default list. You can define the border type and border radius. Your changes are shown in the preview page.

hpp30

Secondary Button

This is the cancel button. You can choose between a normal button and a hover button. Please note that a hover button will not work nicely on a mobile device. You can alter the background color by either putting the number of the color in the field or selecting it from the menu.

The font type, font size and font color can be chosen from the default list. You can define the border type and border radius. Your changes are shown in the preview page.

hpp31

Button List

You can change the appearance of listed buttons. An example of listed buttons can be found on the payment product selection page.

hpp32

Header

Background

The background of the header part can be adapted. You either choose an image in the gallery or you upload the image.

You can alter the color of the header as well by pressing the background button. Once you are done, you press ‘Save changes’.

hpp33

Borders

You can change the border of your header and have the following options:

  • None
  • Dotted
  • Dashed
  • Solid

Furthermore you can give it the color you like and alter the way the border looks by adding pixels or a % to the ‘border radius’ section.

By pressing the button next to the pencil you can remove the borders you created.

hpp34

Logo

The logo of the header part can be adapted. You either choose an image in the gallery or you upload the image. Once you have selected your image, you can indicate whether you want it to be set for which device as minimum. So if you choose ‘Set for Phone and up’ the image will automatically adapt to the screen size of phones, tablets and desktop.

By checking or unchecking the box you can remove the logo image and just show a text on the header. The text can be changed by clicking on it.

hpp35

Content

Background

The total background of the page can be modified. You either choose an image of your gallery or you upload the image you like. Once you have selected your image, you can indicate whether you want the image to be repeated and where it will be positioned.

You can also choose not to show an image and only select a color as background.
Once you are done, you press ‘Save changes’.

hpp36

Borders

You can change the border of the main payment section and choose from the following options:

  • None
  • Dotted
  • Dashed
  • Solid

Besides you can give it the color you like and alter the way the border looks by adding pixels or a % to the ‘border radius’ section.

By pressing the button next to the pencil you can remove the borders you created.

hpp37

Pre-Cart-Text

By checking or unchecking the box you can add a line of text above the shopping cart, for example ‘Free delivery on orders over EUR 50”.

Shopping Cart

Trust is important for your customers and showing the amount they will have to pay will increase this. You can choose how you want to show the shopping cart, where the options described below depend on the device used:

  • Full, with details: please be aware that your page on a mobile device will be longer, which is not advisable;
  • Price only, with togglable details
  • Price only

Post-Cart-Text

Add text below the shopping cart which matters to your customers, e.g. ‘Free returns’ or ‘100 days returns policy’.

hpp38

Payment Container

The background part of the payment container can be adapted. You either choose an image of your gallery or you upload the image you like. Once you have selected your image, you can indicate whether you want the image to be repeated and where it will be positioned.

You can also choose not to show an image and only select a color as background.
Once you are done, you press ‘Save changes’.

Secure Payment

As stated earlier, your customers want to be sure that the page on which they leave their financial details offers the security they desire. We highly recommend to keep the text visible on the payment page.

Remember Me Checkbox

Offer your customer an easy way to pay you upon their next visit to your store, by offering them the remember me checkbox. You can add explanatory text, so your customer can make the decision whether they will use this option or not.

The remember me option leverages the use of our tokenization solutionPlease note that additional costs will occur in case the created tokens are used.

Pre-footer-text

Below the ‘pay’ and ‘cancel’ button you can add text, like ‘Free helpline number’. Use A/B testing by putting the texts that your customers want to read (e.g. return policy, delivery terms, special promotions) on one of the three text fields to see what has the highest impact on your conversion rates.

Paymentbuttons

Within the template you can choose how you want your payment and cancel buttons to appear:

  • One big ‘Pay now’ button and a ‘Back/Cancel’ button below it
  • One ‘Back/Cancel’ button and next to that the ‘Pay button’

Footer

Background

The background part of footer can be adapted. You either choose an image of your gallery or you upload the image you like. Once you have selected your image, you can indicate whether you want the image to be repeated and where it will be positioned.

You can also choose not to show an image and only select a color as background.
Once you are done, you press ‘Save changes’.

hpp39

Borders

You can change the border of the main payment section and choose from the following options:

  • None
  • Dotted
  • Dashed
  • Solid

Besides you can give it the color you like and alter the way the border looks by adding pixels or a % to the ‘border radius’ section.

By pressing the button next to the pencil you can remove the borders you created.

hpp40

Footer Links

Add the links which are relevant to your consumers on this page, e.g. home, terms of use, privacy policy. You have the following options:

  • Alias: the name your customer will see (e.g. home)
  • URL: the page the link should open
  • Target: where does the URL open? In the same window, the parent window or in a new window

hpp41

Meta Footer

The background part of the lowest part of the footer can be adapted. You either choose an image of your gallery or you upload the image you like. Once you have selected your image, you can indicate whether you want the image to be repeated and where it will be positioned.

You can also choose not to show an image and only select a color as background.
Once you are done, you press ‘Save changes’.

hpp42

Powered by GlobalCollect

We offer you the option to add our logo. You might wonder why. If your customers know that you choose us to process the payment for their order, their trust will increase and your refunds might decrease, as your customers know who we are. We have also added our privacy policy due to regulatory requirements.

hpp43

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.

Payment products

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


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.

hpp44

Alternatively you can set the test URL in the submenu of the “payment page setup” tab in the configuration center.

hpp46

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.

hpp47

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.

Start a checkout

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.


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.