Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lperezp/ngx-culqi

UNOFFICIAL Culqi payment gateway library made to use with Angular.
https://github.com/lperezp/ngx-culqi

angular culqi npm

Last synced: about 1 month ago
JSON representation

UNOFFICIAL Culqi payment gateway library made to use with Angular.

Host: GitHub
URL: https://github.com/lperezp/ngx-culqi
Owner: lperezp
License: mit
Created: 2019-12-16T04:56:53.000Z (almost 5 years ago)
Default Branch: main
Last Pushed: 2024-07-09T21:11:03.000Z (5 months ago)
Last Synced: 2024-07-09T22:33:56.041Z (5 months ago)
Topics: angular, culqi, npm
Language: TypeScript
Homepage: https://www.npmjs.com/package/ngx-culqi
Size: 498 KB
Stars: 4
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md

Awesome Lists containing this project

trackawesomelist - ngx-culqi (⭐8) - UNOFFICIAL [Culqi](https://culqi.com/) payment gateway library made to use with Angular. You can use the library like this [example (⭐10)](https://github.com/lperezp/culqi-angular). (Recently Updated / [Oct 07, 2024](/content/2024/10/07/README.md))
awesome-angular - ngx-culqi - UNOFFICIAL [Culqi](https://culqi.com/) payment gateway library made to use with Angular. You can use the library like this [example](https://github.com/lperezp/culqi-angular). (Table of contents / Angular)
fucking-awesome-angular - ngx-culqi - UNOFFICIAL 🌎 [Culqi](culqi.com/) payment gateway library made to use with Angular. You can use the library like this <b><code>    11⭐</code></b> <b><code>     1🍴</code></b> [example](https://github.com/lperezp/culqi-angular)). (Table of contents / Angular)

README

        


    





ngx-culqi





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)

[![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)

[![CodeFactor](https://www.codefactor.io/repository/github/lperezp/ngx-culqi/badge?style=flat-square)](https://www.codefactor.io/repository/github/lperezp/ngx-culqi)

[![GitHub Release Date](https://img.shields.io/github/release-date/lperezp/ngx-culqi.svg?style=flat-square)](https://github.com/lperezp/ngx-culqi/releases)

[![npm package](https://img.shields.io/npm/v/ngx-culqi.svg?style=flat-square)](https://www.npmjs.org/package/ngx-culqi)

[![NPM downloads](http://img.shields.io/npm/dm/ngx-culqi.svg?style=flat-square)](https://npmjs.org/package/ngx-culqi)

[![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/lperezp/ngx-culqi/blob/master/LICENSE)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

[![Twitter](https://img.shields.io/badge/Twitter-lperezp_pe-blue.svg?style=flat-square&logo=twitter)](https://twitter.com/lperezp_pe)



## Demo

 [Ver Demo](https://lperezp.github.io/culqi-angular/)

## ☀️ License

[MIT](https://github.com/lperezp/ngx-culqi/blob/master/LICENSE)

## 🖥 Environment Support

* 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)

## 📦 Installation

Adding ngx-culqi to your project is as simple as running one command:

```

npm i ngx-culqi

```

## 🔨 Usage

```

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) => {

      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](https://docs.culqi.com/#/pagos/inicio)***

## 🔗 Links

* [Culqi](https://culqi.com/)

* [Culqi Docs](https://docs.culqi.com/es/documentacion/)

## 🤝 Contributing

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/lperezp/ngx-culqi/pulls)

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).

## 🎉 Author

- [Luis Eduardo](https://lperezp.dev/?utm_source=ngx-culqi&utm_medium=readme&utm_campaign=ngx-culqi&utm_id=github)

**Love ngx-culqi? Give our repo a star :star: :arrow_up:.**