Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hebertdev/react-culqi-next
A React library for integration with the Culqi payment processor, compatible with Next.js
https://github.com/hebertdev/react-culqi-next
culqi react tsdx typescript
Last synced: 3 days ago
JSON representation
A React library for integration with the Culqi payment processor, compatible with Next.js
- Host: GitHub
- URL: https://github.com/hebertdev/react-culqi-next
- Owner: hebertdev
- License: mit
- Created: 2023-06-14T23:25:41.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-08-31T23:47:40.000Z (over 1 year ago)
- Last Synced: 2024-10-08T08:41:19.126Z (3 months ago)
- Topics: culqi, react, tsdx, typescript
- Language: TypeScript
- Homepage: https://react-culqi-next.hebertdev.net/
- Size: 153 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# REACT-CULQI-NEXT
A React library for integration with the Culqi payment processor, compatible with Next.js
## Installation
```bash
npm install react-culqi-next
```
## Usage
### Last version
```js
import { useState } from 'react';
import { CulqiProvider, useCheckout } from 'react-culqi-next';
const MyApp = () => {
return (
);
};
const MyButton = () => {
const [amount, setAmount] = useState(10000);
const [title, setTitle] = useState('White T-shirt');
const { openCulqi, token, error } = useCheckout({
settings: {
title: title,
currency: 'PEN',
amount: amount,
//optional
options: {
lang: 'auto',
installments: false,
paymentMethods: {
tarjeta: true,
yape: true,
},
style: {
logo: '',
bannerColor: '',
buttonBackground: '',
buttonText: '',
buttonTextColor: '',
linksColor: '',
menuColor: '',
priceColor: '',
},
},
},
onClose: () => {
console.log('Handle the closing of the modal');
},
onToken: token => {
console.log('Send your token to the backend', token);
},
onError: error => {
console.log('handle the errors', error);
},
});
return (
<>
Pay now
>
);
};
```
### Version 3
```js
//version 3
import { useState } from 'react';
import { CulqiProviderV3, useCheckoutV3 } from 'react-culqi-next';
const MyApp = () => {
return (
);
};
const MyButton = () => {
const [amount, setAmount] = useState(10000);
const [title, setTitle] = useState('White T-shirt');
const { openCulqi, token, error } = useCheckoutV3({
settings: {
title: title,
currency: 'PEN',
description: '',
amount: amount,
//optional
options: {
lang: 'auto',
installments: false,
customButton: '',
modal: true,
style: {
buttontext: '',
desctext: '',
logo: '',
maincolor: '',
maintext: '',
},
},
},
onClose: () => {
console.log('Handle the closing of the modal');
},
onToken: token => {
console.log('Send your token to the backend', token);
},
onError: error => {
console.log('handle the errors', error);
},
});
return (
<>
Pay now
>
);
};
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.
Please make sure to update tests as appropriate.
## License
[MIT](https://choosealicense.com/licenses/mit/)