How to Integrate NPM on KS Pay?

Build a secure and compliant payment infrastructure for your applications by integrating the KS-PAY Payment Package via NPM. This article provides a detailed and professional guide to the integration process, ensuring adherence to best practices and minimizing development time.

Prerequisites

Before beginning the integration process, ensure you have the following prerequisites in place:

Node.js and NPM:
KS-PAY relies on NPM to install dependencies in React.
Download and install Node.js (which includes NPM) from Node.js — Run JavaScript Everywhere .
Verify the installation by running node -v and npm -v in your terminal.
React Project:
You need an existing React project or be prepared to create a new one.
You can use tools like create-react-app, Vite, or any other React project setup tool.
Git:
Git is required for version control and package management.
Install Git from Git - Downloads if not already installed.
Verify the installation by running git --version in your terminal.
IDE/Text Editor:
Choose an IDE or text editor of your preference for writing code.
Popular options include Visual Studio Code, WebStorm, or Sublime Text.

Step 1: Accessing the Applications Section in Kalp Studio

Begin by logging into your Kalp Studio account. Open the Kalp Studio website and log in with your credentials.

Once logged in, you will be directed to the main dashboard.
On the left-hand side of the screen, you'll find a navigation menu. This menu contains various options, including "Personal Info," "Applications," and "Settings”, as shown in the screenshot below.

Locate the "Applications" option within this menu. It is highlighted in the screenshot below.

Step 2: Navigating to KS Pay from the Applications List

Click on the Explore KS Pay button, as highlighted in the screenshot below, to go to the KS Pay dashboard.

Step 3: Access the KS Pay Dashboard

On the main dashboard, you'll see a list of all registered apps with details such as App ID, App Name, Email, and Country.

Locate the app for which you want to view transactions.

Adding a Payment Gateway

Click on the "+ Add Gateway" button.

For Step 1 (Credentials): Refer How to add Razorpay payment gateway and setup rules for payment orchestration on KS Pay. - Payment Engine - Confluence

For Step 2 (Webhook): Refer How to Configure Webhook on KS Pay

Installation

Once you have the prerequisites in place, follow these steps to install the KS-PAY package:

Open your terminal and navigate to your React project directory.
Run the following command to install the KS-PAY package:

npm i ks-pay-package-pvt
This command will download and install the KS-PAY package and its dependencies into your project.

Usage

To implement the KS-PAY payment gateway in your React application:

Import the Gateways component in your React component file:

javascript import Gateways from "ks-pay-package-pvt";

Set up the necessary state and configuration:

Example Configuration: Adapt the configuration based on the package documentation and your specific payment requirements. You'll need to provide your API keys, callback URLs, and any other required parameters.

Complete Integration

Mark as done after installing the package.

If the NPM integration is unsuccessful, reattempt the integration process.

Move to the next Security section.

Testing

Sandbox Environment: KS-PAY should provide a sandbox/testing environment. Configure your integration to use the sandbox environment for testing purposes. This environment simulates real transactions without actually charging any accounts.
Testing Scenarios: Test various payment scenarios, including successful payments, failed payments, and edge cases.

Integrating NPM on KS Pay allows you to connect your application to KS Pay’s payment platform, providing secure, reliable, and real-time transaction processing. By following these steps, you can complete the NPM setup, test the connection, and generate API keys to enable seamless payment capabilities for your customers. This integration is essential for automating payment workflows and keeping track of payment statuses directly within your application.