Payout Widget
The widget is a prebuilt UI component that can be embedded in your flow and allows you to send Payouts to cardholders in a simple and secure way.
Features
The Payout Widget features provide the following:
- Integration that is easy and simple
- The possibility to embed it anywhere throughout your flow
- Validation errors and input formatting
- Responsive design
- Appearance that can be effortlessly customised
Use cases
This component is useful if your business needs to send Payouts to cardholders.
If you have already saved the cardholder's card in the past, you can trigger the payout directly. To find more information on this process, you may visit Payouts.
However, with this prebuilt UI component, you will be able to collect card information for a Payout even if:
- the card has not previously been saved
- the card has been saved but cannot be used for Payouts
Styling and Appearance
You can customize the Widget to fit your flow and brand look. This personalization can be achieved in two ways:
1. By using our Widget Preview Page to create a preferred combination. - You can use the page to adjust the design after choosing the preference that suits you best. You will be able to see the preview of the widget, and then you can retrieve the HTML and copy it to your website.
2. By manually making the adjustments. - An alternative would be for you to make the code adjustments yourself by using the parameters described in the documentation of this portal.
Widget Preview Page
In this section, we will describe the the main options available on the Widget Preview Page.
With the Payout Widget UI preview page, you can customise your page in accordance with your brand's look and feel. You can preview the changes while making them. Here are some examples of the customization that can be implemented:
1. Theme: light or dark mode
2. Background: with or without background
3. Optional agreement checkbox for storing cards
Besides these customising features, you are also able to adjust colours, button placements, fonts, the option to display accepted cards, and other aspects of the design and layout. This can be achieved by specifying details on your own. For more details on the CSS properties and classes available, visit the Technical integration section of this page.
Technical integration
The Tokenization Widget can be easily integrated by following these steps:
- Add the Tokenization Widget JS library.
- Specify configuration attributes of the payment card data tokenization form.
- Handle the tokenization result events.
1. Add the Tokenization Widget JS library
The first step in the process of integration of the Tokenization Widget is to add the tokenization-widget.js script to your page.
Sandbox
<script src="https://sandbox.unifiedapi.nets.eu/widget/v1/tokenization/tokenization-widget.js" defer="true" ></script>
Production
<script src="https://unifiedapi.nets.eu/widget/v1/tokenization/tokenization-widget.js" defer="true" ></script>
Use the defer attribute to download the script asynchronously to parse the page and execute it after the page has finished parsing.
2. Specify configuration attributes of the payment card data tokenization widget
The tokenization-widget is a custom HTML element that enables the integration of the payment card data tokenization widget into your web page.
Tokenization-widget
<tokenization-widget id="id_123" merchant_key="merchantId_123" type="payout"
Attributes
| Parameter name | Type | Supported values | Mandatory | Description |
|---|---|---|---|---|
| id | string | Unique HTML Id | ❌ | A standard HTML attribute used for unique identification of an HTML element within a document. |
| merchant_key | string | Valid merchant Id assigned by the PSP | ✅ | Specifies the unique merchant ID provided to the merchant by the PSP. |
type
| enum string | Payout | ✅ | Type of the tokenization widget. |
| brands | enum string or list of enum strings | Visa, Mastercard | ❌ | Specifies accepted card brands. |
| field_version | enum string | default, slim | ❌ | Specifies the style of the form fields. |
| version | enum string | default, no-background | ❌ | Background setup of the form. |
| border_radius | enum string | none, medium, high | ❌ | Specifies the corner radius of the form. |
| button_position | enum string | left, center, right | ❌ | Determines the position of the submit button in the form. |
| button_radius | enum string | none, medium, high | ❌ | Sets the border radius of the submit button. |
| primary_color | string | Accepts RGB or hex color values | ❌ | Sets the primary color of the form. |
| font_family | enum string | All Google fonts | ❌ | Sets the font of the text in the form. |
| lang | enum string | EN, DE | ❌ | Sets the language of the form. |
| theme | enum string | dark, light | ❌ | Theme of the form. |
3. Handle the tokenization result events
The tokenization-widget component emits two custom events:
- tokenization-success
- tokenization-error
These events should be used as triggers for further actions.
- The tokenization-success event: it is emitted when the tokenization process is successful. The details of the tokenization result can be accessed via e.detail.result.
Example
const widget = document.querySelector('#id_123'); widget.addEventListener('tokenization-success', (e) => { // e.detail.result contains the details of the tokenization result console.log(e.detail.result);
Data structure of tokenization result
{ "id": "id", "paymentCardDetails": { "bin": "41111",
- The tokenization-error event: it is emitted when an error occurs during the tokenization process. The details of the error can be accessed via e.detail.error.
Example
const widget = document.querySelector('#id_123'); widget.addEventListener('tokenization-error', (e) => { // e.detail.error contains the error details from the tokenization process console.log(e.detail.error);