bsecure-payments-js

bSecure Payment Plugin

bSecure Payment Plugin is a JavaScript library that allows you to securely process your payments. This plugin instantly creates a form that adheres to PCI, HIPAA, GDPR, or CCPA security requirements.
It is built for desktop, tablet, and mobile devices and is continuously tested and updated to offer a frictionless payment experience for your e-commerce store.

About bSecure Payment Plugin

This Payment Gateway Integration Guide is a technical integration document for merchants to integrate with bSecure Payment Plugin allowing their customers to perform e-commerce transactions over the internet.
It guides merchants on how to use various functionality of the bSecure. The Merchant can enable credit card payments over their e-commerce website with this integration:

Who Should Read This Guide

The document is intended for application developers and business analysts of merchants to allow them to integrate effectively with the bSecure Payment Plugin.

Merchant Setup Process

In order to process online payments using the bSecure Payment Plugin, the merchant needs to be registered on bSecure Builder Portal.
The below process assumes that the merchant has been registered and all the parameters related to the merchant have been configured.
Once merchant has signed up for bSecure Builder Portal and get its payment gateway configured, the merchant will be in a position to perform test transaction using the sample code provided. Once the sample transaction has been successfully processed it indicates that all the required systems have been configured correctly and the merchant is ready to go.

Getting Your Credentials

1. Go to Builder Portal
2. App Integration >> Sandbox / Live
3. Copy Client Id from App Integration tab and save it in a secure file.

Installation

You can install the package via npm

npm install bsecure-payment-plugin --save

Configuration

a) Setting up a transaction:

The bSecure Payment Plugin will receive an HTTP POST request from the merchant website which will contain the merchant authentication details along with the transaction details. The Payment Plugin will inquire the required details from the customer and process transaction:

bSecurePaymentTransactionParameters.__00trid__ = '';
bSecurePaymentTransactionParameters.__01curr__ = '';
bSecurePaymentTransactionParameters.__02trdt__ = '';
bSecurePaymentTransactionParameters.__03stamt__ = '';
bSecurePaymentTransactionParameters.__04damt__ = '';
bSecurePaymentTransactionParameters.__05tamt__ = '';
bSecurePaymentTransactionParameters.__06cname__ = '';
bSecurePaymentTransactionParameters.__07ccc__ = '';
bSecurePaymentTransactionParameters.__08cphn__ = '';
bSecurePaymentTransactionParameters.__09cemail__ = '';
bSecurePaymentTransactionParameters.__10ccc__ = '';
bSecurePaymentTransactionParameters.__11cstate__ = '';
bSecurePaymentTransactionParameters.__12ccity__ = '';
bSecurePaymentTransactionParameters.__13carea__ = '';
bSecurePaymentTransactionParameters.__14cfadd__ = '';
bSecurePaymentTransactionParameters.__15mid__ = '';
bSecurePaymentTransactionParameters.__16stid__ = '';
bSecurePaymentTransactionParameters.__17seh__ = '';
bSecurePaymentTransactionParameters.__18ver__ = '';
bSecurePaymentTransactionParameters.__19lan__ = '';
bSecurePaymentTransactionParameters.__20red__ = '';
bSecurePaymentTransactionParameters.__21cenv__ = '';

Glossary

Key	Property	Type	Default	Description
__00trid__	Order id	string	required	A unique value created by the merchant to identify the transaction.
__01curr__	currency	string	'PKR'	Currency of Transaction amount. It has a fixed value of PKR
__02trdt__	Transaction date time	string	required	Merchant provided date and time of transaction. The format of date time should be yyyyMMddHHmmss.
__03stamt__	Subtotal amount	string	required	The transaction subtotal amount amount.
__04damt__	Discount amount	string	required	The transaction discount amount.
__05tamt__	Total amount	string	required	The transaction total amount.
__06cname__	Customer name	optional	required	The name of transaction customer
__07ccc__	Customer country code	string	required	The country code of transaction customer
__08cphn__	Customer phone number	string	required	The phone number of transaction customer
__09cemail__	Customer email address	string	optional	The email address of transaction customer
__10ccc__	Customer country name	string	required	The country name of transaction customer. It has a fixed value of PK
__11cstate__	Customer state name	string	required	The state name of transaction customer
__12ccity__	Customer city name	string	required	The city name of transaction customer
__13carea__	Customer area name	string	required	The area name of transaction customer
__14cfadd__	Customer formatted address	string	required	The formatted address of transaction customer
__15mid__	Merchant id	string	required	Unique Id assigned to merchant by bSecure Builder Portal.
__16stid__	Store slug	string	required	Unique Slug assigned to each store by bSecure Builder Portal.
__17seh__	Client id	string	required	Used to allow the plugin .
__19lan__	Order Lang	string	EN	Language of Transaction. It has a fixed value of EN
__20red__	Redirect url	string	required	The URL where merchant wants the transaction results to be shown. Once the transaction has been processed, response details will be sent over to the merchant on this URL using an HTTP POST Request.
__21cenv__	Integration type	string	required	The transaction integration type 1: Live 2: Sandbox

b) Calculating Secure hash:

Secure Hash is used to detect whether a transaction request and response has been tampered with. The Client Id generated for merchant at its App Integration Tab is added to the transaction message and then an SHA256 algorithm is applied to generate a secure hash. The secure hash is then sent to the receiving entity with the transaction message. Because the receiving entity is the only other entity apart from transaction initiator that knows the shared secret it recreates the same secure hash and matches it with the one in the request message. If the secure hash matches, the receiving entity continues processing the transaction. If it doesn’t match, it assumes that the transaction request has been tampered with and will stop processing the transaction and send back an error message. This is a security feature to secure the transaction and is recommended.
The pp_SecureHash field is used for the SHA256 secure hash of initiator’s shared secret and the transaction request. The secure hash value is the Hex encoded SHA256 output of the transaction request or response fields. The order that the fields are hashed in are:

1. The Shared Secret (shared between the PG and a merchant), the system generated value, is always first.

2. Then all transaction request fields are concatenated to the Shared Secret in alphabetical order of the field name. The sort should be in ascending order of the ASCII value of each field string. If one string is an exact substring of another, the smaller string should be before the longer string. For example, Card should come before CardNum.

3. Fields must not have any spaces or separators between them and must not include any null terminating characters.
   For example, if the Shared Secret is 0F5DD14AE2E38C7EBD8814D29CF6F6F0, and the transaction request includes the following fields:

   Parameter	Sample Values
   pp_MerchantID	1421
   pp_OrderInfo	A48cvE28
   pp_Amount	2995

   In ascending alphabetical order the transaction request fields inputted to the SHA256 hash would be: 0F5DD14AE2E38C7EBD8814D29CF6F6F02995MER123A48cvE28
   Example of a Secure Hash Calculation 0F5DD14AE2E38C7EBD8814D29CF6F6F02995MER123A48cvE28 Merchant should also ensure that:

   1. UTF-8 encoding should be used to convert the input from a printable string to a byte array. Note that 7-bit ASCII encoding is unchanged for UTF-8.
   2. The hash output must be hex-encoded.

Note: Inorder to calculate secure hash we are using libraries named [CryptoJS](https://www.npmjs.com/package/crypto-js)

c) Listen events from Plugin:

The bSecure Payment Plugin will return an HTTP POST request inside its listeners defined on the merchant website which will contain the error response incurred while processing transaction request.

How to use

Merchant has to add below mention HTML code on its website

<div id="bSecurePaymentPluginContainer"></div>

a) Setting up a transaction:

import {
    TransactionParameters,
} from "bsecure-payments-js"


TransactionParameters.__00trid__   = "<order-id>";
TransactionParameters.__01curr__   = "<currency>";
TransactionParameters.__02trdt__   = "<transaction-date-time>";
TransactionParameters.__03stamt__  = "<subtotal-amount>";
TransactionParameters.__04damt__   = "<discount-amount>";
TransactionParameters.__05tamt__   = "<total-amount>";
TransactionParameters.__06cname__  = "<customer-name>";
TransactionParameters.__07ccc__    = "<customer-country-cod>";
TransactionParameters.__08cphn__   = "<customer-phone-number>";
TransactionParameters.__09cemail__ = "<customer-email-address>";
TransactionParameters.__10ccc__    = "<customer-country-name>";
TransactionParameters.__11cstate__ = "<customer-state-name>";
TransactionParameters.__12ccity__  = "<customer-city-name>";
TransactionParameters.__13carea__  = "<customer-area-name>";
TransactionParameters.__14cfadd__  = "<customer-formatted-address>";
TransactionParameters.__15mid__    = "<merchant-id>";
TransactionParameters.__16stid__   = "<store-slug>";
TransactionParameters.__18ver__    = "<plugin-version>";
TransactionParameters.__20red__    ="<redirect-url>";
TransactionParameters.__21cenv__   = "<integration-type>";

b) Calculating Secure hash:

const salt = "<CLIENT-ID>";
let _signature = salt + "&";
Object.keys(TransactionParameters)
    .sort()
    .forEach(function (v, idx, array) {
        let _val = TransactionParameters[v].toString().replace(/\s/g, '');
        _signature += _val.concat(idx === array.length - 1 ? "" : "&")
    });
let _hash = CryptoJS.HmacSHA256(_signature, salt).toString();
TransactionParameters.__17seh__ = _hash.toUpperCase();

c) Listen events from Plugin:

import {
    bSecurePaymentsHandler,
} from "bsecure-payments-js"

bSecurePaymentsHandler.initialize();
bSecurePaymentsHandler.onErrorAlert = function (msg) {
    return msg;
}
bSecurePaymentsHandler.onSuccessAlert = function (msg) {
    return msg;
        }
bSecurePaymentsHandler.onValidationErrorAlert = function (msg) {
    return msg;
}
bSecurePaymentsHandler.onProcessPaymentSuccess = function (msg) {
    return msg;
}
bSecurePaymentsHandler.onProcessPaymentFailure = function (msg) {
    return msg;
}

d) Initialize transaction:

import {
    bSecurePayments,
} from "bsecure-payments-js"

bSecurePayments.initialize("bSecurePaymentPluginContainer");

Demo

click here to see the demo

Changelog

Please see CHANGELOG for more information what has changed recently.

License

The MIT License (MIT). Please see License File for more information.

Contributions

"bSecure – Payment Plugin" is open source software.