Payment Page Customization

You have the option to display the payment page with full redirect (in a standalone page), in a lightbox on top of your website or in an IFrame embedded in your website.

Based on your business requirements or your personal preference, choose the integration process that provides the best experience for your site and your users.

The integration process for the three scenarios is described next.

You also have the option to create or edit new skins or change the merchant logo for the hosted payment page from User Interface Configuration from GlobalPay Merchant Dashboard.

Payment page with full redirect

This scenario does not require any special configurations. Just redirect the customer to the redirectURL returned in the initial response.

Fill in the form below and click the button to see our hosted payment page in action:


In centimes (eg. 1000 = 10.00)

Payment page displayed in a lightbox

You have the option to display the payment page in a lightbox on top of your website.

When initiating a payment the Nuvei page will appear in a lightbox. If you send the RedirectInIFrame parameter set to true, the flow to the provider will stay in a lightbox. If you send the RedirectInIFrame parameter set to false, the provider’s page will be displayed on top of the window.

Fill in the form below and click the button to see how it works:


In centimes (eg. 1000 = 10.00)

An iframe having 100% width and height of the viewport is generated. You need to perform the following steps:

  1. Include the following scripts in your HTML page:

    Test environment: https://apitest.smart2pay.com/Scripts/Merchant/globalpay.lightbox.1.0.js

    Production environment: https://api.smart2pay.com/Scripts/Merchant/globalpay.lightbox.1.0.js

  2. From your “Pay” button call the JS function renderS2PLightbox (redirectURL, [overlay]) with the RedirectURL received in the response as first parameter. Optionally, you can send a color code or an URL to an image which will be used as background for the overlay mask.

Sample HTML page:

<!DOCTYPE html> 
<html> 

<head> 
	<script src="https://apitest.smart2pay.com/Scripts/Merchant/globalpay.lightbox.1.0.js"></script> 
</head>

<body> 

	Your page goes here! 

	<script> 
		//render GlobalPay lightbox on your “Pay" button 
		renderS2PLightbox('https://apitest.smart2pay.com/Home?PaymentToken=03E9B171DCB4D488444A15FB7FE9FD5E.1582339') 

		//we may specify a color for the overlay mask: 
		//renderS2PLightbox('https://apitest.smart2pay.com/Home?PaymentToken=51EDD1F455861E7C5372C1E200808DB8.1582340', '#C01234') 

		//we may specify an URL for the overlay mask background image: 
		//renderS2PLightbox('https://apitest.smart2pay.com/Home?PaymentToken=9636009264D897B98BE50545F55DB78A.1582343', 'https://apitest.smart2pay.com/Content/images/opacity_black_30.png')
	</script> 
</body> 

</html>

Payment page embedded in your website

You have the option to display the payment page in an IFrame embedded in your website.

When you initiate a payment you can use the RedirectInIFrame parameter. If the RedirectInIFrame parameter is set to true, the payment page will be showed in an Iframe.

Fill in the form below and click the button to see our payment page in action:


In centimes (eg. 1000 = 10.00)

You need to perform the following steps:

  1. Log in to Merchant dashboard and create a skin with “Compact iframe” payment page layout. Go to User Interface Configuration from GlobalPay Merchant Dashboard for instructions on how to achieve this. Write down the SkinID – you will need it in the next step.
  2. Initiate a payment using the SkinID from step 1.
  3. Include the following scripts in your HTML page:

    Test environment: https://apitest.smart2pay.com/Scripts/Merchant/globalpay.embedded.1.0.js

    Production environment: https://api.smart2pay.com/Scripts/Merchant/globalpay.embedded.1.0.js

    *jQuery library should already be included in your page; we recommend version 1.7.2 or above

  4. On “Pay” button click, call the function renderGlobalPay(redirectURL, iframeContainer)

Where:

  • redirectURL is taken from the response at step 2
  • iframeContainer is a container (e.g. div) in your page where we will create the GlobalPay iframe as a child. The container in your page must have an ‘auto’ height (the default behavior).

Sample HTML page:

<!DOCTYPE html>
<html>

<head> 
    <script src="https://apitest.smart2pay.com/Scripts/Merchant/globalpay.embeded.1.0.js"></script> 
</head> 

<body> 

    Your page goes here! 

    <div id="globalPayContainer" style="height:auto;"></div>
    <script> 
        //render GlobalPay lightbox on your “Pay" button 
        renderGlobalPay('https://apitest.smart2pay.com/Home?PaymentToken=C7A2B2DD16F455A897BA8469AC1776B7.1582348',’ globalPayContainer’) 
    </script>
</body> 

</html>

Hosted Payment Page Skinning

If you want to customize the look and feel of the payment page, including font styles and sizes, colors, background, layout, logo positioning and sizes and many others go to User Interface Configuration from GlobalPay Merchant Dashboard.

In order to create or edit new skins or change the merchant logo, the user needs to have assigned a role with at least the following access rights: UIConfiguration-View, UIConfiguration-Update. For more information about users roles go to Security from GlobalPay Merchant Dashboard.

A combination of these parameters can be saved and a new skin will be generated. You can use the new SkinID to display the customized payment page either as a default (the skin will be used as default skin for the payments for which you do not specify a SkinID) or dynamically specifying it in the initial request (the new skin will be used for the current payment).

Below there is an example of a payment request that dynamically instructs GlobalPay to display a certain skin by specifing a value for the SkinID parameter.

Request: 

POST https://paytest.smart2pay.com/v1/payments
Authorization: Basic MzAyMDE6aEo1Um9iWXg5cjdGZk53Q3ZIWTlMWEhxcXIrRkV6cmM3YUp2UVFrNEdhejFtZzdSeXk=

{
  "Payment": {
    "MerchantTransactionID": "s2ptest_45",
    "SkinID": 153,
     "Amount": 100,
     "Currency": "EUR",
     "MethodID": 2,
     "ReturnURL": "http://demo.smart2pay.com/redirect.php"
      }
}

Response: 

HTTP/1.1 201 Created
Content-Type: application/json; charset=utf-8

{
  "Payment": {
    "ID": 2427186,
    "SkinID": 153,
    "Created": "20160314145023",
    "MerchantTransactionID": "s2ptest_45",
    "Amount": 100,
    "Currency": "EUR",
    "CapturedAmount": null,
    "ReturnURL": "http://demo.smart2pay.com/redirect.php",
    "Description": null,
    "MethodID": 2,
    "MethodOptionID": null,
    "IncludeMethodIDs": null,
    "ExcludeMethodIDs": null,
    "PrioritizeMethodIDs": null,
    "SiteID": 30201,
    "NotificationDateTime": null,
    "Customer": null,
    "BillingAddress": null,
    "ShippingAddress": null,
    "Articles": null,
    "Details": null,
    "ReferenceDetails": null,
    "CustomParameters": null,
    "PreapprovalID": null,
    "Status": {
      "ID": 1,
      "Info": "Open",
      "Reasons": null
    },
    "MethodTransactionID": null,
    "TokenLifetime": 1,
    "Capture": null,
    "RedirectURL": "https://apitest.smart2pay.com/Home?PaymentToken=AA7FDAA27A9A77ACC109BBD6B1858098.2427186"
  }
}