Ng-culqi NPM | npm.io

ng-culqi

Culqi payment gateway library made to use with Angular.

Installation

Adding Scully to your project is as simple as running one command:

npm i ng-culqi

Usage

After installation add this code below the app-root tag in the index.html.

  <app-root></app-root>
  <script src="https://checkout.culqi.com/js/v3"></script>
  <script>
    function culqi() {
      if (Culqi.token) {
        var token = Culqi.token.id;
        var payment_event = new CustomEvent("payment_event", {
          detail: token,
        });
        document.dispatchEvent(payment_event);
      }
    }
  </script>

Inside the class, add the @HostListener decorator to catch the event from the culqi.js:

 @HostListener('document:payment_event', ['$event'])
  onPaymentEventCustom($event: CustomEvent) {
    this.TOKEN_CULQI = $event.detail;
  }

Inside ngOnInit add the following script:

  ngOnInit() {
    this.ngCulqiService.initCulqi('ENTER_PUBLIC_KEY');
  }

Replace with the PUBLIC KEY granted by Culqi.

Create the function to run the gateway. Within the function you have to configure your payment gateway with the data of the online store. You can also configure the button within the Culqi modal.

Check Culqi documentation for more information

  handleButtonPayment() {
    const culqiSettings = {
      title: 'My Angular Store',
      currency: '',
      description: 'item #01',
      amount: 100.00,
    };
    const culqiOptions = {
      lang: 'auto',
      modal: true,
      installments: false,
      customButton: '',
      style: {
        logo: '',
        maincolor: '',
        buttontext: '',
        maintext: '',
        desctext: '',
      },
    };
    this.ngCulqiService.generateToken(culqiSettings, culqiOptions);
  }