Online payment gateways have never been easier to use. These apps enable users to pay on e-commerce platforms and perform internet shopping. It’s a virtual version of the actual point of sale seen in many retail stores. Retailers should be able to take digital payments swiftly, transparently, and simply via a payment gateway. The fundamental goal of any secure payment gateway is to handle transactions in such a way that your customers’ money and their personal data are kept safe.
A bespoke payment gateway generally necessitates a higher time and financial commitment; nevertheless, a custom payment gateway solution will significantly assist your organization in growing and prospering. By API integration of a secure payment gateway, you can earn your clients’ awareness and encourage them to deal with your application. That is why it is better to consider implementing Payment API that is well-known throughout the world and which drawbacks wouldn’t appear as a surprise.
In this article, we put together three prominent Payment gateway API Integration tools, such as Stripe, Apple Wallet, and ApplePay (PayFort API). Since we have experience in integrating every mentioned payment API, we are sharing code fillets to help you go through the deployment process simpler.
Stripe API Integration
First, you need to create an account on the Stripe website. To obtain keys for this Payment API you should navigate to the Developers page and then choose the API keys tab:
On frontend you need to include Stripe.js on your checkout page:
Then you need to create a form where the user can enter payment data. Stripe provides elements that can be used to build the form.
For example, if you use React you can use the ‘react-stripe-elements’ module. First, you need to wrap your application into StripeProvider:
Your form should be wrapped into the Elements component:
Then you should use HOC injectStripe to build your payment form.
Please note: injectStripe should be used on the child of Elements component.
The onSubmit method should pass the Stripe token to the backend and the payment will be executed there.
On the backend, you should use a secret key to execute payment or perform any other action. You can use Stripe SDK for NodeJS:
First you should exchange token you received on frontend to customer id:
With a customer id, you will be able to perform different actions. For example, CRUD operations with customers:
Also, you will be able to create a charge or subscription for a customer:
There is also a possibility to make a subscription to some events on Stripe using webhooks. To create a webhook you should just add an endpoint and select events that will trigger it:
Here is an endpoint example for webhooks:
Apple Wallet API Integration
Apple Wallet allows customers to manage and utilize boarding passes and tickets, as well as other items like gift cards all in one tool. Its API integration will give key data when consumers need it and provide passes depending on location using Apple Wallet on iPhone, iPod touch, and Apple Watch. Passes may be programmed to appear on the user’s device at the right time, such as when the user arrives at the airport or walks into a shop because Wallet is time and location oriented.
You need to create your Apple Developer account and get a Pass Type ID Certificate.
So, you will get a .cer file but you need to extract .p12 from it. You can do it using Keychain. This certificate has an expiration date, so, don’t forget to renew it and the other keys (mentioned below) regularly.
To generate an Apple Wallet pass we need four keys. First is the .p12 file we get on the previous step. Second, you need to download Apple’s World Wide Developer Relations (WWDR) certificate. The other 2 keys can be generated using the passbook module. You should put .p12 and Apple WWDR into one directory and then run this command:
You will be asked for the Import Password. If you leave it empty you will get the keys, but then you will have issues with Apple Wallet pass generating. So, use a secure password here.
wwdr.pem and Certificates.pem will be generated. You should rename Certificates.pem to your Pass Type ID. You can find it in the Certificates.pem file. You should find there CN=Pass Type ID: pass.<pass-type-id>. So, new name for your Certificates.pem should looks like <pass-type-id>.pem
Generate the Pass for Apple Wallet
Currently, you should have a directory with keys:
Once you get all the required keys you can generate a pass. It can be done using the passbook module in this way:
There are 5 templates for Apple Wallet Pass: boardingPass, coupon, eventTicket, generic, storeCard. Pass Type Identifier, Team Identifier, Organization Name are the values from Certificates.pem (renamed previously) CN=Pass Type ID: <Pass-Type-Identifier>, OU=<Team-Identifier>, O=<OrganizationName>.
A barcode should be an object with the following structure:
The colors should be in RGB format, for example, rgb(0, 0, 0).
Keys password is the password you entered in the previous step. A generic field should have the following structure:
ApplePay integration using PayFort API
PayFort solution is based in the United Arab Emirates, that provides payment API to customers across the Middle East through its payment gateway. Many countries of the Middle East don’t support popular and well-known payment systems, such as Stripe, Braintree, etc. So, when you work with clients from those countries, there is a big chance that you will face with PayFort.
Integrating PayFort into your project, you will notice that the lack of an online terminal reduces the capacity to conduct invoices through the Checkfront Booking Manager.
PayFort supports in-app refunds, which means that a Checkfront compensation will instantly appear in this payment API and reimburse the consumer. This makes these API integration tools more convenient for users and increases the benefit of implementing ApplePay into your app.
Generate Payment Processing and Merchant identity certificates in the ApplePay developer account.
In your PayFort account, go to the “ApplePay Settings” page and upload the Payment Processing certificate you obtained from Apple. The certificate should be placed into a .p12 file together with a private key and encrypted with a password(this password you should provide in ApplePay settings). You can do it in the “Keychain Access” tool if you are using Mac or OpenSSL on Windows.
Add apple developer merchant id domain association file on your server. Set up Merchant Identifier, Access Code, SHA Type, and SHA Request Phrase in your Payfort account:
We finished with preparations, let’s write some code. At first, we should validate the merchant session. [Docs are here]
NodeJS code example:
“key” property – a private key generated with your certificate in Apple developer account
Response from Apple should look like this:
This data will be used on the next step – The PayFort payment request. Let’s prepare data for this request [Docs are here]. Now create payment body.
NodeJS code example:
Signature for request should be generated and encoder with SHA Type which set up in your Payfort account (default SHA 256):
Please notice: Each character is important. Any typo will cause a “Signature mismatch” error.
Let’s encrypt the signature:
Attach signature to payment body and make a payment request:
The response should contain status 14 meaning that the transaction was successful.
Create index.html, style.css, and script.js files and place them as static ones on your server.
Add ApplePay button listener which starts the session with payment detail:
Let’s add the ‘start ApplePay Session’ method implementation. It is responsible for starting sessions with provided payment details and tracking events.
‘Handle ApplePay Events’ method:
To validate merchant events should request validation on our Backend and complete merchant validation with the response. The ‘validateApplePaySession’ is responsible for sending requests:
After validation succeeds, on payment authorized event will be triggered. The handler should make a transaction:
That’s it! Now, go to your static index.html file. If your device supports ApplePay, the payment button should appear and you are ready to test your payment API!
Whether your application is connected to E-Commerce and Online Shopping or not, Payment Gateway is a necessary solution for each software that offers purchases of goods or services. API integration of such solutions may expand the functionality of your platform and create a better user experience.
At Incora we know what it takes to integrate a payment API into an app, therefore we attempted to make this process as simple as possible for you. But, whether you’re still in the planning phase of your app or need to finish your current project, we’re ready to help you out by deploying payment gateways. Just fill in the contact form and we’ll be in touch right away.