Accepting payments online is important to any company that sells something on the Internet or deals with money: e-commerce sites, SaaS platforms, membership services or online investment platforms.
In this article, we will cover several payment gateways. We will look at the 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 you will learn in this post:
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 website and make 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 the 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 ecommerce 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 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 that you are halfway through your journey on learning how to create a payment gateway for 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 in a website, you must have heard about the most well-known hosted gateways are PayPal (of course!), Amazon Payments, Stripe, SagePay. Let’s have a closer look.
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 Express Checkout fee structure
✓ 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.
The easiest option is Paypal Express Checkout integration – it adds a button on your checkout page like this:
In order for it to appear on your page, you need to add the checkout.js script, which includes the following code:
<div id="paypal-button"></div> |
<script src="https://www.paypalobjects.com/api/checkout.js"></script> |
<script> |
paypal.Button.render({ |
// Configure environment |
env: 'sandbox', |
client: { |
sandbox: 'demo_sandbox_client_id', |
production: 'demo_production_client_id' |
}, |
// Customize button (optional) |
locale: 'en_US', |
style: { |
size: 'small', |
color: 'gold', |
shape: 'pill', |
}, |
// Set up a payment |
payment: function (data, actions) { |
return actions.payment.create({ |
transactions: [{ |
amount: { |
total: '0.01', |
currency: 'USD' |
} |
}] |
}); |
}, |
// Execute the payment |
onAuthorize: function (data, actions) { |
return actions.payment.execute() |
.then(function () { |
// Show a confirmation message to the buyer |
window.alert('Thank you for your purchase!'); |
}); |
} |
}, '#paypal-button'); |
</script> |
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 Express does is provide a detailed order summary with all the line items. If an order is cancelled, PayPal Express automatically refunds the amount to the user.
PayPal Express Checkout modules are available for a number of e-commerce platforms like Magento, Shopify, WooCommerce, OpenCart, Joomla and other shopping carts.
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.
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 in a website.
If you run your store using an e-commerce platform, you can save yourself some trouble and go with installing the extensions. A 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.
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 e-commerce platform.
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.
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.
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 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 services.
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 here.
Besides, Authorize.net CIM is PCI compliant and FREE.
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 a toll-free phone support, online chat, and an eTicket system to help you out.
2. SagePay Direct Integration
SagePay Direct allows for seamless integration into your website.
It gives a 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, a 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.
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 may be 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 a 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 payment gateway to 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.
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, or even 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 them 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.
We know sometimes it’s not that easy to decide provided the number of options, so no matter what – count on us and we shall talk about how to create a payment gateway for a website with no hassle.
We’ll be glad to answer any remaining questions you have, explain how to include payment gateway in website further, build something together or just talk about how likely bitcoin is to crash again and when
Cheers!
0 comments:
Post a Comment
Subscribe to Perfect BloggersTech by Email
Don't Spam Here ! You will Be Blocked Permanently