How to integrate a payment button into your React App
The previous article walked us through the onboarding process at SMARTy Pay as a Merchant and showed how one can add a simple payment button using plain HTML.
Now, let us focus on the little bit more complex example when your frontend app is built using the popular React Framework.
SMARTy Pay provides an open-source React Payment Button component that could be used to create invoices for specified amounts and tokens on our platform, and redirect your customer to the hosted checkout page.
First, you need to install the component using npm:
npm i smartypay-client-reactNow, you can import and add our component to your application, like any other:
import {SmartyPayButton} from ‘smartypay-client-react’;<SmartyPayButton
amount=”1.99"
token=”bUSDT”
lang=”en”
theme=”dark”
apiKey=”YOUR_API_KEY”
/>
Component properties description could be found in our documentation, and a demo application is hosted for your convenience to see it in action.
As you can see, there is also a Donation button that could be used for money-raising campaigns in cryptocurrency.
You can also check out an example React project located in the corresponding GitHub repository to explore and run it locally.
If you have any questions, please feel free to join us on the Telegram channel:
