In this article, we will cover several payment gateways, look at their distinctive features, explain transaction types, and guide you on how to integrate a payment gateway into a website.
It will be a long one, so make yourself a cup of something hot and tasty – and read on.
What is a payment gateway
Before you learn how to add a payment gateway to a website in great detail, it’s important to understand what it actually is.
A payment gateway processes credit cards at online and offline stores. It transfers the key information between websites/mobile devices and payment processors/banks, and vice versa.
So if you decide to integrate payment into a website and make the user experience smooth, think of the gateway as a tool to deal with all the financial transactions online.
Basically, it’s an online representation of a real point of sale terminal that you see in retail stores. To ensure transaction safety and protect your website from fraud, a payment gateway encrypts all sensitive information: credit card number, expiration date, and CVV code.
How does a payment gateway work
The main task of a payment gateway is to process credit card information of online customers dropping to your e-commerce store for example.
See our step-by-step tutorial to get familiar with the process A to Z.
1. The customer presses the “Place order button at checkout. The browser encrypts the payment details and sends them to the merchant’s web server via SSL connection.
2. The merchant sends these details to a gateway – again via an encrypted SSL connection.
3. The payment gateway sends the information to the payment processor, which, in turn, forwards it to the card association (Visa, MasterCard, etc.).
4. The bank that issues the credit card receives an authorisation request and sends a response code back to the payment processor. The response code contains information about the transaction status (approved or failed) and the error code in case the transaction failed (insufficient funds, etc.).
5. The payment processor sends the response code on to the gateway, and from there it’s forwarded back to the website.
6. The website displays a relevant message to the customer.
The whole process takes as little as 2-3 seconds!
Payment gateway for a website: transaction types
Before jumping into the details of payment gateway integration, let’s see what types of payment transactions exist – depending on your business, you may want to pick a specific one for your e-commerce site or a portal.
The common transaction types are authorisation, capture, sale, refund, and void.
Authorisation
This type is used to determine the customer’s ability to pay and find out if there are enough funds on their credit card. The actual fund transfer doesn’t take place in this case.
It makes sense to use the authorisation transaction type if it takes some time for you to ship the products ordered online and you need to guarantee the funding by the card issuer.
Capture
Capture transaction lets you capture the money that was previously authorised and send it for settlement. Thus, if you sold a product online that took time to manufacture/prepare for shipping, you first need to authorize the payment, and when the product has been shipped – capture the amount, and it will be transferred to your account.
Sale
Sale transaction combines authorisation and capture. If you fulfil orders immediately that’s the transaction type you should use – the money is charged and transferred at once. It will also be suitable if you sell a service membership and immediately provide the user with access.
Refund
Things happen, and if an order has to be cancelled for some reason, the merchant will need to refund a transaction and submit it for processing. Most of the time, a refund is limited to the original amount authorized and can only be applied to Sale and Capture transactions.
Void
A void transaction is similar to a refund, but it can only be applied if the transaction hasn’t been settled (captured) yet. Typically, the transaction will disappear from the customer’s account statement within 24 hours, while it may take 3 to 5 business days to process a refund. Voids are also a bit cheaper than refunds.
Payment gateway types and providers
Now that you are halfway through your journey on learning how to create a payment gateway for a website and familiar with major, let’s see what the market has to offer in terms of gateways – it always makes sense to check the ready solutions first before you decide to integrate a payment gateway into a website from scratch.
There are two types of payment gateways to enable – non-hosted and hosted.
Hosted payment gateways
These gateways take your customer away from your website to complete the payment and then redirect them back once the process is complete.
They take care of transaction security and are quite easy to integrate into your website. However, you lose control of what happens and your customer might just get distracted and navigate away.
If you already did some homework and read about how to add a payment gateway to a website, you must have heard about the most well-known hosted gateways are PayPal, Wise (formerly TransferWise), Amazon Payments, Stripe, SagePay. Let’s have a closer look at some of them.
1. PayPal
If you need to add a payment gateway to a website or portal, PayPal might be the first option that pops up because it’s known to be reliable, flexible, and many people all over the world have PayPal accounts.
In terms of security, PayPal monitors all activity around the clock and offers advanced encryption for fraud protection.
PayPal Checkout fee structure (formerly PayPal Express)
✓ 2.4% to 3.4% (depending on the sale’s volume) + $0.30 per transaction
✓ No setup fees
It works in every country where PayPal is accepted, easily integrates into any web page, and comes with a detailed integration manual from PayPal.
When the user clicks “Check out with PayPal”, they will see a popup where they need to log in to their PayPal account and authorize the amount required. Upon payment completion, the user is taken back to the website where they normally see an order confirmation page.
You can customise the colour, shape, and size of the button, as well as define the error codes and messages that appear when the user authorises or cancels the payment.
One great thing PayPal Checkout does is provide a detailed order summary with all the line items. If an order is cancelled, PayPal Checkout automatically refunds the amount to the user.
PayPal Checkout modules are available for a number of e-commerce platforms like Magento, Shopify, WooCommerce, OpenCart, Joomla and other shopping carts.
PayPal case study
If you still hesitate whether or not PayPal fits your bill, check some of the case studies explaining how this website payment solution has helped its clients.
Kids Help Phone is one of PayPal clients who selected the provider because of its security and utility.
The company was striving to increase donations among young people, that’s why its primary goal was to find a solution that makes it easier for youngsters to contribute.
PayPal is easy to set up, popular among the young audience and offers many payment options. As a result, the company managed to raise $55,000 for the first time using PayPal.
2. Amazon Pay
Amazon Pay is another easy option if you plan on integrating a payment gateway to your website.
Unlike PayPal Express Checkout, it doesn’t take the user completely away from your website and thus is not a 100% hosted solution. Instead, it incorporates nicely into the look and feel of your website and lets your customers use the credit cards they have already stored in their Amazon account after they log in with their Amazon login and password.
Source: https://docs.miva.com/reference-guide/amazon-pay
Amazon Pay accepts MasterCard, Visa, Discover, American Express, JCB, and Diner’s Club credit cards. One shortcoming though is that the cards must have a US billing address.
Amazon Pay fee structure
✓Amazon Payment charges per transaction and separately applies a domestic processing fee of 2.9% plus $0.30 for an authorisation fee. When the purchase is cleared and processed, the tax is charged where applicable.
How to integrate Amazon Pay
1. To get started, get an Amazon Pay account and connect your website to Login with Amazon:
2. Then set up an Amazon Sandbox account which you will use for testing purposes.
3. Get an SSL certificate.
4. Get the following Amazon Pay credentials:
✓ Merchant ID (seller ID)
✓ MWS Access Key and MWS Secret Key
✓ LWA Client ID and Client Secret
There are two scenarios that can help you when planning on how to add a payment gateway to a website.
If you run your store using an e-commerce platform, you can save yourself some trouble and go with installing the extensions. Detailed documentation is available for Magento, WooCommerce, and you can see the full list of integrations with the rest of the shopping carts here.
If your online shop is custom and not powered by any CMS, you can hire a developer to help you integrate Amazon Pay using an API. It comes together with a detailed integration guide that includes code samples and testing scenarios.
Amazon Pay case study
If you aim to add a payment method to the website to increase conversions or enhance customer experience, go for Amazon Pay.
AllSaints, a fashion retailer, admits that integration Amazon Pay into their system has increased checkout conversions by 34%.
As Rich Ascott, Global Digital Director at AllSaints, mentions the gateway remembers all the credit card details and users don’t have to re-enter this info. It proves the fact that clients receive a better buying experience with Amazon Pay.
Another huge benefit of the solution is stress-free installation and integration.
3. Stripe
Yet another hosted solution for online payment gateway integration – and with a beautiful logo 🙂
Stripe is simple to use and PCI-compliant. It accepts all major credit cards and works with Apple Pay, Alipay, Android Pay, and WeChat Pay (beta). Popular platforms that use Stripe: Kickstarter, Twitter, Shopify, Pinterest.
Stripe fee structure
✓ 2.9% + $0.30 per transaction. Additional 1% is applied to international cards.
To integrate Stripe, follow the guidelines or search for a ready module if you use an e-commerce platform.
Stripe case study
Stripe goes beyond online payment processors servicing clients offline.
For example, Universe, a global ticketing platform, has been partnering with Stripe to bring new user experience through different channels.
Universe is using Stripe Terminal as a means to power in-person ticket sales. The company didn’t want to introduce a separate POS system, that’s why they picked Stripe to plug and play with the existing system.
Joshua Kelly, the CTO of Universe, admitted it took them only a few sprints and developers to settle everything.
Typeform needed a billing system to adapt pricing to new products, markets and more complex deals. Charity: Water was in the quest of a solution to streamline their mobile and web donation flows.
Both picked Stripe and never regretted about this.
4. SagePay
SagePay provides two hosted solutions: form integration and server integration.
Form integration is the easiest and the cheapest. On checkout, it redirects your customer to a secure Sage Pay page, collects payment details, and authorises the transaction. When done – it takes the customer back to your website. Pretty much like PayPal Express Checkout.
SagePay Form Integration doesn’t store any credit card details on your end and facilitates your PCI compliance so you don’t have to worry about that.
There are integration kits available to integrate SagePay Form with applications written in Java, PHP, and .NET, as well as a well-documented API.
The server integration is the same as Form Integration, only it will have your server communicate with SagePay in order to store customer information and transaction details.
SagePay fee structure
✓ Pricing plans of SagePay depend on the number of transactions per month and start from £20.90 – no per-transaction fees here.
SagePay case studies
Considering to add SagePay to your site? Check what others are saying about this self-hosted payment gateway.
Maoloisa Connell, Marketing Manager at Avoca says that with Sage Pay Dynamic Currency Conversion they’re able to serve lots of international clients and contactless payments have become the benefit of their shops and stores.
For Europcar, the greatest merit of SagePay is its security and reliability. The solution is easy to install and fully compliant with PCI requirements.
Another customer of SagePay is HFE (Health and Fitness Education) highlights the provider’s simplicity and user-friendliness that makes taking customer payments absolutely effortless.
Non-hosted (integrated) payment gateways
Now let’s look at those gateways that smoothly integrate into your website and keep the user only at your store or platform without taking them away and pay somewhere else.
First things first – security.
This comes as a slight disadvantage with non-hosted solutions to help you integrate payment into a website.
Since they work on your server and usually store your customers’ credit card information. Thus, you must ensure fraud protection, secure cardholder information storage, and PCI-compliance (preferred) yourself.
The vast majority of non-hosted gateways come with extensive APIs and readily available modules to integrate into your shopping cart. However, if you run your website with a custom engine, you will have to shell out on custom programming to integrate the payment gateway to your website.
Let’s take a look at some of the non-hosted payment gateways, go through their features and fee structure.
1. Authorize.net
It’s one of the dinosaurs in the payment gateway world that started operations back in 1996.
Authorize.net accepts all major credit cards and works with digital solutions like PayPal, Visa Checkout, and Apple Pay.
It identifies and manages potential fraudulent transactions via Advanced Fraud Detection Suite™, provides address verification service, card code verification, and supports Verified by Visa and MasterCard SecureCode™.
The 7 step card processing is explained in a clear diagram.
Authorize.net is compatible with credit cards issued anywhere in the world, but your business should be located in the US, the UK, Canada, Europe, or Australia.
This solution can also be integrated into mobile apps related to your portal:
– Mobile In-App Payments: the data is not stored on your servers.
– Mobile Web Checkout: accept.js is used to integrate a web payment form with the look and feel of your website and still keep PCI-DSS compliance since the transaction details are sent directly to Authorize.net servers.
– Mobile Point-of-Sale App: a free mPOS mobile application that allows accepting in-person payments via Apple iOS and Android devices and a card reader.
Source: https://www.authorize.net/
There is one more great solution Authorize.net offers – Authorize.net CIM service. CIM stands for Customer Information Manager which tokenises and stores the credit card information of your customers on Authorize’s own secure servers.
So if you have a returning customer, they will be able to find the credit card information they already used on your site in their profile. This information is immediately retrieved via a token from secure servers.
There is a possibility to store multiple payment methods under one account, process recurring transactions, save multiple shipping locations and more – check the details.
Besides, Authorize.net CIM is PCI compliant and FREE.
Source: WooCommerce
As for the integration part, there are, again, numerous modules and extensions available to integrate Authorize.net with your CMS.
Authorize.net fee structure
✓ 2.9% + $0.30 per transaction;
✓ $49 merchant account setup;
✓ $25 monthly gateway;
It’s also worth mentioning they have toll-free phone support, online chat, and an eTicket system to help you out.
Authorize.net case studies
Authorize.net is a real go-to for small sole proprietors and large corporations.
Shayna Vest, a founder and owner of Dress Like A Pirate.com admitted that she’d been using the solution since 1996 and it never let her down. She emphasized on professional assistance and help from the provider’s tech team.
With Authorize.net, Best Ring Point of Sale has created a sophisticated mobile POS system to arrange special events and festivals. To make a transaction, registrants just need to tap their wristband against the POS system and enter a PIN.
The primary goal of the company was to minimize coding efforts and integrate a gateway to accept payments on the website via SDKs.
Authorize.Net provides developers with multiple resources to help embed digital payments into any system or infrastructure.
2. SagePay Direct Integration
SagePay Direct allows for seamless integration into your website.
It gives full control of checkout experience and doesn’t take your customer away from the site to complete payment.
Everything happens in one place, and all the details of transactions, payments and customer information are stored on your own server. Of course, ensuring security is on you in this case.
There are many plugins for Magento, WooCommerce, OpenCart and other e-commerce platforms to help you with the integration. In addition, handy documentation is available for custom applications.
3. MangoPay
This gateway will suit you if you run a crowdfunding website or a marketplace.
With MangoPay, users always stay on your platform and you are free to customize the look and feel of your checkout page. In addition, it manages PCI requirements, doesn’t store anything on your servers, provides a 3D Secure payment on-demand, as well as KYC and AML checks.
The table below lists all payment methods MangoPay works with:
If you plan to integrate online payment into a website and decided to choose MangoPay, make sure to check if your business is eligible to work with it as these guys are very straightforward about the companies and high-risk products they don’t deal with.
MangoPay fee structure
✓ 1.8% + €0.18 per transaction.
MangoPay case study
Only during their first year on the market, MangoPay established a partnership with more than 200 customers from the fashion industry, crowdfunding and collaborative consumption platforms.
A few years ago, MangoPay has won new clients in the UK market – savings app Plum, Insure Street, and Simple Equity.
The provider reports that mutual collaboration with startups let them discover the needs of clients and continue evolving their technology.
Top managers of Plum comment that MangoPay online payment integration was smooth and e-wallet technology has made payment transactions fast and effective. The solution was adapted to their system and delivered optimal mobile experience.
Is it worth creating a payment gateway from scratch?
Congratulations if you made it this far!
Now that we covered a number of ways on how to integrate online payment into a website, let’s see what it takes to develop your very own custom gateway.
Having a payment gateway you have a 100% control of maybe a great idea. You’ll be able to modify it this way or the other, implement unique features, and relieve yourself from paying the processing fees.
Let’s be honest – a fully-fledged custom payment gateway is an expensive undertaking and may cost you an arm and a leg. If we talk numbers, it’s anything from $150K and up.
To start, you will need to plan the flow very carefully, write highly detailed documentation keeping in mind everything from the ease of checkout flow to financial regulations and PCI compliance. Besides, you will need to look for an acquirer so that they register your custom gateway in their payment networks.
Then again, you will need a hosted payment page, a well-documented API, as well as administration and merchant dashboards to add a payment gateway to a website.
If you have time and money (and also courage) – definitely go for it.
To top it off, if you need to launch your website with payment gateway fast, we suggest considering the ready-made solutions, some of which we described in this article.
How to get a payment gateway compliant with industry requirements?
Compliance with existing standards is crucial to any payment gateway provider. Here are a few industry standards you’re obliged to meet.
Payment Card Industry Data Security Standards (PCI DSS) — a set of requirements for any entity that stores, processes, or transmits cardholder data and/or sensitive authentication data. It consists of three aspects: handling card data, secure data storage and annual validation.
General Data Protection Regulation (GDPR) — a new law for more customer-friendly and detailed disclosures of privacy and data protection practices that can be applied to organizations located in the EU and outside. It covers data controllers and processors, individuals’ rights and international data transfers.
Strong customer authentication (SCA) — a requirement of the EU Revised Directive on Payment Services (PSD2) on payment service providers within the European Economic Area. The goal of the requirements is to make sure that electronic payments are secured by the multi-factor authentication procedure.
Bottomline
The choice of payment solutions out there is vast.
There’s no need to reinvent the wheel when deciding on how to create a payment gateway for a website:
- you can go with hosted and non-hosted gateways;
- find ready modules to integrate into your site
- build your own if you wish to be more creative and integrate payment into a website that differs from off-the-shelf offerings.
Some of the off-the-shelf services charge per transaction and some – a fixed cost on a monthly basis. Some are flexible with the businesses they work with while some have restrictions.
