@dev_innovations_labs/phonepe-pg-sdk 1.0.0

package/dist/PhonePeNode.d.ts

@@ -0,0 +1,9 @@
+import { PhonePeCredentials, PhonePePaymentInit } from "./types";
+export declare class PhonePeNode {
+    private creds;
+    constructor(creds: PhonePeCredentials);
+    private get urls();
+    getToken(): Promise<any>;
+    createPayment(data: PhonePePaymentInit): Promise<any>;
+    getStatus(merchantId: string, merchantOrderId: string): Promise<any>;
+}

package/dist/PhonePeReact.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { PhonePeCredentials, PhonePePaymentInit } from "./types";
+declare global {
+    interface Window {
+        PhonePeCheckout: any;
+    }
+}
+interface Props extends PhonePeCredentials {
+    request: PhonePePaymentInit;
+    onSuccess: (data: any) => void;
+    onError: (err: any) => void;
+}
+export declare const PhonePeCheckoutWeb: React.FC<Props>;
+export {};

package/dist/PhonePeReactNative.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { PhonePeCredentials, PhonePePaymentInit } from "./types";
+interface Props extends PhonePeCredentials {
+    request: PhonePePaymentInit;
+    onSuccess: (data: any) => void;
+    onError: (err: any) => void;
+}
+export declare const PhonePeCheckoutNative: React.FC<Props>;
+export {};

package/dist/env.d.ts

@@ -0,0 +1,14 @@
+export declare const PhonePeUrls: {
+    production: {
+        token: string;
+        pay: string;
+        status: string;
+        script: string;
+    };
+    sandbox: {
+        token: string;
+        pay: string;
+        status: string;
+        script: string;
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./PhonePeNode";
+export * from "./PhonePeReact";
+export * from "./types";

package/dist/index.esm.js

@@ -0,0 +1,139 @@
+import axios from 'axios';
+import { v4 } from 'uuid';
+import { useEffect } from 'react';
+
+const PhonePeUrls = {
+    production: {
+        token: "https://api.phonepe.com/apis/identity-manager/v1/oauth/token",
+        pay: "https://api.phonepe.com/apis/pg/checkout/v2/pay",
+        status: "https://api.phonepe.com/apis/pg/checkout/v2/order/status",
+        script: "https://mercury.phonepe.com/web/bundle/checkout.js",
+    },
+    sandbox: {
+        token: "https://api-preprod.phonepe.com/apis/identity-manager/v1/oauth/token",
+        pay: "https://api-preprod.phonepe.com/apis/pg-sandbox/checkout/v2/pay",
+        status: "https://api-preprod.phonepe.com/apis/pg-sandbox/checkout/v2/order/status",
+        script: "https://mercury.phonepe.com/web/bundle/checkout.js",
+    }
+};
+
+function normalizeEnvironment(env) {
+    const e = String(env).toLowerCase().trim();
+    if (e === "production" || e === "prod")
+        return "production";
+    if (e === "sandbox")
+        return "sandbox";
+    throw new Error(`Invalid environment "${env}". Expected "Production" or "Sandbox".`);
+}
+
+class PhonePeNode {
+    constructor(creds) {
+        this.creds = creds;
+    }
+    get urls() {
+        const env = normalizeEnvironment(this.creds.environment);
+        return PhonePeUrls[env];
+    }
+    async getToken() {
+        const body = new URLSearchParams({
+            client_id: this.creds.clientId,
+            client_secret: this.creds.clientSecret,
+            grant_type: "client_credentials",
+            client_version: "1"
+        });
+        const res = await axios.post(this.urls.token, body, {
+            headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        });
+        return res.data.access_token;
+    }
+    async createPayment(data) {
+        const token = await this.getToken();
+        const payload = {
+            merchantId: data.merchantId,
+            merchantOrderId: v4(),
+            merchantTransactionId: v4(),
+            amount: data.amount,
+            mobileNumber: data.mobileNumber,
+            redirectUrl: data.redirectUrl,
+            callbackUrl: data.callbackUrl,
+            deviceContext: data.deviceContext,
+            paymentScope: data.paymentScope,
+        };
+        const res = await axios.post(this.urls.pay, payload, {
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `O-Bearer ${token}`,
+            }
+        });
+        return res.data;
+    }
+    async getStatus(merchantId, merchantOrderId) {
+        const token = await this.getToken();
+        const res = await axios.post(this.urls.status, {
+            merchantId,
+            merchantOrderId
+        }, {
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `O-Bearer ${token}`,
+            }
+        });
+        return res.data;
+    }
+}
+
+const PhonePeCheckoutWeb = ({ environment, clientId, clientSecret, request, onSuccess, onError }) => {
+    const env = normalizeEnvironment(environment);
+    const urls = PhonePeUrls[env];
+    if (!urls) {
+        onError(`Invalid environment: ${environment}`);
+        return;
+    }
+    useEffect(() => {
+        const script = document.createElement("script");
+        script.src = urls.script;
+        script.async = true;
+        document.body.appendChild(script);
+        script.onload = () => init();
+    }, []);
+    const init = async () => {
+        try {
+            const tokenResp = await fetch(urls.token, {
+                method: "POST",
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+                body: new URLSearchParams({
+                    client_id: clientId,
+                    client_secret: clientSecret,
+                    grant_type: "client_credentials",
+                    client_version: "1"
+                })
+            });
+            const token = (await tokenResp.json()).access_token;
+            const payload = {
+                ...request,
+                merchantOrderId: v4(),
+                merchantTransactionId: v4()
+            };
+            const payResp = await fetch(urls.pay, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `O-Bearer ${token}`
+                },
+                body: JSON.stringify(payload)
+            });
+            const payData = await payResp.json();
+            window.PhonePeCheckout.transact({
+                tokenUrl: payData.redirectUrl,
+                type: "IFRAME",
+                callback: () => onSuccess(payData)
+            });
+        }
+        catch (err) {
+            onError(err);
+        }
+    };
+    return null;
+};
+
+export { PhonePeCheckoutWeb, PhonePeNode };

package/dist/index.js

@@ -0,0 +1,142 @@
+'use strict';
+
+var axios = require('axios');
+var uuid = require('uuid');
+var react = require('react');
+
+const PhonePeUrls = {
+    production: {
+        token: "https://api.phonepe.com/apis/identity-manager/v1/oauth/token",
+        pay: "https://api.phonepe.com/apis/pg/checkout/v2/pay",
+        status: "https://api.phonepe.com/apis/pg/checkout/v2/order/status",
+        script: "https://mercury.phonepe.com/web/bundle/checkout.js",
+    },
+    sandbox: {
+        token: "https://api-preprod.phonepe.com/apis/identity-manager/v1/oauth/token",
+        pay: "https://api-preprod.phonepe.com/apis/pg-sandbox/checkout/v2/pay",
+        status: "https://api-preprod.phonepe.com/apis/pg-sandbox/checkout/v2/order/status",
+        script: "https://mercury.phonepe.com/web/bundle/checkout.js",
+    }
+};
+
+function normalizeEnvironment(env) {
+    const e = String(env).toLowerCase().trim();
+    if (e === "production" || e === "prod")
+        return "production";
+    if (e === "sandbox")
+        return "sandbox";
+    throw new Error(`Invalid environment "${env}". Expected "Production" or "Sandbox".`);
+}
+
+class PhonePeNode {
+    constructor(creds) {
+        this.creds = creds;
+    }
+    get urls() {
+        const env = normalizeEnvironment(this.creds.environment);
+        return PhonePeUrls[env];
+    }
+    async getToken() {
+        const body = new URLSearchParams({
+            client_id: this.creds.clientId,
+            client_secret: this.creds.clientSecret,
+            grant_type: "client_credentials",
+            client_version: "1"
+        });
+        const res = await axios.post(this.urls.token, body, {
+            headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        });
+        return res.data.access_token;
+    }
+    async createPayment(data) {
+        const token = await this.getToken();
+        const payload = {
+            merchantId: data.merchantId,
+            merchantOrderId: uuid.v4(),
+            merchantTransactionId: uuid.v4(),
+            amount: data.amount,
+            mobileNumber: data.mobileNumber,
+            redirectUrl: data.redirectUrl,
+            callbackUrl: data.callbackUrl,
+            deviceContext: data.deviceContext,
+            paymentScope: data.paymentScope,
+        };
+        const res = await axios.post(this.urls.pay, payload, {
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `O-Bearer ${token}`,
+            }
+        });
+        return res.data;
+    }
+    async getStatus(merchantId, merchantOrderId) {
+        const token = await this.getToken();
+        const res = await axios.post(this.urls.status, {
+            merchantId,
+            merchantOrderId
+        }, {
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `O-Bearer ${token}`,
+            }
+        });
+        return res.data;
+    }
+}
+
+const PhonePeCheckoutWeb = ({ environment, clientId, clientSecret, request, onSuccess, onError }) => {
+    const env = normalizeEnvironment(environment);
+    const urls = PhonePeUrls[env];
+    if (!urls) {
+        onError(`Invalid environment: ${environment}`);
+        return;
+    }
+    react.useEffect(() => {
+        const script = document.createElement("script");
+        script.src = urls.script;
+        script.async = true;
+        document.body.appendChild(script);
+        script.onload = () => init();
+    }, []);
+    const init = async () => {
+        try {
+            const tokenResp = await fetch(urls.token, {
+                method: "POST",
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+                body: new URLSearchParams({
+                    client_id: clientId,
+                    client_secret: clientSecret,
+                    grant_type: "client_credentials",
+                    client_version: "1"
+                })
+            });
+            const token = (await tokenResp.json()).access_token;
+            const payload = {
+                ...request,
+                merchantOrderId: uuid.v4(),
+                merchantTransactionId: uuid.v4()
+            };
+            const payResp = await fetch(urls.pay, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `O-Bearer ${token}`
+                },
+                body: JSON.stringify(payload)
+            });
+            const payData = await payResp.json();
+            window.PhonePeCheckout.transact({
+                tokenUrl: payData.redirectUrl,
+                type: "IFRAME",
+                callback: () => onSuccess(payData)
+            });
+        }
+        catch (err) {
+            onError(err);
+        }
+    };
+    return null;
+};
+
+exports.PhonePeCheckoutWeb = PhonePeCheckoutWeb;
+exports.PhonePeNode = PhonePeNode;

package/dist/native.d.ts

@@ -0,0 +1 @@
+export * from "./PhonePeReactNative";

package/dist/native.esm.js

@@ -0,0 +1,81 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { WebView } from 'react-native-webview';
+import { v4 } from 'uuid';
+
+const PhonePeUrls = {
+    production: {
+        token: "https://api.phonepe.com/apis/identity-manager/v1/oauth/token",
+        pay: "https://api.phonepe.com/apis/pg/checkout/v2/pay",
+        status: "https://api.phonepe.com/apis/pg/checkout/v2/order/status",
+        script: "https://mercury.phonepe.com/web/bundle/checkout.js",
+    },
+    sandbox: {
+        token: "https://api-preprod.phonepe.com/apis/identity-manager/v1/oauth/token",
+        pay: "https://api-preprod.phonepe.com/apis/pg-sandbox/checkout/v2/pay",
+        status: "https://api-preprod.phonepe.com/apis/pg-sandbox/checkout/v2/order/status",
+        script: "https://mercury.phonepe.com/web/bundle/checkout.js",
+    }
+};
+
+function normalizeEnvironment(env) {
+    const e = String(env).toLowerCase().trim();
+    if (e === "production" || e === "prod")
+        return "production";
+    if (e === "sandbox")
+        return "sandbox";
+    throw new Error(`Invalid environment "${env}". Expected "Production" or "Sandbox".`);
+}
+
+const PhonePeCheckoutNative = ({ clientId, clientSecret, environment, request, onSuccess, onError }) => {
+    const [url, setUrl] = useState();
+    const env = normalizeEnvironment(environment);
+    const urls = PhonePeUrls[env];
+    if (!urls) {
+        onError(`Invalid environment: ${environment}`);
+        return;
+    }
+    useEffect(() => {
+        init();
+    }, []);
+    const init = async () => {
+        try {
+            const tokenResp = await fetch(urls.token, {
+                method: "POST",
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+                body: new URLSearchParams({
+                    client_id: clientId,
+                    client_secret: clientSecret,
+                    grant_type: "client_credentials",
+                    client_version: "1"
+                })
+            });
+            const token = (await tokenResp.json()).access_token;
+            const payload = {
+                ...request,
+                merchantOrderId: v4(),
+                merchantTransactionId: v4()
+            };
+            const payResp = await fetch(urls.pay, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `O-Bearer ${token}`
+                },
+                body: JSON.stringify(payload)
+            });
+            const { redirectUrl } = await payResp.json();
+            setUrl(redirectUrl);
+        }
+        catch (err) {
+            onError(err);
+        }
+    };
+    return url ? (jsx(WebView, { source: { uri: url }, onNavigationStateChange: (nav) => {
+            if (nav.url.includes("callback")) {
+                onSuccess(nav);
+            }
+        } })) : null;
+};
+
+export { PhonePeCheckoutNative };

package/dist/native.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactNativeWebview = require('react-native-webview');
+var uuid = require('uuid');
+
+const PhonePeUrls = {
+    production: {
+        token: "https://api.phonepe.com/apis/identity-manager/v1/oauth/token",
+        pay: "https://api.phonepe.com/apis/pg/checkout/v2/pay",
+        status: "https://api.phonepe.com/apis/pg/checkout/v2/order/status",
+        script: "https://mercury.phonepe.com/web/bundle/checkout.js",
+    },
+    sandbox: {
+        token: "https://api-preprod.phonepe.com/apis/identity-manager/v1/oauth/token",
+        pay: "https://api-preprod.phonepe.com/apis/pg-sandbox/checkout/v2/pay",
+        status: "https://api-preprod.phonepe.com/apis/pg-sandbox/checkout/v2/order/status",
+        script: "https://mercury.phonepe.com/web/bundle/checkout.js",
+    }
+};
+
+function normalizeEnvironment(env) {
+    const e = String(env).toLowerCase().trim();
+    if (e === "production" || e === "prod")
+        return "production";
+    if (e === "sandbox")
+        return "sandbox";
+    throw new Error(`Invalid environment "${env}". Expected "Production" or "Sandbox".`);
+}
+
+const PhonePeCheckoutNative = ({ clientId, clientSecret, environment, request, onSuccess, onError }) => {
+    const [url, setUrl] = react.useState();
+    const env = normalizeEnvironment(environment);
+    const urls = PhonePeUrls[env];
+    if (!urls) {
+        onError(`Invalid environment: ${environment}`);
+        return;
+    }
+    react.useEffect(() => {
+        init();
+    }, []);
+    const init = async () => {
+        try {
+            const tokenResp = await fetch(urls.token, {
+                method: "POST",
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+                body: new URLSearchParams({
+                    client_id: clientId,
+                    client_secret: clientSecret,
+                    grant_type: "client_credentials",
+                    client_version: "1"
+                })
+            });
+            const token = (await tokenResp.json()).access_token;
+            const payload = {
+                ...request,
+                merchantOrderId: uuid.v4(),
+                merchantTransactionId: uuid.v4()
+            };
+            const payResp = await fetch(urls.pay, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `O-Bearer ${token}`
+                },
+                body: JSON.stringify(payload)
+            });
+            const { redirectUrl } = await payResp.json();
+            setUrl(redirectUrl);
+        }
+        catch (err) {
+            onError(err);
+        }
+    };
+    return url ? (jsxRuntime.jsx(reactNativeWebview.WebView, { source: { uri: url }, onNavigationStateChange: (nav) => {
+            if (nav.url.includes("callback")) {
+                onSuccess(nav);
+            }
+        } })) : null;
+};
+
+exports.PhonePeCheckoutNative = PhonePeCheckoutNative;

package/dist/types.d.ts

@@ -0,0 +1,15 @@
+export type PhonePeEnvironment = "Production" | "Sandbox";
+export interface PhonePeCredentials {
+    clientId: string;
+    clientSecret: string;
+    environment: PhonePeEnvironment;
+}
+export interface PhonePePaymentInit {
+    merchantId: string;
+    amount: number;
+    mobileNumber?: string;
+    redirectUrl: string;
+    callbackUrl: string;
+    deviceContext?: any;
+    paymentScope?: string;
+}

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import { PhonePeEnvironment } from "./types";
+export declare function normalizeEnvironment(env: PhonePeEnvironment): "production" | "sandbox";

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@dev_innovations_labs/phonepe-pg-sdk",
+  "version": "1.0.0",
+  "type": "module",
+
+  "keywords": [
+    "phonepe",
+    "phonepe-pg",
+    "payment-gateway",
+    "pg-sdk",
+    "checkout-v2",
+    "upi",
+    "react",
+    "react-native",
+    "nodejs",
+    "javascript",
+    "typescript",
+    "web-payments"
+  ],
+
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+
+  "author": {
+    "name": "Dev Innovations Labs"
+  },
+
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./native": {
+      "import": "./dist/native.esm.js",
+      "require": "./dist/native.js",
+      "types": "./dist/native.d.ts"
+    }
+  },
+
+  "scripts": {
+    "build": "rollup -c"
+  },
+
+  "dependencies": {
+    "axios": "^1.6.0",
+    "uuid": "^9.0.0"
+  },
+
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-webview": "*"
+  },
+
+  "peerDependenciesMeta": {
+    "react-native-webview": {
+      "optional": true
+    }
+  },
+
+  "devDependencies": {
+    "typescript": "^5.3.3",
+    "rollup": "^4.9.0",
+    "rollup-plugin-typescript2": "^0.34.1"
+  },
+
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,26 @@
+import typescript from "rollup-plugin-typescript2";
+
+export default [
+    {
+        input: "src/index.ts",
+        output: [
+            { file: "dist/index.js", format: "cjs" },
+            { file: "dist/index.esm.js", format: "esm" }
+        ],
+        plugins: [typescript()],
+        external: ["axios", "uuid", "react", "react/jsx-runtime", "react-native", "react-native-webview"]
+    },
+    {
+        input: "src/native.ts",
+        output: [
+            { file: "dist/native.js", format: "cjs" },
+            { file: "dist/native.esm.js", format: "esm" }
+        ],
+        plugins: [typescript()],
+        external: [
+            "react",
+            "react-native",
+            "react-native-webview"
+        ]
+    }
+];

package/src/PhonePeNode.ts

@@ -0,0 +1,74 @@
+import axios from "axios";
+import { v4 as uuidv4 } from "uuid";
+import { PhonePeCredentials, PhonePePaymentInit } from "./types";
+import { PhonePeUrls } from "./env";
+import { normalizeEnvironment } from "./utils";
+
+export class PhonePeNode {
+  private creds: PhonePeCredentials;
+
+  constructor(creds: PhonePeCredentials) {
+    this.creds = creds;
+  }
+
+  private get urls() {
+    const env = normalizeEnvironment(this.creds.environment);
+    return PhonePeUrls[env];
+  }
+
+  async getToken() {
+    const body = new URLSearchParams({
+      client_id: this.creds.clientId,
+      client_secret: this.creds.clientSecret,
+      grant_type: "client_credentials",
+      client_version: "1"
+    });
+
+    const res = await axios.post(this.urls.token, body, {
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    });
+
+    return res.data.access_token;
+  }
+
+  async createPayment(data: PhonePePaymentInit) {
+    const token = await this.getToken();
+
+    const payload = {
+      merchantId: data.merchantId,
+      merchantOrderId: uuidv4(),
+      merchantTransactionId: uuidv4(),
+      amount: data.amount,
+      mobileNumber: data.mobileNumber,
+      redirectUrl: data.redirectUrl,
+      callbackUrl: data.callbackUrl,
+      deviceContext: data.deviceContext,
+      paymentScope: data.paymentScope,
+    };
+
+    const res = await axios.post(this.urls.pay, payload, {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `O-Bearer ${token}`,
+      }
+    });
+
+    return res.data;
+  }
+
+  async getStatus(merchantId: string, merchantOrderId: string) {
+    const token = await this.getToken();
+
+    const res = await axios.post(this.urls.status, {
+      merchantId,
+      merchantOrderId
+    }, {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `O-Bearer ${token}`,
+      }
+    });
+
+    return res.data;
+  }
+}

package/src/PhonePeReact.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { PhonePeCredentials, PhonePePaymentInit } from "./types";
+import { PhonePeUrls } from "./env";
+import { normalizeEnvironment } from "./utils";
+
+declare global {
+  interface Window {
+    PhonePeCheckout: any;
+  }
+}
+
+interface Props extends PhonePeCredentials {
+  request: PhonePePaymentInit;
+  onSuccess: (data: any) => void;
+  onError: (err: any) => void;
+}
+
+export const PhonePeCheckoutWeb: React.FC<Props> = ({
+  environment,
+  clientId,
+  clientSecret,
+  request,
+  onSuccess,
+  onError
+}) => {
+
+  const env = normalizeEnvironment(environment);
+  const urls = PhonePeUrls[env];
+
+  if (!urls) {
+    onError(`Invalid environment: ${environment}`);
+    return;
+  }
+
+
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = urls.script;
+    script.async = true;
+    document.body.appendChild(script);
+
+    script.onload = () => init();
+  }, []);
+
+  const init = async () => {
+    try {
+      const tokenResp = await fetch(urls.token, {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams({
+          client_id: clientId,
+          client_secret: clientSecret,
+          grant_type: "client_credentials",
+          client_version: "1"
+        })
+      });
+
+      const token = (await tokenResp.json()).access_token;
+
+      const payload = {
+        ...request,
+        merchantOrderId: uuidv4(),
+        merchantTransactionId: uuidv4()
+      };
+
+      const payResp = await fetch(urls.pay, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `O-Bearer ${token}`
+        },
+        body: JSON.stringify(payload)
+      });
+
+      const payData = await payResp.json();
+
+      window.PhonePeCheckout.transact({
+        tokenUrl: payData.redirectUrl,
+        type: "IFRAME",
+        callback: () => onSuccess(payData)
+      });
+    } catch (err) {
+      onError(err);
+    }
+  };
+
+  return null;
+};

package/src/PhonePeReactNative.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from "react";
+import { WebView } from "react-native-webview";
+import { v4 } from "uuid";
+import { PhonePeUrls } from "./env";
+import { PhonePeCredentials, PhonePePaymentInit } from "./types";
+import { normalizeEnvironment } from "./utils";
+
+interface Props extends PhonePeCredentials {
+  request: PhonePePaymentInit;
+  onSuccess: (data: any) => void;
+  onError: (err: any) => void;
+}
+
+export const PhonePeCheckoutNative: React.FC<Props> = ({
+  clientId,
+  clientSecret,
+  environment,
+  request,
+  onSuccess,
+  onError
+}) => {
+  const [url, setUrl] = useState<string>();
+  const env = normalizeEnvironment(environment);
+  const urls = PhonePeUrls[env];
+
+  if (!urls) {
+    onError(`Invalid environment: ${environment}`);
+    return;
+  }
+
+  useEffect(() => {
+    init();
+  }, []);
+
+  const init = async () => {
+    try {
+      const tokenResp = await fetch(urls.token, {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams({
+          client_id: clientId,
+          client_secret: clientSecret,
+          grant_type: "client_credentials",
+          client_version: "1"
+        })
+      });
+      const token = (await tokenResp.json()).access_token;
+
+      const payload = {
+        ...request,
+        merchantOrderId: v4(),
+        merchantTransactionId: v4()
+      };
+
+      const payResp = await fetch(urls.pay, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `O-Bearer ${token}`
+        },
+        body: JSON.stringify(payload)
+      });
+
+      const { redirectUrl } = await payResp.json();
+      setUrl(redirectUrl);
+    } catch (err) {
+      onError(err);
+    }
+  };
+
+  return url ? (
+    <WebView
+      source={{ uri: url }}
+      onNavigationStateChange={(nav) => {
+        if (nav.url.includes("callback")) {
+          onSuccess(nav);
+        }
+      }}
+    />
+  ) : null;
+};

package/src/env.ts

@@ -0,0 +1,15 @@
+export const PhonePeUrls = {
+  production: {
+    token: "https://api.phonepe.com/apis/identity-manager/v1/oauth/token",
+    pay: "https://api.phonepe.com/apis/pg/checkout/v2/pay",
+    status: "https://api.phonepe.com/apis/pg/checkout/v2/order/status",
+    script: "https://mercury.phonepe.com/web/bundle/checkout.js",
+  },
+
+  sandbox: {
+    token: "https://api-preprod.phonepe.com/apis/identity-manager/v1/oauth/token",
+    pay: "https://api-preprod.phonepe.com/apis/pg-sandbox/checkout/v2/pay",
+    status: "https://api-preprod.phonepe.com/apis/pg-sandbox/checkout/v2/order/status",
+    script: "https://mercury.phonepe.com/web/bundle/checkout.js",
+  }
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./PhonePeNode";
+export * from "./PhonePeReact";
+export * from "./types";

package/src/native.ts

@@ -0,0 +1 @@
+export * from "./PhonePeReactNative";

package/src/types/react-native-webview.d.ts

@@ -0,0 +1,4 @@
+declare module "react-native-webview" {
+  import { ComponentType } from "react";
+  export const WebView: ComponentType<any>;
+}

package/src/types.ts

@@ -0,0 +1,17 @@
+export type PhonePeEnvironment = "Production" | "Sandbox";
+
+export interface PhonePeCredentials {
+  clientId: string;
+  clientSecret: string;
+  environment: PhonePeEnvironment;
+}
+
+export interface PhonePePaymentInit {
+  merchantId: string;
+  amount: number;
+  mobileNumber?: string;
+  redirectUrl: string;
+  callbackUrl: string;
+  deviceContext?: any;
+  paymentScope?: string;
+}

package/src/utils.ts

@@ -0,0 +1,12 @@
+import { PhonePeEnvironment } from "./types";
+
+export function normalizeEnvironment(env: PhonePeEnvironment): "production" | "sandbox" {
+  const e = String(env).toLowerCase().trim();
+
+  if (e === "production" || e === "prod") return "production";
+  if (e === "sandbox") return "sandbox";
+
+  throw new Error(
+    `Invalid environment "${env}". Expected "Production" or "Sandbox".`
+  );
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "declaration": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "moduleResolution": "Node",
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}