react-vstar-websdk
v1.1.0
Published
Vouchstar Web SDK for React. To learn more about Vouchstar, visit https://vouchstar.shop
Downloads
177
Readme
VouchstarSDK Configuration Guide
This guide will help you set up and configure VouchstarSDK in your React application.
Installation
First, install the VouchstarSDK package using npm:
npm install react-vstar-websdk
Usage
To use VouchstarSDK in your application, follow these steps:
- Import the VouchstarSDK component into your application:
import {VouchstarSDK} from 'react-vstar-websdk';
- Wrap your application with the VouchstarSDK component and provide your Vouchstar token:
root.render(
<React.StrictMode>
<VouchstarSDK vouchstarToken={YOUR_VOUCHSTAR_TOKEN}>
<App />
</VouchstarSDK>
</React.StrictMode>
);
Configuration
You need to provide your Vouchstar token to the VouchstarSDK component. You can get your Vouchstar token by contacting Vouchstar support.
Buttons and Modals
Once you have set up VouchstarSDK, you're ready to use the buttons and modals.
VouchstarBtn
The VouchstarBtn component is used to display a button that allows users to make a payment.
<VouchstarBtn price={20.00} paymentMethod="PCL_BLIK_REDIRECT" debug={true} />
VouchstarModal
The VouchstarModal component is used to display a modal that allows users to make a payment.
<VouchstarModal />
Minimal Example
import {VouchstarBtn, VouchstarModal} from 'react-vstar-websdk';
function App() {
return (
<div className="App">
<VouchstarBtn price={20.00} paymentMethod="PCL1_BLIK_REDIRECT" debug={true} />
<VouchstarBtn price={20.00} paymentMethod="PCL_BLIK_REDIRECT" debug={true} userEmail='[email protected]' userPhoneNumber={123123123} userPhonePrefix='+48'/>
<VouchstarBtn price={20.00} paymentMethod="PCL_BLIK_REDIRECT" paymentCurrency="USD" debug={true} />
<VouchstarBtn additional="testing-id" price={20.00} paymentMethod="PCL_BLIK_REDIRECT" paymentCurrency="PLN" theme="light" debug={true} type='row' />
<VouchstarBtn price={20.00} theme="dark" debug={true} />
<VouchstarBtn theme="light" debug={true} type='row' price={20}/>
<VouchstarBtn config={{payment: {method: 'PCL_BLIK_REDIRECT'}, price: 20.00}} theme='light' size="lg" type='row' debug={true}/>
<VouchstarBtn theme="light" debug={true} size="xl" type="row"/>
<VouchstarModal />
</div>
);
}
export default App;