0% found this document useful (0 votes)

180 views14 pages

Angular PG Integration 3

This document provides instructions for integrating the SabPaisa payment gateway into an Angular application. It outlines prerequisite steps like installing Node.js packages. The integration steps include installing SDK packages, importing modules, and adding code to component files to enable payment functionality. Implementing the steps allows developers to quickly integrate the SabPaisa payment gateway and process transactions from their Angular application.

Uploaded by

infinityinteriorsum

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

180 views14 pages

Angular PG Integration 3

Uploaded by

infinityinteriorsum

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 14

ANGULAR JS

SabPaisa Payment Gateway

Angular Integration
Document

WWW.SABPAISA.IN
Dummy card/UPI Details

Dummy Card Credentials

Type Card Details

CARD NUMBER - 4029484589897107

Debit Card EXPIRY TIME - 12/30

CVV - 234

CARD NUMBER - 4000020000000000

CREDIT CARD EXPIRY TIME - 12/30

CVV - 234

CARD NUMBER - 6521217731960214

Debit Card EXPIRY TIME - 12/35

CVV - 234

UPI ID merchant@sabpaisa

Reference Code Download

For Transaction Enquiry API Open

Staging URL https://stage-securepay.sabpaisa.in/SabPaisa/sabPaisaInit?v=1

Live URL https://securepay.sabpaisa.in/SabPaisa/sabPaisaInit?v=1

Angular - Payment Gateway Integration - SabPaisa

INTRODUCTION
This document is to provide an overview of the Payment Gateway integration(Web Integration
Kit) provided by SabPaisa.The document contains the required information for Web Integration
Kit to integrate the PG platform.

BENEFIT OF APPROACH
This document aims to provide help to quickly integrate SabPaisa into the existing application.
The document contains a sample code to help the developer understand the flow of data from
the merchant’s application to SabPaisa and the other way around. It contains a npm package
that needs to be installed on the merchant site and pass the mandatory parameters provided by
the SabPaisa.
This SDK comes with two additional functionality
■ Auto detect the card
■ Validate VPA.

PRE-REQUISITE STEPS FOR INTEGRATION

1. Good internet connection.
2. npm package is required.
3. Visual Studio

INTEGRATION STEPS:
1. Open the command prompt and execute the below command.
Click here for official angular documentation.

npm install -g angular-cli

ng new angular

After executing the 'ng new angular' command, enable the routing by choosing 'y'.

Would you like to add Angular routing? (y/N)

After enabling the routing, select the stylesheet format as:

CSS

2. Change the directory in the Project.

cd angular
3. Install the following packages in the Project.

npm install react react-dom @types/react @types/react-dom

npm i pg-test-project

ng g c pay-form

4. Open the project in the VS Code.

5. Copy the below code, paste in the tsconfig.json file as shown in below screenshot.

"jsx": "react",

"module": "commonjs",

"esModuleInterop": true,

"allowSyntheticDefaultImports": true,
6. In the src --> assets, create the new file name SabpaisaSdk.tsx
7. Open the below link, copy the code, and paste the entire code in the SabpaisaSdk.tsx

https://bitbucket.org/sabpaisa-wp-29/angular-js-kit/src/master/src/assets/SabpaisaSdk.tsx

8. Open the src --> app, create new file name SabPaisaWrapper.tsx
9. Open the below link, copy the code, and paste the entire code in the SabPaisaWrapper.tsx

https://bitbucket.org/sabpaisa-wp-29/angular-js-kit/src/master/src/app/SabPaisaWrapper.tsx

NOTE: Import the 'SabpaisaWrapperComponent' module in the file name 'app.module.ts'

(Only if this module 'SabpaisaWrapperComponent' is not already imported)

10. Open src --> app --> pay-form --> pay-form.component.html, open the below link and
replace the given code in the pay-form.component.html file.

https://bitbucket.org/sabpaisa-wp-29/angular-js-kit/src/master/src/app/pay-form/pay-
form.component.html
11. Open src --> app --> app.module.ts, copy the below code in the app.module.ts in imports: [ ]

ReactiveFormsModule,
12. Open src --> app --> pay-form --> pay-form.component.ts, open the below link and replace
the given code in the pay-form.component.ts file.

https://bitbucket.org/sabpaisa-wp-29/angular-js-kit/src/master/src/app/pay-form/pay-
form.component.ts

13. Open src --> app --> app-routing.module.ts, copy and paste the below code in the app-
routing.module.ts.

import { PayFormComponent } from './pay-form/pay-form.component';

const routes: Routes = [

{ path: '', redirectTo: 'init', pathMatch: 'full'},
{ path: 'init', component: PayFormComponent}
];
14. Open src --> app --> app.component.html, copy and replace the below code in the
app.component.html.

<h1>welcome</h1>

<router-outlet></router-outlet>
15. Open src --> app --> app.module.ts, copy the below code in the app.module.ts in @NgModule({})

SabpaisaWrapperComponent

16. Open src --> app --> app.module.ts, copy the below code in the app.module.ts in imports: [ ]

ReactiveFormsModule,
17. Open the command prompt and run the below code:

cd project name

ng serve --open
Congratulations for implementing SabPaisa Web SDK.