mike_mackrory

How to Troubleshoot a Test Payment Fail on Worldpay Hosted Payments

Blog Post created by mike_mackrory on Mar 5, 2019

 

Worldpay hosted payment pages provide websites with a simple and secure way to integrate payments into a site without the additional overhead of PCI compliance and the benefit of access to a multitude of payment types.

 

In this article, we’re going to look at this solution and walk through some tips for troubleshooting when test payments fail. We’ll be using the C# example which is available on GitHub and offers users a demo application which they can configure to use with a test account. We’ll cover setting up a test account below (if you haven’t already set up an account).

 

Browser Requirements

 

The hosted payments solution is added to websites using an iframe or lightbox control. In this article, we’ll be referencing the iframe specifically, but the same applies to the lightbox as well. The solution also makes use of JavaScript, so you’ll want to ensure that the user's browser has JavaScript enabled.

 

If you’re using the demo application, and are unable to click on any of the buttons, this is a good indication that JavaScript is disabled for the site. Using the <noscript> tag is an excellent way to indicate to users that they need to enable JavaScript to checkout using your website.

 

<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
        This website requires that Javascript is enabled.
    </div>
</noscript>

  Figure 1. HTML to Detect a Browser that Does Not Have JavaScript Enabled.

 

If you can navigate to the checkout page, but are unable to view the Payment iframe, then it is likely that you haven’t configured the account credentials, there is an error in the configuration, or there was a problem setting up the transaction. If you are using the example application, and view the page source, you may observe an error indicating that iframes are disabled. The disabled iframe message is the default message which is displayed if the page is unable to set up the transaction, or retrieve the iframe from the payment processor.

 

We’ll walk through each of these problems in detail and discuss symptoms and how to resolve them.

 

Setting Up a Test Account

 

Requests to the Hosted Payments Service need to have the following information included:

 

  • Account ID
  • Account Token
  • Acceptor ID
  • Application ID
  • Application Name
  • Application Version

 

Application Name and Version are required, but these fields are for you to add information about your application. The remaining values require you to sign up for a Worldpay test account. You can sign up for a test account here.

 

Figure 1. Creating a Worldpay Test Account

 

Validating Your Configuration

 

When you create your test account, you’ll receive an email similar to the one below that has all the required values for your new account. The email also contains test URLs for your test hosted payments and links to documentation for hosted payments and other services which you’ll use with your test account.

 

Figure 2. Email with Account Information for Worldpay Test Account.

 

If you’re using the C# example, the Web.config file in the root folder of the project contains the Account Configuration. Validate that you have configured all six elements in your project and that values match those for your test account. If Worldpay can’t verify your account, then the iframe cannot be displayed.

 

The Anatomy of a Transaction

 

A complete transaction is a series of steps, which begin before the customer is prompted to enter their information. The first call sets up the transaction. The TransactionSetup is a POST request which includes the account credentials, terminal information, style information for the iframe, and the return URL. The call is handled by the server to prevent account information from being exposed to the end user. Once the transaction is set up, the browser can request the iframe.

 

 

<?xml version="1.0"?>
<TransactionSetup xmlns="https://transaction.elementexpress.com">
  <Credentials>
    <AccountID>#####</AccountID>
    <AccountToken>#####</AccountToken>
    <AcceptorID>#####</AcceptorID>
  </Credentials>
  <Application>
    <ApplicationID>#####</ApplicationID>
    <ApplicationVersion>1.0</ApplicationVersion>
    <ApplicationName>HostedPayments.CSharp</ApplicationName>
  </Application>
  <Terminal>
    <TerminalID>01</TerminalID>
    <CardholderPresentCode>2</CardholderPresentCode>
    <CardInputCode>5</CardInputCode>
    <TerminalCapabilityCode>3</TerminalCapabilityCode>
    <TerminalEnvironmentCode>2</TerminalEnvironmentCode>
    <CardPresentCode>2</CardPresentCode>
    <MotoECICode>1</MotoECICode>
    <CVVPresenceCode>1</CVVPresenceCode>
  </Terminal>
  <Transaction>
    <TransactionAmount>6.55</TransactionAmount>
  </Transaction>
  <TransactionSetup>
    <TransactionSetupMethod>1</TransactionSetupMethod>
    <Embedded>1</Embedded>
    <AutoReturn>1</AutoReturn>
    <ReturnURL>http://localhost:51619/Home/Complete</ReturnURL>
    <CustomCss>body{margin-left: 50px; …}</CustomCss>
  </TransactionSetup>
</TransactionSetup>

Figure 3. XML Request to Set Up a Transaction

 

In response to the request above, the processor returns the following, which includes a transaction number. This number is used by the client or browser to request the iframe.

 

<?xml version="1.0"?>
<TransactionSetupResponse xmlns="https://transaction.elementexpress.com">
  <Response>
    <ExpressResponseCode>0</ExpressResponseCode>
    <ExpressResponseMessage>Success</ExpressResponseMessage>
    <ExpressTransactionDate>20181230</ExpressTransactionDate>
    <ExpressTransactionTime>162113</ExpressTransactionTime>
    <ExpressTransactionTimezone>UTC-06:00:00</ExpressTransactionTimezone>
    <Transaction>
      <TransactionSetupID>
A5EC4889-89870E7CEB97</TransactionSetupID>
    </Transaction>
    <PaymentAccount> 

      <TransactionSetupID>A5EC4889-89870E7CEB97</TransactionSetupID>
    </PaymentAccount>
    <TransactionSetup>
      <TransactionSetupID>
A5EC4889-89870E7CEB97</TransactionSetupID>
      <ValidationCode>068F65440B</ValidationCode>
    </TransactionSetup>
  </Response>
</TransactionSetupResponse>

Figure 4. XML Response with Transaction ID

 

If you enable debugging on your local server and step through the code, you should be able to see the response coming back from the processor. I was able to create a couple of different errors by changing aspects of the request I sent.

 

<?xml version="1.0"?>
<Response xmlns="https://transaction.elementexpress.com">
  <Response>
    <ExpressResponseCode>103</ExpressResponseCode>
    <ExpressResponseMessage>Invalid Request</ExpressResponseMessage>
  </Response>
</Response>

Figure 5. Example of a Response for an Invalid Request

 

In the case above, this was due to not setting the correct headers on the request. For XML requests to the payment processor, the required headers are:

 

  • Content-Type: text/xml
  • Accepts: text/xml

 

<?xml version="1.0"?>
<Response xmlns="https://transaction.elementexpress.com">
  <Response>
    <ExpressResponseCode>103</ExpressResponseCode>
    <ExpressResponseMessage>TargetNamespace required</ExpressResponseMessage>
  </Response>
</Response>

Figure 6. Another Example of a Response for an Invalid Request

 

In the case shown in Figure 6, the namespace was incorrectly set. The XML namespace is set on the parent element and should take the following format.

 

<TransactionSetup xmlns="https://transaction.elementexpress.com">

 

Troubleshooting Client Payment Submission Errors

 

The request from the iframe is synchronous and returns the results of the transaction, and redirects the browser on a successful transaction to the URL which you specified when you set up the transaction. The processor parses user information completeness and validity. Below are some of the results which appear in the browser for missing or invalid data.

 

Figure 7. Missing Information on the Payment Information Form

Figure 8. Invalid Card Information on the Payment Information Form

 

Additional Help

 

If you are still experiencing problems with your test payments, you can visit the Vantiv Developer Portal to see if other developers have experienced similar problems and posted their solutions. You can also reach out to a Worldpay representative here

Outcomes