UNOFFICIAL Culqi payment gateway library made to use with Angular by lperezp.dev
- Angular
^18.0.0
Adding ngx-culqi to your project is as simple as running one command:
npm i ngx-culqi
import { ICulqiOptions, IOrderCulqiResponse, NgxCulqiService } from 'ngx-culqi';
@Component({...})
export class YourComponent {
constructor(private ngxCulqiService: NgxCulqiService) {}
paymentCulqi(): void {
const order = {
"amount": 1000,
"currency_code": "",
"description": "",
"order_number": 00001,
"client_details": {
"first_name": "",
"last_name": "",
"email": "",
"phone_number": ""
},
"expiration_date": (Math.floor(Date.now() / 1000) + 86400),
"confirm": false
};
this.ngxCulqiService.generateOrder(order).subscribe((response: Partial<IOrderCulqiResponse>) => {
const culqiSettings = {
title: order.description,
currency: 'PEN',
amount: order.amount,
order: response.id,
xculqirsaid: environment.xculqirsaid,
rsapublickey: environment.rsapublickey
};
const culqiOptions: ICulqiOptions = { style: this.styleCulqi };
this.ngxCulqiService.generateToken(culqiSettings, culqiOptions);
});
}
}
Inside ngOnInit add the following script:
ngOnInit(): void {
this.ngxCulqiService.loadScriptCulqi(environment.tokenCulqi, environment.apiKeyCulqi);
this.ngxCulqiService.tokenCreated$.subscribe(value => {
if (value) {
this.showToken(value);
this.ngxCulqiService.closeCulqi();
}
});
this.ngxCulqiService.orderCreated$.subscribe(value => {
if (value) {
this.showOrder(value);
}
});
}
Check Culqi documentation for more information
I welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues.
Love ngx-culqi? Give our repo a star ⭐ ⬆️.