Cardconnect Swiper Integration With Ionic Application

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 :

img1 1

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, 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.


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.


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.

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.


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.


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
img3 7
Application server
  • Implement Cardconnect’s credit card transaction API here
  • Implement cardconnect’s bolt terminal API for communicating with the Bolt Terminals.

    You can read more about the APIs here

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
      • On the server using this session key and with the details of payment etc ‘authCard’ request is made.
        This prompts the insert/swipe/tap card message on the device

        Users 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.

    • 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
  • 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

 Contact Us Now

Talk to us to find out about our flexible engagement models.

Get In Touch With Us