PLEASE NOTE: Checkout will no longer be brandable after February 28, 2025.
To comply with the PPCI DSS v4.0 the brandable functionality of Worldline’s hosted Checkout form will no longer be available after February 28, 2025. Please review the upcoming changes:
After the user clicks on the link or button on your site, they are redirected to the Worldline Checkout Form.
You can configure the form in the Member Area. You can control what fields are displayed by default and how they are styled. You can also add a custom header and footer to the page. Click on configuration, and select checkout to find a list of title and form options.
These settings control the default appearance of the form. They can be overridden by settings passed in the URL.
Note: The font and color settings in the Member Area have been deprecated. Font and color are now controlled by setting CSS
Once you've finished customizing your form's fields, click View Preview at the bottom of the page to see your payment form. Click Update Live to confirm your changes and update your forms.
You can brand Checkout by adding a custom header and footer to the html text boxes on the configuration page in the Member Area. Simply add the appropriate HTML and CSS blocks to the head and body of the page. In the example below we have added the minimal header that can be seen in our demo.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Checkout</title>
<link rel="stylesheet" type="text/css" href="https://libs.na.bambora.com/checkouttheme/0.1.0/ui.bambora/ui.bambora.1.1.0.css">
<link rel="stylesheet" type="text/css" href="https://libs.na.bambora.com/checkouttheme/0.1.0/style.css">
<style>
header{
margin-bottom: 40px;
margin: 0 auto;
width: 100%;
max-width: 464px;
border-bottom: 1px solid rgba(200, 200, 200, 1);
display: flex;
align-items: center;
padding: 10px 20px;
color: #9197a3;
font-size: 20px;
line-height: 32px;
font-weight: 500;
margin-bottom: 40px;
}
</style>
</head>
<body>
<script src="https://libs.na.bambora.com/checkouttheme/0.1.0/checkouttheme.min.js"></script>
<script>CheckoutTheme.init();</script>
<header class="custom-header">
<span>ACME Corp.</span>
</header>
In addition to adding a custom header and footer, you can also set the form's colour scheme to match your brand. In the example below we have updated the colour scheme from shades of purple to shades of blue.
The first two blocks of CSS set the primary colour of the form. The third block sets a slightly darker color for the "Pay" button's hover and focus states.
<style>
.spinner .spinner-left:after, .spinner .spinner-right:after,
input:not(.btn):focus, select:focus, textarea:focus,
div.checkbox input[type=checkbox]:checked + label:before,
div.checkbox:hover input[type=checkbox]:not(:disabled) + label:before {
border-color: #067aed !important;
}
div.checkbox input[type=checkbox]:checked + label:before,
.btn:not(.btn-secondary) {
background-color: #067aed !important;
}
/* Purchase button hover, active, focus background color */
.btn:not(.btn-secondary):hover, .btn:not(.btn-secondary):active,
.btn:not(.btn-secondary):focus {
background-color: #04498e !important;
}
</style>
By default, Checkout displays feedback on a transaction's success or failure to the user. You can override this behaviour by setting a custom redirect to bring the user back to your website after a transaction has been completed.
You can either pass redirect URLs as a GET parameters in the Checkout URL (see below), or you can set them in the Member Area. Click administration, then account settings, and then order settings. Under Transaction Response Pages.
You may fined it helpful tools like PutsReq helpful while testing.