feat: Introducing ngx-razorpay - Razorpay integration for Angular

This feature introduces , a comprehensive integration of the Razorpay payment gateway with Angular. Designed for both Single Page Applications (SPAs) and Server-Side Rendered (SSR) applications,  provides seamless payment processing capabilities within Angular projects.

Key features of  include:

- Simplified integration with Angular applications.
- Support for both client-side and server-side rendering scenarios.
- Comprehensive documentation and examples for easy implementation.
- Built-in error handling and validation for a robust payment experience.

Users can now leverage the power of Razorpay's payment solutions directly within their Angular applications with ease and confidence.

BREAKING CHANGE: As this is the initial release of , there are no specific breaking changes. However, users are encouraged to review the documentation for usage instructions and best practices.

For more details, please refer to the README and documentation.

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.github/workflows/publiash.yaml

@@ -0,0 +1,77 @@
+name: Publish Package
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - "projects/ngx-razorpay/**"
+      - "!projects/ngx-razorpay/README.md"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      - name: Use PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "pnpm"
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Build lib
+        run: pnpm build:lib
+
+      - name: Build showcase
+        run: pnpm build:showcase
+
+  publish:
+    needs: build
+    runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    strategy:
+      matrix:
+        node-version: [18.x]
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+      packages: write
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      - name: Use PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "pnpm"
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Publish to GitHub & Github Package Registry
+        run: |
+          pnpm build:lib
+          npx semantic-release@22.0.12

.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

.nvmrc

@@ -0,0 +1 @@
+18.18.0

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "cSpell.words": [
+        "backdropclose",
+        "handleback",
+        "netbanking",
+        "ondismiss",
+        "razorpay",
+        "topbar"
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Shiv Kumar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,121 @@
+# ngx-razorpay
+
+![NPM Version](https://img.shields.io/npm/v/ngx-razorpay.svg?style=flat)
+![NPM Downloads](https://img.shields.io/npm/dm/ngx-razorpay.svg)
+![GitHub release](https://img.shields.io/github/release/shiv-source/ngx-razorpay)
+![License](https://img.shields.io/github/license/shiv-source/ngx-razorpay)
+[![GitHub Pull Requests](https://img.shields.io/github/issues-pr/shiv-source/ngx-razorpay)](https://github.com/shiv-source/ngx-razorpay/pulls)
+
+Angular library for integrating the Razorpay payment gateway, compatible with both Single Page Applications (SPA) and Server-Side Rendering (SSR).
+
+## Installation
+
+You can install ngx-razorpay via npm:
+
+```bash
+npm install ngx-razorpay
+```
+
+You can install ngx-razorpay via yarn:
+
+```bash
+yarn add ngx-razorpay
+```
+
+
+You can install ngx-razorpay via pnpm:
+
+```bash
+pnpm add ngx-razorpay
+```
+
+## Usage
+
+### Import the Module
+
+Import the `NgxRazorpayModule` into your Angular module:
+
+```typescript
+import { NgxRazorpayModule } from 'ngx-razorpay';
+
+@NgModule({
+  imports: [
+    NgxRazorpayModule
+  ]
+})
+export class AppModule { }
+```
+
+### Use in the Component
+
+Use the `ngx-razorpay` component in your Angular templates:
+
+```html
+<ngx-razorpay
+  [key]="yourRazorpayKey" 
+  [amount]="paymentAmount" 
+  [businessName]="businessName" 
+  [orderId]="orderId"
+>
+</ngx-razorpay>
+
+```
+
+## Inputs
+
+| Input                      | Type                      | Description                                             |
+|----------------------------|---------------------------|---------------------------------------------------------|
+| key                        | string (required)         | Razorpay API key                                        |
+| amount                     | number (required)         | Amount to be paid in paisa (e.g., 100 for ₹1)           |
+| businessName               | string (required)         | Name of the business                                    |
+| orderId                    | string (required)         | Order ID or reference                                   |
+| currency                   | string                    | Currency code (default: "INR")                          |
+| description                | string                    | Description of the payment                              |
+| logoUrl                    | string                    | URL of the business logo                                |
+| customerName               | string                    | Name of the customer                                    |
+| customerEmail              | string                    | Email of the customer                                   |
+| customerMobile             | string                    | Mobile number of the customer                           |
+| method                     | PaymentMethod             | Payment method (e.g., 'card', 'netbanking', 'wallet'...)|
+| notes                      | { [key: string]: any }    | Additional notes or metadata                            |
+| hideTopbar                 | boolean                   | Hide the top bar                                        |
+| themeColor                 | string                    | Color theme for the checkout form                       |
+| backdropColor              | string                    | Background color of the overlay                         |
+| backdropClose              | boolean                   | Close on backdrop click                                 |
+| escape                     | boolean                   | Close on escape key press                               |
+| handleBack                 | boolean                   | Handle back button press                                |
+| confirmClose               | boolean                   | Confirm before close                                    |
+| onDismiss                  | Function                  | Callback function on dismiss                            |
+| animation                  | boolean                   | Enable animation                                        |
+| subscriptionId             | string                    | ID of the subscription                                  |
+| subscriptionCardChange     | boolean                   | Allow card change for subscription                      |
+| recurring                  | boolean                   | Enable recurring payments                               |
+| redirect                   | boolean                   | Redirect after payment                                  |
+| customerId                 | string                    | ID of the customer                                      |
+| rememberCustomer           | boolean                   | Remember customer details                               |
+| timeout                    | number                    | Timeout for payment (in milliseconds)                   |
+| isCustomerNameReadOnly     | boolean                   | Make customer name field readonly                       |
+| isCustomerEmailReadOnly    | boolean                   | Make customer email field readonly                      |
+| isCustomerMobileReadOnly   | boolean                   | Make customer mobile field readonly                     |
+| isCustomerEmailHidden      | boolean                   | Hide customer email field                               |
+| isCustomerMobileHidden     | boolean                   | Hide customer mobile field                              |
+| ngClass                    | string                    | Custom CSS classes                                      |
+| ngStyle                    | { [key: string]: string } | Custom inline styles                                    |
+| payBtnText                 | string                    | Text for the pay button                                 |
+| payBtnTemplate             | `TemplateRef<any>`        | Template for the pay button                             |
+
+## Outputs
+
+| Output                    | Description                                   |
+|---------------------------|-----------------------------------------------|
+| paymentSuccessEvent       | Event emitted on successful payment           |
+| paymentFailedEvent        | Event emitted on failed payment               |
+
+## Methods
+
+| Method                 | Description                                       |
+|------------------------|---------------------------------------------------|
+| onPay                  | Method to handle the payment event.               |
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.