Menu

Using Template Builder

This guide explains how to use Worldpay's Template Builder, allowing you to change the appearance of card data collection fields when using the template form to take card details.


This is how Template Builder will appear:

Template Builder allows you to change:

  • Background template colour
  • Placement of all elements
  • CSS-controlled properties of all elements
  • The appearance of the "add a card" button

How to change these properties and manage your templates is described in more detail below.

Template Builder does not allow you to change:

  • Template text, including the CVC field help text
  • Card logos

The template form is responsive, which means the width of the form automatically adjusts to the standard minimum width for mobile devices of 320 pixels. All template form customisations are preserved on mobile devices apart from the placement of elements, which will automatically be placed below each other if the actual screen width is smaller than the width of your template form.

Changing template background

You can change the template background by updating the HTML colour code in the background-color field above the template itself, then saving changes.

Updating element placement

Simply drag and drop any element to a new position on the template and save. Please note that as outlined above placement of elements will be over-written on mobile devices if the screen width is less than the width of your template form.

Updating CSS-controlled element properties

You can change the appearance of any element by clicking the small stylus icon which appears when the element is selected. The following properties can be changed:

  • Font-size: in pixels
  • Color: text color usingHTML color code
  • Padding: in pixels; the first number shows the left and right padding and the second number shows the top and bottom padding
  • Background-color: usingHTML color code
  • Border: the first value shows border width in pixels, the second value shows border style and the third value shows border color
  • Border-radius: to create or remove rounded corners, expressed in pixels
  • Width: in pixels
  • Height: in pixels

Updating appearance of the "add a card" button

Please note that the "add a card" button sits on your main page. Only themodal formhas this button, which will adopt your website button style.

You can use the Worldpay.templateOptions.enterCardDetailsButton function to change the button text. The code example below shows you how to do this:

Copied!
<!DOCTYPE html>
<html>
   <head>
      <title>Example</title>
      <script src='https://cdn.worldpay.com/v1/worldpay.js'></script&gt;
   </head>
   <body>
      <form id='exampleForm' method='post' action='/complete'>
         <div id='paymentDetailsHere'></div>
         <input type='submit' value='Place Order' />
      </form>
      <script type="text/javascript">
         Worldpay.useTemplateForm({
           'clientKey':'your-test-client-key',
           'form':'exampleForm',
           'paymentSection':'paymentDetailsHere',
           'display':'modal',
           'templateOptions':{
             'enterCardDetailsButton':'Add card'
           }
         });
      </script>
   </body>
</html>

Managing Templates

The template named "Default" is enabled when your account is created.

You can create a new template by clicking "Add a New Template". This will always create a default template to start with. To inherit from another template you have to select it and re-save it under a new name.

Your Test and Live API keys have their own Templates. You can create a Template under Test, try it out on your test site and when you're happy with it, 'Export to Live' for it to show up for use with your Live Client Key, or vice versa.

The Template labelled "default" is the one that will show up on your website. A separate default exists for both your Test and Live API keys. To change the default, select the Template you want to use and click "Set Default".

For Advanced Usage

Please take a look at theAdvanced Usage Documentation