https://github.com/MagdyAbouelnasr/ngx-hyperpay
An Angular library for easy integration of the HyperPay payment gateway. This library provides a component that wraps the HyperPay COPYandPAY integration, making it simple to add a payment form to your Angular application.
https://github.com/MagdyAbouelnasr/ngx-hyperpay
Last synced: 5 months ago
JSON representation
An Angular library for easy integration of the HyperPay payment gateway. This library provides a component that wraps the HyperPay COPYandPAY integration, making it simple to add a payment form to your Angular application.
- Host: GitHub
- URL: https://github.com/MagdyAbouelnasr/ngx-hyperpay
- Owner: MagdyAbouelnasr
- License: mit
- Created: 2026-01-14T21:58:32.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-01-22T13:09:31.000Z (5 months ago)
- Last Synced: 2026-01-22T23:56:54.814Z (5 months ago)
- Language: TypeScript
- Size: 341 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-hyperpay - An Angular library for easy integration of the 🌎 [HyperPay](www.hyperpay.com/) payment gateway. (Security and Authentication / Payments)
- awesome-angular - ngx-hyperpay - An Angular library for easy integration of the [HyperPay](https://www.hyperpay.com/) payment gateway. (Security and Authentication / Payments)
README
# NGX-Hyperpay
An Angular library for easy integration of the HyperPay payment gateway. This library provides a component that wraps the HyperPay COPYandPAY integration, making it simple to add a payment form to your Angular application.
## Installation
Install the package from npm:
```bash
npm install ngx-hyperpay
```
## Backend Integration Required
**Security Note:** Do NOT perform sensitive operations (like generating checkout IDs or querying payment status with authorization tokens) on the client-side.
1. **Generate Checkout ID**: Call your backend API to Request a `checkoutId` from HyperPay using your secret entityId and authorization token.
2. **Pass to Component**: Pass the received `checkoutId` to the `ngx-hyperpay` component.
3. **Handle Callback**: When the payment is complete, HyperPay redirects to your `shopperResultUrl`. The component will emit the `resourcePath` (or `id`).
4. **Verify Payment**: Send this `resourcePath` to your backend. Your backend should then query HyperPay's status API using this path to confirm the payment validity and status.
## Usage
1. Import the `NgxHyperpayComponent` in your component or module:
```typescript
import { NgxHyperpayComponent } from 'ngx-hyperpay';
@Component({
selector: 'app-my-component',
standalone: true,
imports: [NgxHyperpayComponent],
template: `
`
})
export class MyComponent {
checkoutId = 'YOUR_CHECKOUT_ID'; // Obtain this from your server
onPaymentSuccess(data: any) {
console.log('Payment successful:', data);
}
onPaymentFailure(data: any) {
console.log('Payment failed:', data);
}
onPaymentCancel(data: any) {
console.log('Payment cancelled:', data);
}
onPaymentError(error: any) {
console.error('An error occurred:', error);
}
}
```
## API
### Inputs
| Input | Type | Default | Description |
| --------------- | --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------- |
| `checkoutId` | `string` | **Required** | The checkout ID obtained from your server-side integration with HyperPay. |
| `brands` | `string` | `'VISA MASTER MADA'` | A space-separated list of payment brands to display (e.g., `'VISA MASTER AMEX'`). |
| `mode` | `'test'` \| `'live'` | `'test'` | The mode for the HyperPay script. Use `'test'` for development and `'live'` for production. |
| `style` | `'card'` \| `'plain'` | `'card'` | The visual style of the payment form. |
| `locale` | `'en'` \| `'ar'` | `'en'` | The language of the payment widget. |
| `shopperResultUrl`| `string` | `''` | The custom callback URL to redirect to after payment. Overrides `redirectUrl` and default behavior. |
| `redirectUrl` | `string` | `''` | The URL to redirect to after the payment. Defaults to the current URL. |
### Outputs
| Output | EventEmitter<any> | Description |
| ----------- | ---------------------- | ------------------------------------------------------ |
| `onReady` | `void` | Emitted when the HyperPay widget is ready. |
| `onSuccess` | `any` | Emitted when the payment is successful. |
| `onFailure` | `any` | Emitted when the payment fails. |
| `onCancel` | `any` | Emitted when the user cancels the payment. |
| `onError` | `any` | Emitted when an error occurs (e.g., script fails to load). |
| `getResourcePath`| `string` | Emitted when `resourcePath` query parameter is found (decoded). |
| `getRawResourcePath`| `string` | Emitted when `resourcePath` query parameter is found (raw encoded). |
| `getId` | `string` | Emitted when `id` query parameter is found (decoded). |
| `getRawId` | `string` | Emitted when `id` query parameter is found (raw encoded). |
## Development
This library was generated with [Angular CLI](https://github.com/angular/angular-cli).
### Build
Run `ng build ngx-hyperpay` to build the project. The build artifacts will be stored in the `dist/` directory.
### Publishing
After building your library with `ng build ngx-hyperpay`, go to the dist folder `cd dist/ngx-hyperpay` and run `npm publish`.
## Repository
The source code is available on [GitLab](https://github.com/MagdyAbouelnasr/ngx-hyperpay).