How to integrate a payment gateway into a website

The rise of e-commerce, that was accelerated by the global pandemic, shows no sign of slowing down.

In fact, according to the Worldpay Global Payments Report 2024, e-commerce as a percentage of all commerce reached 14.4% globally in 2023 and it is forecasted to exceed 17% by 2027.

Moreover, high single-digit e-commerce growth is expected even in markets where online shopping is well established, with Europe forecasted to grow by 8% and North America by 7%.

With such tremendous growth coming so quickly, it’s more important than ever to be sure your e-commerce business is set up for success, and that includes the ability to accept payments online quickly and securely through an integrated payment gateway.

In this article, we will cover everything you need to know about how to integrate a payment gateway into your website, including:

• What are payment gateways?
• How does a payment gateway work?
• Types of payment gateways
• How to integrate a payment gateway
• Worldpay payment gateway integration

What are payment gateways?

Payment gateways are essentially the virtual, online version of a physical card-reading device at the point-of-sale (POS).

They act as an intermediary service that securely authorizes, processes, or rejects electronic transactions on behalf of the online business via the internet. The digital tools contained in payment gateways enable e-commerce businesses to accept all the latest online payment types, whether the customer chooses to pay online via debit card, credit card, digital wallet, or EBT (electronic bank transfers).

Beyond secure payment processing, payment gateways enhance the customer experience through intuitive and efficient online checkout experiences that build trust and loyalty. And because payment gateways offer such fast and frictionless payment experiences, they improve conversion rates from browsing online to completed sales.

How does a payment gateway work?

Payment gateways implement several key steps in order to ensure a quick and secure checkout experience online. These include:

Checkout on the payment page

When customers decide to purchase a product or service from your e-commerce site, they enter their payment information – using their credit card, digital wallet, or other payment type – on a secure checkout page. This checkout page is typically a hosted payment page managed by the payment gateway.

Payment encryption and transmission

After your customers enter all their payment information in the hosted payment page, the payment gateway encrypts their sensitive data, including credit card numbers, CVV codes, etc., using secure protocols. This data, protected by payment encryption, is then sent from your website to the payment processor through the payment gateway.

Payment processing

When the payment processor receives the encrypted payment data, they verify that information with the customer’s bank or card-issuing company, confirming that funds are available and that the card is valid. As an e-commerce business owner, working with a trusted payment processor is a critical piece of the secure checkout experience, so be sure to learn more about payment processing as you consider your options.

Payment authorization

The bank or card-issuing company either approves or declines the transaction, and it sends the “approved” or “declined” payment authorization message back through the same channels, from the bank/card company to the payment processor, to the payment gateway, to your website.

Payment gateway response and order update

The payment gateway transmits the authorization response to your online store. If the transaction is approved, your online business receives confirmation, and you can proceed with fulfilling the order. If the transaction is declined, the customer is notified and the transaction stops until the customer enters a valid payment method onto the checkout page, and the process of payment authorization through the payment gateway begins again.

Payment settlement

After a set period, payment settlement occurs, where the payment processor transfers the funds from the customer’s bank account to your merchant bank account.

Types of payment gateways

There are two primary types of payment gateways: integrated payment gateways and hosted payment gateways. Each offer their own advantages and special considerations.

Integrated payment gateways

Integrated payment gateways are payment processing solutions that enable direct payments through an online store or website without redirecting users to a separate platform for payment completion (like hosted payment gateways do). Integrated gateways use an application programming interface, or API, to integrate with your website’s checkout process.

Because integrated payment gateways enable direct payments, the transactions are usually completed faster than hosted gateways, but you will need to be sure transactional security protocols are in place if you opt to handle payments directly on your website using these gateways.

Hosted payment gateways

Hosted payment gateways are payment processing solutions that redirect customers to a separate, hosted platform. With this method, the payment gateway provider manages and hosts the platform that completes your transactions.

While they may be a little slower in processing payments because of the redirect from your website to the third-party platform, hosted payment gateways are easier to integrate within your e-commerce site.

How to integrate a payment gateway

If you choose to integrate a payment gateway into your website, there a few steps you’ll need to take.

1. Create a merchant account

Sign up for a merchant account with your preferred payment service provider. A merchant account is a special type of business bank account that allows you to receive online payments.

2. Acquire API gateway keys

Your payment gateway provider will give you API gateway keys, which act like credentials to connect your website to the gateway’s services.

3. Integrate the gateway

Gateway integration involves using plug-ins for website builders or coding for custom sites.

4. Test the payment gateway

Payment gateway testing is critical to ensure everything is functioning correctly before going live.

Worldpay payment gateway integration

You don’t have to be an IT expert to integrate a payment gateway into your website. In fact, you can complete your Worldpay payment gateway integration in just five straightforward steps:

1. Get started

Register for a Worldpay account (if you don’t already have one), then log into your account through Worldpay Business Manager, the portal that enables your website integration with Worldpay. Choose “Setup” from the left-hand options menu, and then click “Installations.”

2. HTML coding

Copy and paste an example HTML form provided by Worldpay into your website page, and follow the instructions to customize the HTML with your unique installation ID and product ID.

3. Take a test transaction

Make sure your webpage is in “test” mode, then enter test card details into your payments form. If your test payment was successful, you’ll see an “Authorized” or “Successful” notification appear.

4. Request a system check

Once you’ve completed a successful test transaction, request that Worldpay run a system check to make sure you’re ready to go live. This can take up to 48 hours, and Worldpay will send a confirmation email when the system check is completed.

5. Go live!

As soon as the system check is finished, your account will be approved for live transactions. Just make a few final changes to your webpage HTML to move from test mode into live mode.