Skip to main content

Performing payouts with the widget

If you do not have PCI DSS, use our widget to securely perform bank card operations.

Our widget allows you to get a user's card details in a tokenized form. You can store this token and use it later to repeat payouts to this card.

Widget

Getting started​

To start using our widget, do the following:

In test environment

<link href="https://widget-demo.smart-glocal.com/card-tokenizer.css" rel="stylesheet" />
<script src="https://widget-demo.smart-glocal.com/card-tokenizer.js" defer></script>

For real payouts

<link href="https://widget.smart-glocal.com/card-tokenizer.css" rel="stylesheet" />
<script src="https://widget.smart-glocal.com/card-tokenizer.js" defer></script>

Add the widget container​


<div id="smgl-card-tokenizer"></div>

Once the script is linked to the page, the SmglCardTokenizer class will appear in the global scope.

Making a payout using the widget​

Below is an example of how to start any payout through the widget.

Complete the following steps:

  1. Send a token request to create a token specifying the widget name. As a result you will receive a public token.

    You can also pass the locale optional parameter to specify the widget localization language. Currently, the following values are available: "locale":"en" and "locale":"ru". If this parameter is not passed, "locale":"en" is used.

    Request example
    curl -X POST \
    http://demo.smart-glocal.com/api/v1/token \
    -H 'Content-Type: application/json' \
    -H 'X-PARTNER-PROJECT: your_project_name' \
    -H 'X-PARTNER-SIGN: signature' \
    -d '{
    "tokenize_widget": {
        "access": true,
        "locale": "en"
     }
     }'

  2. Use the returned public token to initialize the widget.

    Example

    const cardTokenizer = new SmglCardTokenizer('public token');

  3. Process the successful tokenization event.

    Example
    cardTokenizer.onTokenizationSuccess = function (cardToken) {
    // ...
    };

  4. To display the form, call the render() method:

    Example

    cardTokenizer.render();

  5. Get the tokenized bank card details.

  6. Proceed with your payout.

    In the EncryptedCard object, pass the tokenized bank card details obtained from the widget.

    Example
    curl -X POST \
      https://demo.smart-glocal.com/api/v1/session/start/payout \
      -H 'Content-Type: application/json' \
      -H 'X-PARTNER-PROJECT: your_project_name' \
      -H 'X-PARTNER-SIGN: signature' \
      -d '{
      "session_id": "3230",
      "payment_method": {
        "type": "card",
        "card": {
             "type": "encrypted_card",
             "encrypted_card": {
                 "number_hash": "63191fa17cc7edf818ee5d6611a2c2169ab30b705111cffd710af39880deef09",
                 "expiration_date_hash": "f4286b9a8e0eb7974f34a996ee732fd861868f2fc7aaa7ed5cca8de2489534ad",
                 "cardholder_name_hash": "dd6cce1e06790019dd266c6f70430f87dd378df802c6b7494395156f62533ce6",
                 "security_code_hash": "7756b897e88c035f34c6658a147e263b29b480a5cdf76581012ff10ede478c4c"
               }
       }
     },
     "metadata": "good"
     }'

    To find information on the token or card, use the token/info method. This method also returns the last 4 numbers of the card, so that you can show the user which card is involved in the operation.

Widget API​

SmglCardTokenizer​

Tokenization form class constructor.


new SmglCardTokenizer(publicToken[, options])

ParameterMandatoryTypeDescription
publicToken+StringPublic token
options-ObjectAdditional settings object
  container-HTMLElementContainer into which the form will be inserted.
Default value:
<div id="smgl-card-tokenizer"></div>
  texts-ObjectText settings
    cardNumberLabel-StringLabel for the card number input field. Default value: Card number
    submitButtonLabel-StringTokenization button label. Default value: Link the card

Method: cardTokenizer.render()​

This method displays the form on the page in the container defined by the options.container parameter.


cardTokenizer.render([options]);

ParameterMandatoryTypeDescription
options-ObjectAdditional settings object
  container-HTMLElementContainer into which the form will be inserted. Default value: <div id="smgl-card-tokenizer"></div>

Event handlers​

cardTokenizer.onReady​

Handles the event of the form getting ready for work.

cardTokenizer.onReady = function () {
  /* handler */
};

cardTokenizer.onTokenizationStart​

Handles the event occurring at the start of the tokenization process.

cardTokenizer.onTokenizationStart = function () {
  /* handler */
};

cardTokenizer.onTokenizationSuccess​

Handles the event occurring when the tokenization process finishes successfully.

cardTokenizer.onTokenizationSuccess = function (cardToken) {
  /* handler */
};
ParameterMandatoryTypeDescription
cardToken+Object
  info-ObjectAdditional card information object
    card_network-String
    card_type-StringCard type, e.g. visa
    masked_card_number-StringMasked card number value, e.g. 424242******4242
  token+StringTokenized card number

cardTokenizer.onTokenizationFail​

Handles the event occurring when the tokenization process finishes unsuccessfully.

cardTokenizer.onTokenizationFail = function (error) {
  /* handler */
};

Widget customization​

Appearance​

You can link your own styles at the end of the default ones and override them.

<link href="https://widget.smart-glocal.com/card-tokenizer.css" rel="stylesheet" />
<link href="custom-styles.css" rel="stylesheet" />

You cannot yet change the appearance of the value entered into the form (inside the iframe). This option will be added later.

Texts​

You can change the text of the form using the options.texts parameter in the SmglCardTokenizer constructor.