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 that 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).
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.
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 that you’ll use with your 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.
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.
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.
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
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.
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
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.