https://github.com/shahriar-shojib/react-bkash

React component for accepting bkash payments! [painlessly]
https://github.com/shahriar-shojib/react-bkash

bkash bkash-online-payment bkash-payment-gateway bkash-pgw javascript npm react react-component typescript

Last synced: 10 days ago
JSON representation

React component for accepting bkash payments! [painlessly]

• Host: GitHub
• URL: https://github.com/shahriar-shojib/react-bkash
• Owner: shahriar-shojib
• License: mit
• Created: 2020-12-21T15:55:36.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-09-03T19:22:22.000Z (about 2 years ago)
• Last Synced: 2024-10-13T22:53:23.464Z (23 days ago)
• Topics: bkash, bkash-online-payment, bkash-payment-gateway, bkash-pgw, javascript, npm, react, react-component, typescript
• Language: TypeScript
• Homepage:
• Size: 240 KB
• Stars: 54
• Watchers: 2
• Forks: 13
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React-bKash

![Publish to NPM](https://github.com/shahriar-shojib/React-bKash/workflows/Publish%20to%20NPM%20and%20Github%20Packages/badge.svg)

React component for accepting bkash payments! [painlessly]

---

# How to use

- Run `npm install react-bkash`

- open your react component and add the following code

```jsx

import { useBkash } from 'react-bkash';

export const Checkout = () => {

	const { error, loading, triggerBkash } = useBkash({

		onSuccess: (data) => {

			console.log(data); // this contains data from api response from onExecutePayment

		},

		onClose: () => {

			console.log('Bkash iFrame closed');

		},

		bkashScriptURL: '', // https://scripts.sandbox.bka.sh/versions/1.2.0-beta/checkout/bKash-checkout-sandbox.js

		amount: 1000,

		onCreatePayment: async (paymentRequest) => {

			// call your API with the payment request here

			return await fetch('/create/', {

				method: 'POST',

				body: JSON.stringify(paymentRequest),

			}).then((res) => res.json());

			// must return the following object:

			// {

			// 	paymentID: string;

			// 	createTime: string;

			// 	orgLogo: string;

			// 	orgName: string;

			// 	transactionStatus: string;

			// 	amount: string;

			// 	currency: string;

			// 	intent: string;

			// 	merchantInvoiceNumber: string;

			// }

		},

		onExecutePayment: async (paymentID) => {

			// call your executePayment API here

			return await fetch('/execute/${paymentID}', {

				method: 'POST',

			}).then((res) => res.json());

			// it doesn't matter what you return here, any errors thrown here will be available on error return value of the useBkash hook

		},

	});

	

	if (loading) {

	    return 
loading
;

	}

	

	if (error) {

	    return 
{error.message}
;

	}


	return (

		


			Pay with bKash

		

	);

};

```


---

# Backend

If you don't have a backend, you can use the following library to create a backend using node.js

[![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=shahriar-shojib&repo=bkash-payment-gateway&enable_icons=true)](https://github.com/shahriar-shojib/bkash-payment-gateway)

---

### Contributing

- Please Follow the code style and use the prettier config and eslint config provided in the repository

- Feel free to open `issues` or `pull request` for any issues and bugfixes

- If you want to implement new features or write documentation about existing features feel free to do it as well

- To see a list of missing features or to-do's, please visit the `project` section of the github repository

---

### License

> MIT

> DISCLAIMER: This software comes with absolutely no warranty and is not affiliated with the company **`Bkash`** in any way. Use at your own risk. Author and Contributors are not responsible for any financial damages, outages etc.

### Author

[Shahriar Shojib](https://github.com/shahriar-shojib)

### Contributors

[Sonjoy Datta](https://github.com/sonjoydatta)

[Enamul](https://github.com/Alpha-T30)