How to connect your online shop to your gateway
If you have your own custom website, there are two ways to connect your payment gateway and your website:
In this article, we break each of these methods down.
Simple method: Hosted payment / checkout page
A hosted checkout page is a custom payment web page hosted on your payment gateway supplier’s website.
With this method, your customer goes from your website, pays via a checkout page hosted on your gateway supplier’s website, and is directed back to your website.
Because this is the simplest way to link your gateway to your online shop, this method is recommended for most small- and medium-sized businesses.
Here we look at the typical shopping checkout process in more detail:
1) The customer visits your website, and adds a product to their basket.
2) On the shopping basket page, the customer double checks what’s in the basket and the total cost, before clicking the ‘checkout’ button.
3) The customer is directed to the hosted checkout page so they can pay for their goods.
4) The customer fills in their payment details and delivery address, and applies any discount codes, before clicking a ‘Buy now’ button.
5) The checkout page sends the payment request through the payment system, and within seconds, the payment is complete.
6) The hosted checkout page automatically directs the customer back to your website – normally a ‘Thanks for shopping with us’ confirmation page.
7) The payment gateway behind the checkout page confirms the transaction to your system, which can trigger a confirmation email to be sent to the customer, and update your order fulfilment systems.
Customising your hosted checkout page
Even though the checkout page is technically on the gateway supplier’s website and not yours, you should still be able to customise the page to have the same look and feel as your own website.
Customisation helps maintain a consistent brand experience, and gives the customer trust in the payment process.
You may want to use a payment page with the payment gateway supplier’s logo on it (e.g. Barclaycard, PayPal). This can help inspire confidence if the customer thinks the gateway supplier’s brand is reputable, so it helps to choose a supplier who the public have heard of.
Advantages and disadvantages of a hosted checkout page
|
Advantages |
Disadvantages |
|---|---|
|
Easy to do – the checkout page can be easily linked to from your site |
Hosted checkout pages aren’t as customisable as other pages on your own website |
|
Customisable page, e.g. adding your logo, changing fonts and colours to match the look and feel of your site |
Customers sometimes may not trust the hosted payment page if it looks different to your site |
|
Worry less about PCI DSS compliance – cardholder data is going onto the gateway supplier’s servers and not yours |
You’re relying on your gateway provider to be fully PCI DSS compliant (though this doesn’t make you liable in the case of a breach) |
|
If you’re a relatively unknown brand, customers may feel more confident checking out on a page hosted by a trusted brand name, such as Barclaycard |
Advanced method: Direct integration using API
This is where the payment gateway functionality is integrated directly into your website’s code, using an Application Programming Interface (API).
Due to the complexity of this method, it’s only recommended for larger and more complex businesses that have the resources to integrate the gateway directly into their website.
In this method, the shopping process looks something like this:
1) The customer visits your website, and adds a product to their basket.
2) On the shopping basket page, the customer double checks what’s in the basket and the total cost, before clicking the ‘checkout’ button.
3) The customer is directed to a checkout page hosted on your own site, which has the payment gateway API directly integrated into it.
4) Your checkout page sends the payment request through the payment system, and within seconds the payment is complete.
5) The customer is automatically directed to your ‘Thanks for shopping with us’ confirmation page.
6) The payment gateway behind the checkout page confirms the transaction to your system, which can trigger a confirmation email to be sent to the customer, and update your order fulfilment systems.
Advantages and disadvantages of an integrated checkout page
|
Advantages |
Disadvantages |
|---|---|
|
Gives most control over brand and shopping experience |
You’ll need a developer to build your checkout pages |
|
Shoppers never leave your site to fill out payment information – maintaining brand image consistency |
Shifts much of the PCI DSS compliance requirements onto you, as opposed to the gateway provider |
Want to start taking payments online?
Barclaycard provides payment gateways and payment processing services as one easy-to-manage service. Call us on 0800 056 1289 (Monday to Friday 8.30am-6pm, excluding bank holidays) to speak to one of our advisors.
Now you’re clued up on how to integrate a payment gateway into your website, you might want to read our other introductory guide: How do online payments work?
Want to accept card payments?
Call us
If you need to speak to an advisor, give us a call on 0800 096 8199
Request a call back
Fill in some details and we'll call you back.