VouchstarWebSDK plugin for React

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>
);

While using Buttons and Modal component set the proper imports

import {VouchstarBtn, VouchstarModal} from "react-vstar-websdk";

Optional Domain Setup

If you are using the multi-domain system. You can attach a domain to the setup like so:

root.render(
  <React.StrictMode>
    <VouchstarSDK
      vouchstarToken={YOUR_VOUCHSTAR_TOKEN}
      vouchstarDomain={DOMAIN_ID}
    >
      <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='test@gmail.com' 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;