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-vouchstart-websdk

Usage

To use VouchstarSDK in your application, follow these steps:

1. Import the VouchstarSDK component into your application:

import VouchstarSDK from 'react-vouchstart-websdk';

2. 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  from '@/components/VouchstarBtn';
import VouchstarModal from './components/VouchstarModal';

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;