├── .github ├── FUNDING.yml ├── workflows │ └── codecov.yml └── ISSUE_TEMPLATE │ └── feature_request.md ├── CONTRIBUTING.md ├── .vscode ├── extensions.json ├── launch.json └── tasks.json ├── SECURITY.md ├── projects └── ngx-culqi │ ├── ng-package.json │ ├── src │ ├── public-api.ts │ └── lib │ │ ├── ngx-culqi.service.spec.ts │ │ ├── models │ │ └── culqi.model.ts │ │ └── ngx-culqi.service.ts │ ├── tsconfig.lib.prod.json │ ├── tsconfig.spec.json │ ├── tsconfig.lib.json │ ├── package.json │ └── README.md ├── .editorconfig ├── .gitignore ├── tsconfig.json ├── LICENSE ├── angular.json ├── package.json └── README.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [lperezp] 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to ngx-culqi 2 | 3 | I would love for you to help ngx-culqi and make it even better than it is today! -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | | Version | Supported | 6 | | ------- | ------------------ | 7 | | 1.0.3 | :white_check_mark: | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/ngx-culqi/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-culqi", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/ngx-culqi/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ngx-culqi 3 | */ 4 | 5 | export * from './lib/ngx-culqi.service'; 6 | export { ICulqiOptions, IOrderCulqiResponse } from './lib/models/culqi.model'; -------------------------------------------------------------------------------- /projects/ngx-culqi/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /projects/ngx-culqi/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "**/*.spec.ts", 12 | "**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/ngx-culqi/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [] 10 | }, 11 | "exclude": [ 12 | "**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /.github/workflows/codecov.yml: -------------------------------------------------------------------------------- 1 | name: Workflow for Codecov 2 | on: [push, pull_request] 3 | jobs: 4 | run: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Checkout 8 | uses: actions/checkout@v4 9 | with: 10 | fetch-depth: 0 11 | - name: Upload coverage to Codecov 12 | uses: codecov/codecov-action@v4 13 | with: 14 | verbose: true 15 | env: 16 | CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} -------------------------------------------------------------------------------- /projects/ngx-culqi/src/lib/ngx-culqi.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { NgxCulqiService } from './ngx-culqi.service'; 4 | 5 | describe('NgxCulqiService', () => { 6 | let service: NgxCulqiService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(NgxCulqiService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /projects/ngx-culqi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-culqi", 3 | "version": "2.0.3", 4 | "description": "UNOFFICIAL Culqi payment gateway library made to use with Angular by lperezp.dev", 5 | "author": "Luis Eduardo ", 6 | "license": "MIT", 7 | "keywords": [ 8 | "javascript", 9 | "node", 10 | "npm", 11 | "culqi", 12 | "angular", 13 | "ngx-culqi" 14 | ], 15 | "peerDependencies": { 16 | "@angular/common": "^18.0.0", 17 | "@angular/core": "^18.0.0" 18 | }, 19 | "dependencies": { 20 | "tslib": "^2.3.0" 21 | }, 22 | "sideEffects": false, 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/lperezp/ngx-culqi.git" 26 | }, 27 | "bugs": { 28 | "url": "https://github.com/lperezp/ngx-culqi/issues" 29 | } 30 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "paths": { 13 | "ngx-culqi": [ 14 | "./dist/ngx-culqi" 15 | ] 16 | }, 17 | "esModuleInterop": true, 18 | "sourceMap": true, 19 | "declaration": false, 20 | "experimentalDecorators": true, 21 | "moduleResolution": "bundler", 22 | "importHelpers": true, 23 | "target": "ES2022", 24 | "module": "ES2022", 25 | "useDefineForClassFields": false, 26 | "lib": [ 27 | "ES2022", 28 | "dom" 29 | ] 30 | }, 31 | "angularCompilerOptions": { 32 | "enableI18nLegacyMessageIdFormat": false, 33 | "strictInjectionParameters": true, 34 | "strictInputAccessModifiers": true, 35 | "strictTemplates": true 36 | } 37 | } -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 ngx-culqi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "ngx-culqi": { 7 | "projectType": "library", 8 | "root": "projects/ngx-culqi", 9 | "sourceRoot": "projects/ngx-culqi/src", 10 | "prefix": "lib", 11 | "architect": { 12 | "build": { 13 | "builder": "@angular-devkit/build-angular:ng-packagr", 14 | "options": { 15 | "project": "projects/ngx-culqi/ng-package.json" 16 | }, 17 | "configurations": { 18 | "production": { 19 | "tsConfig": "projects/ngx-culqi/tsconfig.lib.prod.json" 20 | }, 21 | "development": { 22 | "tsConfig": "projects/ngx-culqi/tsconfig.lib.json" 23 | } 24 | }, 25 | "defaultConfiguration": "production" 26 | }, 27 | "test": { 28 | "builder": "@angular-devkit/build-angular:karma", 29 | "options": { 30 | "tsConfig": "projects/ngx-culqi/tsconfig.spec.json", 31 | "polyfills": [ 32 | "zone.js", 33 | "zone.js/testing" 34 | ] 35 | } 36 | } 37 | } 38 | } 39 | }, 40 | "cli": { 41 | "analytics": "989462a0-05e1-42d5-8931-8272062520f7" 42 | } 43 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-culqi-workspace", 3 | "version": "2.0.3", 4 | "description": "UNOFFICIAL Culqi payment gateway library made to use with Angular by lperezp.dev", 5 | "author": "Luis Eduardo ", 6 | "license": "MIT", 7 | "keywords": [ 8 | "javascript", 9 | "node", 10 | "npm", 11 | "culqi", 12 | "angular", 13 | "ngx-culqi" 14 | ], 15 | "scripts": { 16 | "ng": "ng", 17 | "start": "ng serve", 18 | "build": "ng build", 19 | "watch": "ng build --watch --configuration development", 20 | "test": "ng test" 21 | }, 22 | "dependencies": { 23 | "@angular/animations": "^18.0.0", 24 | "@angular/common": "^18.0.0", 25 | "@angular/compiler": "^18.0.0", 26 | "@angular/core": "^18.0.0", 27 | "@angular/forms": "^18.0.0", 28 | "@angular/platform-browser": "^18.0.0", 29 | "@angular/platform-browser-dynamic": "^18.0.0", 30 | "@angular/router": "^18.0.0", 31 | "rxjs": "~7.8.0", 32 | "tslib": "^2.3.0", 33 | "zone.js": "~0.14.3" 34 | }, 35 | "devDependencies": { 36 | "@angular-devkit/build-angular": "^18.0.2", 37 | "@angular/cli": "^18.0.2", 38 | "@angular/compiler-cli": "^18.0.0", 39 | "@types/jasmine": "~5.1.0", 40 | "jasmine-core": "~5.1.0", 41 | "karma": "~6.4.0", 42 | "karma-chrome-launcher": "~3.2.0", 43 | "karma-coverage": "~2.2.0", 44 | "karma-jasmine": "~5.1.0", 45 | "karma-jasmine-html-reporter": "~2.1.0", 46 | "ng-packagr": "^18.0.0", 47 | "typescript": "~5.4.2" 48 | }, 49 | "repository": { 50 | "type": "git", 51 | "url": "git+https://github.com/lperezp/ngx-culqi.git" 52 | }, 53 | "bugs": { 54 | "url": "https://github.com/lperezp/ngx-culqi/issues" 55 | } 56 | } -------------------------------------------------------------------------------- /projects/ngx-culqi/src/lib/models/culqi.model.ts: -------------------------------------------------------------------------------- 1 | export interface ICulqiSettings { 2 | title: string; 3 | currency: string; 4 | amount: number; 5 | order: string | undefined; 6 | xculqirsaid: string; 7 | rsapublickey: string; 8 | } 9 | export interface ICulqiOptions { 10 | lang?: string; 11 | installments?: boolean; 12 | paymentMethods?: IPaymentMethods; 13 | style?: IStyle 14 | } 15 | 16 | export interface IPaymentMethods { 17 | tarjeta: boolean; 18 | yape: boolean; 19 | bancaMovil: boolean; 20 | agente: boolean; 21 | billetera: boolean; 22 | cuotealo: boolean; 23 | } 24 | 25 | export interface IStyle { 26 | logo: string; 27 | bannerColor?: string; 28 | buttonBackground?: string; 29 | menuColor?: string; 30 | linksColor?: string; 31 | buttonText?: string; 32 | buttonTextColor?: string; 33 | priceColor?: string; 34 | } 35 | 36 | export interface IOrderCulqi { 37 | amount: number; 38 | currency_code: string; 39 | description: string; 40 | order_number: number; 41 | client_details: IClientDetails; 42 | expiration_date: number; 43 | confirm: boolean; 44 | } 45 | 46 | export interface IClientDetails { 47 | first_name: string; 48 | last_name: string; 49 | email: string; 50 | phone_number: string; 51 | } 52 | 53 | export interface IOrderCulqiResponse { 54 | object: string; 55 | id: string; 56 | amount: number; 57 | payment_code: null; 58 | currency_code: string; 59 | description: string; 60 | order_number: string; 61 | state: string; 62 | total_fee: null; 63 | net_amount: null; 64 | fee_details: null; 65 | creation_date: number; 66 | expiration_date: number; 67 | updated_at: number; 68 | paid_at: null; 69 | available_on: null; 70 | metadata: null; 71 | qr: null; 72 | cuotealo: null; 73 | url_pe: null; 74 | } 75 | -------------------------------------------------------------------------------- /projects/ngx-culqi/src/lib/ngx-culqi.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient } from '@angular/common/http'; 3 | import { BehaviorSubject, Observable } from 'rxjs'; 4 | import { ICulqiOptions, ICulqiSettings, IOrderCulqi, IOrderCulqiResponse } from './models/culqi.model'; 5 | export declare let Culqi: any; 6 | 7 | @Injectable({ 8 | providedIn: 'root' 9 | }) 10 | export class NgxCulqiService { 11 | tokenCreatedSubject = new BehaviorSubject(null); 12 | tokenCreated$ = this.tokenCreatedSubject.asObservable(); 13 | 14 | orderCreatedSubject = new BehaviorSubject(null); 15 | orderCreated$ = this.orderCreatedSubject.asObservable(); 16 | 17 | apiKeyCulqi: string | null = null; 18 | 19 | constructor(private http: HttpClient) { 20 | (window as any).culqi = this.culqi.bind(this); 21 | } 22 | 23 | /** 24 | * @param {value} value of the token created by Culqi for backend 25 | */ 26 | setTokenCreated(value: string): void { 27 | this.tokenCreatedSubject.next(value); 28 | } 29 | 30 | /** 31 | * @param {value} value of the order id created by Culqi 32 | */ 33 | setOrderCreated(value: string): void { 34 | this.orderCreatedSubject.next(value); 35 | } 36 | 37 | /** 38 | * @param {tokenCulqi} token offered by Culqi 39 | */ 40 | initCulqi(tokenCulqi: string): void { 41 | Culqi.publicKey = tokenCulqi; 42 | } 43 | 44 | /** 45 | * @param {tokenCulqi} token offered by Culqi 46 | * @param {apiKeyCulqi} apiKey offered by Culqi 47 | */ 48 | loadScriptCulqi(tokenCulqi: string, apiKeyCulqi: string): void { 49 | const script = document.createElement('script'); 50 | script.type = 'text/javascript'; 51 | script.src = 'https://checkout.culqi.com/js/v4'; 52 | script.onload = () => { 53 | this.initCulqi(tokenCulqi); 54 | this.apiKeyCulqi = apiKeyCulqi; 55 | }; 56 | document.head.appendChild(script); 57 | } 58 | 59 | /** 60 | * @param {order} order to be created for generate a payment 61 | * @returns returns the order created by Culqi API 62 | */ 63 | generateOrder(order: IOrderCulqi): Observable> { 64 | return this.http.post('https://api.culqi.com/v2/orders', order, { 65 | headers: { 66 | Authorization: `Bearer ${this.apiKeyCulqi}` 67 | } 68 | }); 69 | } 70 | 71 | /** 72 | * @param {culqiSettings} e-commerce setup 73 | * @param {culqiOptions} payment pop up configuration 74 | */ 75 | generateToken(culqiSettings: ICulqiSettings, culqiOptions?: ICulqiOptions): void { 76 | if (Culqi) { 77 | Culqi.settings(culqiSettings); 78 | const options: ICulqiOptions = { 79 | lang: "es", 80 | installments: false, 81 | paymentMethods: { 82 | tarjeta: true, 83 | yape: true, 84 | bancaMovil: true, 85 | agente: true, 86 | billetera: true, 87 | cuotealo: true, 88 | }, 89 | ...culqiOptions 90 | }; 91 | Culqi.options(options); 92 | Culqi.open(); 93 | } 94 | } 95 | 96 | /** 97 | * function for open Culqi payment pop up 98 | */ 99 | culqi(): void { 100 | if (Culqi.token) { 101 | const token = Culqi.token.id; 102 | this.setTokenCreated(token); 103 | } else if (Culqi.order) { 104 | const order = Culqi.order; 105 | this.setOrderCreated(order); 106 | } else { 107 | throw new Error('Culqi has not been loaded correctly.', Culqi.error); 108 | } 109 | } 110 | 111 | /** 112 | * function for close Culqi payment pop up 113 | */ 114 | closeCulqi(): void { 115 | Culqi.close(); 116 | this.tokenCreatedSubject.unsubscribe(); 117 | this.orderCreatedSubject.unsubscribe(); 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

6 | ngx-culqi 7 |

8 | 9 |
10 | 11 | UNOFFICIAL [Culqi](https://culqi.com/) payment gateway library made to use with Angular by [lperezp.dev](https://lperezp.dev/?utm_source=ngx-culqi&utm_medium=readme&utm_campaign=ngx-culqi&utm_id=github) 12 | 13 | [![Github branch](https://github.com/lperezp/culqi-angular/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/lperezp/culqi-angular/actions/workflows/pages/pages-build-deployment/badge.svg) 14 | [![CodeFactor](https://www.codefactor.io/repository/github/lperezp/ngx-culqi/badge?style=flat-square)](https://www.codefactor.io/repository/github/lperezp/ngx-culqi) 15 | [![GitHub Release Date](https://img.shields.io/github/release-date/lperezp/ngx-culqi.svg?style=flat-square)](https://github.com/lperezp/ngx-culqi/releases) 16 | [![npm package](https://img.shields.io/npm/v/ngx-culqi.svg?style=flat-square)](https://www.npmjs.org/package/ngx-culqi) 17 | [![NPM downloads](http://img.shields.io/npm/dm/ngx-culqi.svg?style=flat-square)](https://npmjs.org/package/ngx-culqi) 18 | [![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/lperezp/ngx-culqi/blob/master/LICENSE) 19 | [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) 20 | [![Twitter](https://img.shields.io/badge/Twitter-lperezp_pe-blue.svg?style=flat-square&logo=twitter)](https://twitter.com/lperezp_pe) 21 | 22 |
23 | 24 | ## Demo 25 | 26 | [Ver Demo](https://lperezp.github.io/culqi-angular/) 27 | 28 | ## ☀️ License 29 | 30 | [MIT](https://github.com/lperezp/ngx-culqi/blob/master/LICENSE) 31 | 32 | ## 🖥 Environment Support 33 | 34 | * Angular `^18.0.0` [![npm package](https://img.shields.io/npm/v/ngx-culqi.svg?style=flat-square)](https://www.npmjs.org/package/ngx-culqi) 35 | 36 | ## 📦 Installation 37 | 38 | Adding ngx-culqi to your project is as simple as running one command: 39 | 40 | ``` 41 | npm i ngx-culqi 42 | ``` 43 | 44 | ## 🔨 Usage 45 | 46 | 47 | ``` 48 | import { ICulqiOptions, IOrderCulqiResponse, NgxCulqiService } from 'ngx-culqi'; 49 | 50 | @Component({...}) 51 | export class YourComponent { 52 | constructor(private ngxCulqiService: NgxCulqiService) {} 53 | 54 | paymentCulqi(): void { 55 | const order = { 56 | "amount": 1000, 57 | "currency_code": "", 58 | "description": "", 59 | "order_number": 00001, 60 | "client_details": { 61 | "first_name": "", 62 | "last_name": "", 63 | "email": "", 64 | "phone_number": "" 65 | }, 66 | "expiration_date": (Math.floor(Date.now() / 1000) + 86400), 67 | "confirm": false 68 | }; 69 | 70 | this.ngxCulqiService.generateOrder(order).subscribe((response: Partial) => { 71 | const culqiSettings = { 72 | title: order.description, 73 | currency: 'PEN', 74 | amount: order.amount, 75 | order: response.id, 76 | xculqirsaid: environment.xculqirsaid, 77 | rsapublickey: environment.rsapublickey 78 | }; 79 | 80 | const culqiOptions: ICulqiOptions = { style: this.styleCulqi }; 81 | this.ngxCulqiService.generateToken(culqiSettings, culqiOptions); 82 | }); 83 | } 84 | } 85 | ``` 86 | 87 | 88 | 89 | Inside ``ngOnInit`` add the following script: 90 | 91 | ``` 92 | ngOnInit(): void { 93 | this.ngxCulqiService.loadScriptCulqi(environment.tokenCulqi, environment.apiKeyCulqi); 94 | this.ngxCulqiService.tokenCreated$.subscribe(value => { 95 | if (value) { 96 | this.showToken(value); 97 | this.ngxCulqiService.closeCulqi(); 98 | } 99 | }); 100 | 101 | this.ngxCulqiService.orderCreated$.subscribe(value => { 102 | if (value) { 103 | this.showOrder(value); 104 | } 105 | }); 106 | } 107 | ``` 108 | 109 | ***[Check Culqi documentation for more information](https://docs.culqi.com/#/pagos/inicio)*** 110 | 111 | ## 🔗 Links 112 | 113 | * [Culqi](https://culqi.com/) 114 | * [Culqi Docs](https://docs.culqi.com/es/documentacion/) 115 | 116 | ## 🤝 Contributing 117 | 118 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/lperezp/ngx-culqi/pulls) 119 | 120 | I welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/lperezp/ngx-culqi/blob/master/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/lperezp/ngx-culqi/pulls) or as [GitHub issues](https://github.com/lperezp/ngx-culqi/issues). 121 | 122 | ## 🎉 Author 123 | 124 | - [Luis Eduardo](https://lperezp.dev/?utm_source=ngx-culqi&utm_medium=readme&utm_campaign=ngx-culqi&utm_id=github) 125 | 126 | **Love ngx-culqi? Give our repo a star :star: :arrow_up:.** 127 | -------------------------------------------------------------------------------- /projects/ngx-culqi/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

6 | ngx-culqi 7 |

8 | 9 |
10 | 11 | UNOFFICIAL [Culqi](https://culqi.com/) payment gateway library made to use with Angular by [lperezp.dev](https://lperezp.dev/?utm_source=ngx-culqi&utm_medium=readme&utm_campaign=ngx-culqi&utm_id=github) 12 | 13 | [![Github branch](https://github.com/lperezp/culqi-angular/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/lperezp/culqi-angular/actions/workflows/pages/pages-build-deployment/badge.svg) 14 | [![CodeFactor](https://www.codefactor.io/repository/github/lperezp/ngx-culqi/badge?style=flat-square)](https://www.codefactor.io/repository/github/lperezp/ngx-culqi) 15 | [![GitHub Release Date](https://img.shields.io/github/release-date/lperezp/ngx-culqi.svg?style=flat-square)](https://github.com/lperezp/ngx-culqi/releases) 16 | [![npm package](https://img.shields.io/npm/v/ngx-culqi.svg?style=flat-square)](https://www.npmjs.org/package/ngx-culqi) 17 | [![NPM downloads](http://img.shields.io/npm/dm/ngx-culqi.svg?style=flat-square)](https://npmjs.org/package/ngx-culqi) 18 | [![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/lperezp/ngx-culqi/blob/master/LICENSE) 19 | [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) 20 | [![Twitter](https://img.shields.io/badge/Twitter-lperezp_pe-blue.svg?style=flat-square&logo=twitter)](https://twitter.com/lperezp_pe) 21 | 22 |
23 | 24 | ## Demo 25 | 26 | [Ver Demo](https://lperezp.github.io/culqi-angular/) 27 | 28 | ## ☀️ License 29 | 30 | [MIT](https://github.com/lperezp/ngx-culqi/blob/master/LICENSE) 31 | 32 | ## 🖥 Environment Support 33 | 34 | * Angular `^18.0.0` [![npm package](https://img.shields.io/npm/v/ngx-culqi.svg?style=flat-square)](https://www.npmjs.org/package/ngx-culqi) 35 | 36 | ## 📦 Installation 37 | 38 | Adding ngx-culqi to your project is as simple as running one command: 39 | 40 | ``` 41 | npm i ngx-culqi 42 | ``` 43 | 44 | ## 🔨 Usage 45 | 46 | 47 | ``` 48 | import { ICulqiOptions, IOrderCulqiResponse, NgxCulqiService } from 'ngx-culqi'; 49 | 50 | @Component({...}) 51 | export class YourComponent { 52 | constructor(private ngxCulqiService: NgxCulqiService) {} 53 | 54 | paymentCulqi(): void { 55 | const order = { 56 | "amount": 1000, 57 | "currency_code": "", 58 | "description": "", 59 | "order_number": 00001, 60 | "client_details": { 61 | "first_name": "", 62 | "last_name": "", 63 | "email": "", 64 | "phone_number": "" 65 | }, 66 | "expiration_date": (Math.floor(Date.now() / 1000) + 86400), 67 | "confirm": false 68 | }; 69 | 70 | this.ngxCulqiService.generateOrder(order).subscribe((response: Partial) => { 71 | const culqiSettings = { 72 | title: order.description, 73 | currency: 'PEN', 74 | amount: order.amount, 75 | order: response.id, 76 | xculqirsaid: environment.xculqirsaid, 77 | rsapublickey: environment.rsapublickey 78 | }; 79 | 80 | const culqiOptions: ICulqiOptions = { style: this.styleCulqi }; 81 | this.ngxCulqiService.generateToken(culqiSettings, culqiOptions); 82 | }); 83 | } 84 | } 85 | ``` 86 | 87 | 88 | 89 | Inside ``ngOnInit`` add the following script: 90 | 91 | ``` 92 | ngOnInit(): void { 93 | this.ngxCulqiService.loadScriptCulqi(environment.tokenCulqi, environment.apiKeyCulqi); 94 | this.ngxCulqiService.tokenCreated$.subscribe(value => { 95 | if (value) { 96 | this.showToken(value); 97 | this.ngxCulqiService.closeCulqi(); 98 | } 99 | }); 100 | 101 | this.ngxCulqiService.orderCreated$.subscribe(value => { 102 | if (value) { 103 | this.showOrder(value); 104 | } 105 | }); 106 | } 107 | ``` 108 | 109 | ***[Check Culqi documentation for more information](https://docs.culqi.com/#/pagos/inicio)*** 110 | 111 | ## 🔗 Links 112 | 113 | * [Culqi](https://culqi.com/) 114 | * [Culqi Docs](https://docs.culqi.com/es/documentacion/) 115 | 116 | ## 🤝 Contributing 117 | 118 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/lperezp/ngx-culqi/pulls) 119 | 120 | I welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/lperezp/ngx-culqi/blob/master/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/lperezp/ngx-culqi/pulls) or as [GitHub issues](https://github.com/lperezp/ngx-culqi/issues). 121 | 122 | ## 🎉 Author 123 | 124 | - [Luis Eduardo](https://lperezp.dev/?utm_source=ngx-culqi&utm_medium=readme&utm_campaign=ngx-culqi&utm_id=github) 125 | 126 | **Love ngx-culqi? Give our repo a star :star: :arrow_up:.** 127 | --------------------------------------------------------------------------------