blog
Vite and React: A Speedy Duo for Modern Web Development
Introduction: The Need for Speed in Web Development In the fast-paced world of web development, speed and efficiency are paramount. To meet these demands, we
Abhay Pareek
All e-commerce applications offer credit card payments with payment gateway integrations.
Apart from the regular online payment integration, there is also a need to integrate the app with the physical card swiping machines in some business scenarios.
In this article, I will walk you through the integration of cardconnect bolt devices for credit card payments, with an ionic application.
Bolt device :
Payment gateway
Payment gateway is a third party solution between a customer and merchant which enables the money transfer between a customer’s account and a merchant’s bank account. This includes the authorisation of online transactions through different payment modes like net banking, credit card, debit card, UPI or online wallets that are available these days. These also support services like refund in case of cancellation of order.
Cardconnect, PayPal, Authorize.net are some of the well known payment gateways.
Credit card transactions
There are a few key terms one has to be familiar with when dealing with credit card transactions, be it online transactions or integration with a swipe machine.
Tokenization
Credit card tokenization is the process of completely removing sensitive data from a company’s internal network by replacing it with a randomly generated, unique placeholder called a token.
Payment gateway secures the sensitive information given by the user throughout the process. Payment gateway tokenises or encrypts the card details and performs fraud checks before sending the data to the acquiring bank.
Authorisation
Credit card authorization is an approval that the customer has sufficient funds on their card to pay for the transaction
- Transaction details are forwarded to the payment gateway with this token. Payment gateway forwards the details to the payment processor used by the merchant acquiring bank.
- Payment processor forwards the information to credit card networks like visa and mastercard.
- Credit card network receives the request, performs a verification check and sends the information to the issuing bank.
- The issuing bank, after performing fraud screening, funds checks and approves or declines the transaction. The response is sent back to card networks, which in turn sends the response to payment processors and the payment processors to the payment gateway.
- The transaction is approved.
Capture
A credit card capture is a legally binding step that takes place after a payment authorization that officially moves a customer’s funds into the designated merchant account.
Actual money transfer is handled by this process. This can be automatic immediately after authorisation or manual during the authorisation hold. Generally for credit cards authorisation may last as long as for 30 days duration.
Refund
In case a customer cancels the order or returns the item purchased. If a transaction is in a settled state the refund request is raised to the credit card payment processor, through the payment gateway.
Void
When a credit card transaction is authorised but not captured, a transaction can be voided to cancel the authorisation.
Cardconnect swiper integration with Ionic application
Integration requirements
- Cardconnect merchant account
- Cardconnect provided device
You can read more about integration requirement overview here
High level details about the implementation
Ionic application
- Provide an option to make payment using the credit card swiper on the Ionic application.
- This client application communicates with the application server and application server communicates with the cardconnect’s server
- Step1 : Client makes a request for payment using bolt terminal, it provides the HSN number the device is paired with
- Step 2 : On server, it makes a ‘connect’ call to cardconnect, to establish a session with the given bolt terminal and sends an session key in header if successfull
https://developer.cardconnect.com/bolt-terminal#connect - On the server using this session key and with the details of payment etc ‘authCard’ request is made.
https://developer.cardconnect.com/bolt-terminal#authCard
This prompts the insert/swipe/tap card message on the deviceUsers can swipe/tap/insert the credit card. This takes the confirmation for the amount. Card decline message is displayed in case of the card being declined.
Bolt terminal reads the credit card information and send it to cardconnect for tokenization
This API takes care of tokenization of the credit card, making the Authorization request call to cardconnect and returns the retrieval reference number to use in subsequent calls like Capture, Void,Refund.
On receiving the response, ‘disconnect’ call is made to disconnect the device, close the session and release the session key.
https://developer.cardconnect.com/bolt-terminal#disconnect
- Step 2 : On server, it makes a ‘connect’ call to cardconnect, to establish a session with the given bolt terminal and sends an session key in header if successfull
- Step3 : Application server sends the successful transaction response along with order and payment confirmation details based on the response received from authCard request or retry different payment method in case of failure.
Note: It can be integrated with angular web application too.
Management of multiple terminals.
As per the business requirement we can manage multiple terminals (swiper devices) along with the application devices.
We have used Hardware Serial Numbers (HSN) of the bolt terminal and the application device’s unique identification number for pairing.
- This number gets displayed on the screen of Bolt terminal when switched on
- Device has to be connected to the client’s WiFi network.
- When the iSMP4 powers on for the first time, the device displays “Unbolted.”
This indicates that it is not connected to the internet - After successfully WiFi connected and connecting to the Bolt server it displays “Bolted” on the screen
- On the server side database we keep the information about the device pairing and available devices for the merchant.
- Bolt terminal API listTerminals gives the list of HSN of bolt terminals registered with the merchant ID
https://developer.cardconnect.com/bolt-terminal#listTerminals - In our application when a first time application user wants to use a bolt terminal for the payment transaction, it has to be paired with the HSN of the Bolt terminal.
- This is one time registration where the application device’s unique id is paired with the HSN . Later user can re-register the device to change the terminal pairing in case of change of Bolt terminal.
- Application device’s this unique device id is sent in payment transaction using Bolt terminal request from client application to the application server.
- Using unique identification of the device server identifies the HSN it paired with and uses the HSN in subsequent connect and authcard requests.
- We have integrated with many payment gateways. Contact us to know more.
Read More Articles
blog
Developing Conversational AI applications by harnessing the power of LLMs
Introduction The power of conversational AI has become a transformational force in a world where technology continues to alter how people live, work, and communicate.
Sreekanth Reddy
blog
Building Reusable Web Components with ReactJS: A Step-by-Step Guide
Introduction In the ever-evolving landscape of web development, the concept of reusability has become a cornerstone for efficiency and productivity. Web components have emerged as
Abhay Pareek
