VouchstarBtn component

VouchstarBtn

Should be placed any where we want to initiate the VouchstarModal to show.

Component name:

<VouchstarBtn />

Available component props and details:

(optional) theme - Type: string = ‘light’ | ‘dark’ Default value: ‘dark’

Change the theme to be used for this button.

(optional) type - Type: string = ‘col’ | ‘row’ Default value: ‘col’

Change the type to be used for this button.

(optional) size - Type: string = ‘md’ | ‘lg’ | ‘xl’ Default value: ‘xl’

Change the size to be used for this button.

(optional) debug - Type: boolean

Show the json config that is used to build the button.

(optional) additional (max chars: 255) - Type: string

Any additional information that you want to send back to your self. If this is set this will be added to the webhook communication.

(optional) price - Type: number

The price of the transaction.

Example:

<VouchstarBtn :price="20.00" />

(optional) userEmail - Type: string

Example:

<VouchstarBtn :price="20.00" userEmail="test@email.com" />

// OR

<VouchstarBtn :price="20.00" user-email="test@email.com" />

Users email to be set for this transaction. Visible also in VouchstarModal user details view.

(optional) userPhonePrefix - Type: string

Users phone number prefix to be set for this transaction. Visible also in VouchstarModal user details view.

Example:

<VouchstarBtn :price="20.00" userPhonePrefix="+48" />

// OR

<VouchstarBtn :price="20.00" user-phone-prefix="+48" />

(optional) userPhoneNumber - Type: number

Users phone number to be set for this transaction. Visible also in VouchstarModal use details view.

Example:

<VouchstarBtn :price="20.00" userPhoneNumber="123123123" />

// OR

<VouchstarBtn :price="20.00" user-phone-number="123123123" />

(optional) paymentCurrency - Type: string

The currency to be used for this transaction. Eg. USD, PLN, EUR, CHF

Example:

<VouchstarBtn :price="20.00" paymentCurrency="PLN" />

// OR

<VouchstarBtn :price="20.00" payment-currency="PLN" />

(optional) paymentMethod - Type: string

The payment method to be used for this transaction. Eg. PCL_BLIK_REDIRECT, PCL_SKRILL

Example:

<VouchstarBtn :price="20.00" paymentMethod="PCL_BLIK_REDIRECT" />

// OR

<VouchstarBtn :price="20.00" payment-method="PCL_BLIK_REDIRECT" />

(optional) config - Type: json

This gives you the option to set all of the config in one go.

// Full config options
interface ConfigOptions {
    // The price to use in this transaction. If it is not set `activateVoucher` is automatically set to `true`
    // eg. 20.00, 50.00, 150.00
    price?: number
    // (optional) PaymentOptions used for this transaction
    payment?: PaymentOptions
    // (optional) UserOptions used for this transaction
    user?: UserOptions
}

// All payment options to be used for this transaction
interface PaymentOptions {
    // Currency the payment should be made in
    // eg. USD, PLN, CHF, EUR
    currency?: string
    // Selected payment method for this transaction
    // eg. PCL_BLIK_REDIRECT, PCL_SKRILL
    method?: string
}

// All user details to be set on transaction initialisation
interface UserOptions {
    // Users email for this transaction
    // Will be automatically set in the VouchstarModal
    // eg. jon.snow@game.com
    email?: string
    // Users phone number prefix - geolocation
    // eg. +48, +32, +355
    phonePrefix?: string
    // Users phone number
    // eg. 123456789
    phoneNumber?: number
}

Example of full setup for a price set config:

<VouchstarBtn
    :config={
       price: 20.00,
       payment: {
            currency: "USD",
            paymentMethod: "PCL_BLIK_REDIRECT",
       }
       user: {
            email: "test@email.com"
            phonePrefix: "+48",
            phoneNumber: 123123123
       }
    }
/>

Example of full setup for an only activate voucher config:

<VouchstarBtn
    :config={
       :activateVoucher="true"
    }
/>