Menu

Take card details using template form

This tutorial helps you taking card details using a Worldpay provided template form.


This page describes how to take card details using a Worldpay provided template form. We recommend this method if:

  • You are not PCI compliant and
  • You are not willing to to fill in theSAQ A-EP form

If you are PCI SAQ A-EP compliant or willing to become so, we recommend you use yourown formto take card details.

Overview

To take card details using the Template Form, Worldpay will include an iFrame in your payment form that replaces the sensitive card data with a token before it is submitted back to you.

This can be done in one of two ways (see screenshots below):

  • 'inline' means the iFrame is visible all the time and displayed among the other form fields you are collecting
  • 'modal' means that the iFrame is displayed as a pop-up when the user clicks “Add a Card”

modal example

inline example

Both the 'inline' and the 'modal' form can be completely customized using the template builder (requires you to be signed in).

This is what your payment form would look like:

Copied!
<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta charset="UTF-8" />
      <script src="https://cdn.worldpay.com/v1/worldpay.js"></script&gt;      <script type='text/javascript'>
         window.onload = function() {
           Worldpay.useTemplateForm({
             'clientKey':'your-test-client-key',
             'form':'paymentForm',
             'paymentSection':'paymentSection',
             'display':'inline',
             'reusable':true,
             'callback': function(obj) {
               if (obj && obj.token) {
                 var _el = document.createElement('input');
                 _el.value = obj.token;
                 _el.type = 'hidden';
                 _el.name = 'token';
                 document.getElementById('paymentForm').appendChild(_el);
                 document.getElementById('paymentForm').submit();
               }
             }
           });
         }
      </script>
   </head>
   <body>
      <form action="/complete" id="paymentForm" method="post">
         <!-- all other fields you want to collect, e.g. name and shipping address -->
         <div id='paymentSection'></div>
         <div>
            <input type="submit" value="Place Order" onclick="Worldpay.submitTemplateForm()" />
         </div>
      </form>
   </body>
</html>

Here is how you can implement this form

  • Include and initialize Worldpay.js in your page
  • Include the iFrame in your form

Include and initialize Worldpay.js in your page

The first step is to ensure that the Worldpay.js library gets included when your payment form is loaded. This only needs to be done on the page on which you collect the payment details:

Copied!
<script src="https://cdn.worldpay.com/v1/worldpay.js"></script >

The list of browsers that are supported by Worldpay.js can be foundhere

The next step is to initialize Worldpay.js:

Copied!
<script type='text/javascript'>
   window.onload = function() {
     Worldpay.useTemplateForm({
       'clientKey':'your-test-client-key',
       'form':'paymentForm',
       'paymentSection':'paymentSection',
       'display':'inline',
       'reusable':true,
       'callback': function(obj) {
         if (obj && obj.token) {
           var _el = document.createElement('input');
           _el.value = obj.token;
           _el.type = 'hidden';
           _el.name = 'token';
           document.getElementById('paymentForm').appendChild(_el);
           document.getElementById('paymentForm').submit();
         }
       }
     });
   }
</script>

In this initialization script you have to do three things

  1. Set the Client Key to allow Worldpay.js to identify itself with our servers. You can find your Client Key here (requires you to be logged in).
  2. Determine if you want the card to be used multiple times. You can use this to offer your customerscard-on-file paymentor arecurring payment. If you want to use the card multiple times, you have to set reusable to true. If not, you can set it to false or you can omit this line (default is false).
  3. Initialize the iFrame (“useTemplate”). This method takes three parameters: the id of your form, the id of the element where the iFrame will be created and whether it is ‘inline’ or ‘modal’ (see descriptions of both options above).

Include the iFrame in your form

The second step is to include the iFrame in your form:

Copied!
<div id='paymentSection'></div>

Sensitive card data (name on card, card number, CVC, expiration date) will be presented in the iFrame. You should collect all other fields in this form yourself, including for example name and billing address.

“Name” is likely to be collected twice. This will give the user the opportunity to differentiate between the person the goods should be shipped to and the name on the card used.

Including the iFrame in your form is the same irrespective of whether you use the ‘inline’ or the ‘modal’ form.

It is important that you check for the existence of an obj.token returned in the callback function before submitting the form to your 'place order' page demonstrated in step 2 below. Failure to do this may result in a failed order due to a null/non-present token.

This is all you need to do to collect your customer's card details.

Up to this point, we have not actually charged the user any money. The only thing you have done is to store their card details securely with Worldpay. Charging your customer the money needs to be done from your server, which will be explained in the next tutorial.

Step 2:Make the payment from your server

For Advanced Usage

Please take a look at theAdvanced Usage Documentation

Suggested next steps