Integrate (basic)

Prerequisite: You've followed the steps inBefore you startto get your account set up.

How to quickly build a simple integration:

How it works

Here's how the basic integration to us works:

  1. You put a 'Pay now' button on your website for customers to click.

  2. The button sends them to our payment method page, where they choose how to pay.

  3. Clicking a payment method sends them to our secure payment page. They enter their card details and click Make payment.

  4. The button takes them to a confirmation page.

  5. We securely process the payment and send you and your customer a confirmation email. The transaction also arrives in your Worldpay interface, the Business Manager, where you can manage it (e.g. refund)

Generate a button

To make the first step easy, we've built a button generator. This lets you quickly build the right code for a 'Buy this' button on your website.

About the button generator

The button generator is designed for a simple type of 'Buy this' button. This button is useful for charging your customer for one product (or service). If you plan to sell multiple products, you can create one of these buttons for each product.

Best practice: If you plan to sell many products on your website and use a single 'Pay Now' button to calculate the total, we recommend that you use ashopping cart, or get a developer to build a more sophisticated integration for you.

Things you need

Before you use the button generator, you need:

  • Yourinstallation Id

  • The price (incl. VAT) that you'll want to charge when the button is clicked - this goes in the Transaction Value field.

  • Some text to identify the product (e.g. "Shirt - medium") - this goes in the Cart Id field.

Note: There are many currencies available in the test system - be sure to choose only the ones you accept on your Live website.

Use the button generator

Use the button generator to turn your settings (e.g. price) into some code for the button. When the code is generated, place this code into your website where you want the 'Buy This' button to be.

Note: For more buttons (more products), just use the generator again with a different price (Transaction Value) and product name (Cart Id).

Send a test transaction

Use the button(s) you generated to send your first test transaction and simulate your shopper's journey. No real money is involved.

Note: The test system isn't a reflection of payment methods and currencies on your account, so you might see more options here than your customers will.

Send transaction

  1. Click one of the 'Buy This' buttons on your website to be taken to the Secure Payment page.

resources/images/paymentmethodselectionpage_thumb_350_0.png

  1. Under Payment method, select Visa to be taken to the payment page:

    resources/images/paymentpage_thumb_350_0.png

  2. Fill out these details:

    FieldDetails
    Card numberType: "4444333322221111"
    Security CodeType: "555"
    Expiry dateChoose any date in the next 7 years
    Cardholder's nameType "AUTHORISED"
    Address 1, 2, 3 etc.Type any address
    Email addressPut your email address here, so you can see the email your shoppers receive
  3. Click Make payment to be taken to the confirmation page:

    resources/images/confirmationpageauthorised_thumb_350_0.png

Check transaction

  1. Log in toBusiness Managerand switch totest mode.

  2. Click TRANSACTIONS to go to the Payments screen. You'll see your test transaction. For more information about this page, see theBusiness Manager guide.

    Some common things to check are:

    Using a large amount to test. Try just 1.00.

    Using a currency that is not on your account. Try GBP or EUR.

    <note type="default"><b>Note:</b> If you're still having issues, contact our technical support team at <a href="mailto:support@worldpay.com">support@worldpay.com</a>.</note>
    

Check the notification email(s)

Log in to your email. You should see two emails from Worldpay:

  • A notification email for you, confirming the transaction

  • A notification email that your customers get (if you put your Email address in above)

    Note: These are the default email designs. You can customise them - we explain how inCustomise (Basic).

Send customers back to your website

By default, when a transaction is complete your customers remain on the confirmation page shown below. We recommend that you send them back to your website so they can continue shopping. This also makes for a smoother experience.

resources/images/confirmationpageauthorised_thumb_350_0.png

Two types of confirmation page

There are two possible outcomes that lead customers to the final page:

  • The transaction has gone through, which leads to the Thank you page

  • The customer clicked Cancel during the process, which leads to the Cancellation page

    Note: If the wrong card details were entered, or if the card was declined, the customer can't get past the payment page until they correct their mistake (or use another card), so there is no confirmation page for these scenarios.

Create two files

Create two HTML files containing the web address (URL) of the page that you want your shoppers to be directed back to when they have finished (or cancelled) the transaction.

  1. The first file is for a successful transaction. Below is an example of HTML you could use for this file. You can copy the text:

    Copied!
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
      <HEAD>
        <meta http-equiv="refresh" content="5;url=http://www.mywebsite.co.uk/thank-you.php" />
      </HEAD>
      <WPDISPLAY FILE=header.html>
      <BODY>
        <br/>
        <p>Thank you for your payment – please wait while we redirect you.</p>
      </BODY>
    </HTML>
  2. Paste it into a text editor (like Notepad), then change the website address (after "url=") to point to your website.

  3. Click File > Save As and type resultY.html. Click Save.

  4. The second file is for a transaction that is cancelled by your customer. Below is an example of HTML you could use for this file. You can copy the text:

    Copied!
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
      <HEAD>
        <meta http-equiv="refresh" content="5;url=http://www.mywebsite.co.uk" />
      </HEAD>
      <WPDISPLAY FILE=header.html>
      <BODY>
        <br/>
        <p>Your order has been cancelled - please wait while we redirect you.</p>
      </BODY>
    </HTML>
  5. Paste it into a text editor (like Notepad), then change the website address (after "url=") to point to your website.

  6. Click File > Save As and type resultC.html. Click Save.

    Warning: The naming of these files is very important - our system only accepts resultY.html and resultC.html.

Upload your files

Upload your files to our system and test that they are working.

  1. Log in toBusiness Manager.

  2. Click SETUP > Installations .

  3. Click Edit Payment Pages, then choose the Installation ID you made a note of inGet your installation id.

  4. Click Edit Payment Pages to open the Payment Page Editor.

  5. Click File Management.

  6. Click Choose File and find your resultY.html file. Click Open.

  7. Click Upload to add the file to the HTML Files list.

  8. Click Choose File and Upload the resultC.html file.

Test your changes

  1. In the Payment Page Editor, click the Preview link at the top.

  2. Under Test Transaction Submission, click Submit.

  3. Follow the steps inSend a test transactionand click Make payment to be taken to your new confirmation page.

  4. Go back to the Payment Page Editor and click Preview again.

  5. Under Test Transaction Submission, click Submit.

  6. Select a payment method, then click Cancel on the bottom-left. This simulates a shopper cancelling the transaction, and should take them to your cancel page.

This could be because:

You didn't name your files resultY.html (for a successful transaction) and resultC.html (for a cancelled transaction). They must be named like this (including the capitals) or they won't work.

You didn't input the correct website address into this line: <meta http-equiv="refresh" content="5;url=<span style="color: #f01e14;">http://www.mywebsite.co.uk</span&gt;" />

If you're still having problems you can email our technical support team atsupport@worldpay.com.

Copy your changes to production

Copy the resultY.html and resultC.html files to the production environment, ready to go live:

  1. In the Payment Page Editor, click Copy to Production.

  2. Click Yes to confirm.

Go live

Once you've checked that the test transaction and your confirmation pages have worked, and yourwebsite is compliant, you're ready to request that we switch on your account to take live payments.

Request activation

  1. Log in toBusiness Managerand switch toProduction mode.

  2. Click SETUP then Installations.

  3. Look for the Select Junior installation, and click the green tick under Start Trading.

  4. Under Installation Activation Details, enter your website address in Your website URL for activation.

  5. Check the box Confirmation that your website URL is correct .

  6. Write "Please test this account" in the notes section and click Save Changes. This sends us the request to check and activate your account for live payments. When we've completed your compliance checks we then send you a confirmation email.

    Note: Checking and activating your account typically takes up to 48 hours, but it can take longer if your website is notcompliant.

Make your 'buy this' button(s) live

Once we've completed the system checks and made your account live, you can make the final changes to your 'Buy this' button(s) to accept real payments:

  1. In your 'Buy this' button code for each button you have, remove "-test" from this line:

    Copied!
    <form action="https://secure-test.worldpay.com/wcc/purchase" name="BuyForm" method="POST"/>;

    So you end up with:

    Copied!
    <form action="https://secure.worldpay.com/wcc/purchase" name="BuyForm" method="POST"/>;
  2. Then change the "testMode" value from 100 to 0. From this:

    Copied!
    <input type="hidden" name="testMode" value="100">

    To this:

    Copied!
    <input type="hidden" name="testMode" value="0">
  3. Save and upload your changes to your site.

  4. Finally, to make sure that everything is working, we recommend that you make a final test transaction with a real card as if you were a customer. Use a small amount, and refund it afterwards using theBusiness Manager.

    If you received the error message 'no suitable accounts for this purpose' or 'No currency value / variable is being passed across', you've made a real card transaction when your live account isn't enabled yet. Contact