Auto activate checkbox

Enabling the Checkbox

Description

Prior to initializing the WebSDK plugin, it is necessary to activate a user consent checkbox.

Before initializing the WebSDK or displaying the Vouchstar buttons, it is essential to implement a checkbox or button through which users can provide their consent.

Label IMPORTANT

The checkbox or button must include the following consent text:

I want to activate the voucher after successful payment

Recommended Setup

Ensure the checkbox is pre-selected to true.

<div class="flex items-center">
    <!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
    <button type="button" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="switch" aria-checked="false" aria-labelledby="vs-user-accept">
        <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
        <span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
    </button>
    <span class="text-xs font-medium text-gray-600">I want to activate the voucher after successful payment</span>
  </span>
</div>

Toggle

<div class="relative flex items-start">
    <div class="flex items-center h-5">
        <input id="vs-user-accept" aria-describedby="vs-user-accept" name="vs-user-accept" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
    </div>
    <div class="ml-3 text-sm">
        <label for="vs-user-accept" class="text-xs font-medium text-gray-600">I want to activate the voucher after successful payment</label>
    </div>
</div>

checkbox