Токенизация

Этот функционал, предназначенный для мерчантов, у которых есть необходимость осуществлять выплаты на банковские карты пользователя, но отсутствует возможность собирать и хранить данные банковских карт на своей стороне. Получение токена для банковских карт, осуществляется посредством встроенного на сайт мерчанта javascript библиотеки или же прямой(с сайта мерчанта) отправкой данных о карте на сервис токенизации. Таким образом, предварительно введенные данные карт клиентов мерчанта, будут зашифрованы в нашей системе токенизации и храниться удаленно, обеспечивая мерчанту совершать выплаты с указанием платежного токена гарантией безопасности, без повторного ввода данных.

Интеграция и инициализация виджета


    <div id="your-id-widget'"></div
            

    window.addEventListener('load', function(event) {
        new PayWidget('your-id-widget', { config });
    });
            
Обязательные свойства объекта config для успешной инициализации
                
    let config = {
        clientId: 'c5cddabc-6af5-4374-8eb0-c32f0ebbdb29',
        urlApi: 'https://token.molot.ru/api/card'
    };
                
            

# Config - главный объект

Name Type Value default Description Required
cliendId String - - true
urlApi String - url для получения токена true
cardHolder Boolean true Поле формы "Месяц и год" false
expiryDate Boolean true Поле формы "Держатель карты" false
cvv Boolean false Поле формы "CVV код" false
modalSuccess Boolean true По-умолчанию, модальное окно об успешном получение токена (светлая и темная тема) false

# Style - вложенный в config объект для замены стилей

Данный объект необязателен
Значение принимает любое валидное css свойство
                
    let config = {
        clientId: 'c5cddabc-6af5-4374-8eb0-c32f0ebbdb29',
        urlApi: 'https://token.molot.ru/api/card',
        style: {
            key: value:
            ...
        }
    };
                
            
Объект style необязателен
Все цветовые свойства применяются только для светлой темы.
Темная тема - цвета установлены по-умолчанию
Name Type Value default
customFontFamily String "ШРИФТ", -apple-system, BlinkMacSystemFont, "Roboto", "Ubuntu", "Droid Sans", "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol

По-умолчанию используется прием с fallback шрифтами

globalTheme String dark - принимает только одно значение

По-умолчанию светлая тема

+ card Object
maxWidth String 400px
backgroundColor String transparent
boxShadow String `0 2px 4px rgba(184, 207, 226, 0.11), 0 2px 4px rgba(184, 207, 226, 0.81)`
+ card.border Object
radius String 6px
color String #e2e2e2
width String 1px
+ input Object
backgroundColor String #f9fcff
fontSize String 1.075rem
lineHeight String 1
fontWeight String 400
height String 3rem
placeholderColor String #4d598e
+ input.hover Object
backgroundColor String #fff
borderColor String #d4e0ea
+ input.focus Object
backgroundColor String #fff
borderColor String #b2c7d9
+ input.label Object
color String #0d0c22
fontSize String 15px
lineHeight String 24px
fontWeight String bold
+ input.border Object
radius String 4px
color String #e5ecf2
width String 2px
+ button Object
fullWidth Boolead false
backgroundColor String #2569CB
color String #ff
fontWeight String 500
+ button.border Object
radius String 4px
+ privacyText Object
fontSize String 11px
color String #0d0c22

# Callback function - onError, onSuccess

Необязательно, по-умолчанию инициализируется default function
Принимает callback для установки поведения при error и success

    new PayWidget('your-id-widget', { config, onError, onSuccess });
            
Name Type Required Incoming data Default function
onSuccess Func false На вход приходит объект data

    onSuccess(data) {
      console.log('default onSuccess with token', data.token)
    };
                            
onError Func false На вход приходит объект error

    onError(error) {
        console.log('default onError', error);
    },              

# Текст и Локализация

Определения языка происходит автоматически по данному порядку:

    order: [
        'cookie',
        'localStorage',
        'navigator',
        'htmlTag',
        'path',
        'subdomain',
    ],
        
Исходя из того какой язык был определен будет установлен соответствующий язык (lang).
По-умолчанию текст только для Ru и En, если язык определился другой, то установится En.
Item Ru En
Label Номер карты Card number
Placeholder Введите номер карты Enter card number
Label Месяц и год Expiry date
Placeholder ММ / ГГ MM / YY
Label CVV код Security code
Placeholder _ _ _ _ _ _
Label Держатель карты Name on card
Placeholder Ivan Petrov John Smith
Button Сохранить Save
Privacy text Данные обрабатываются финансовой институцией PayMaster24 LTD Data is processed by the financial institution PayMaster24 LTD
Текст валидации на клиенте
Ru En
Введите номер карты Enter card number
Дата окончания как на карте Enter month and year
Код на обороте карты Enter code
Введите имя Enter card holder name

Для изменения текста по-умолчанию и добавление нового языка перевода:

  • - создать папку locales на одном уровне с js
  • - создать папку для каждой локали (lang) /en, /ru ... и при необходимости другие языки
  • - создать json файл строго с именем cardWidget.json для каждого языка
  • Путь по-умолчанию: ./locales/{{lang}}/cardWidget.json

    Если необходимо добавить новый язык, то порядок такой же. Например, французский язык, то ./locales/fr/cardWidget.json

Пример всех свойств объекта config

            
    let config = {
        clientId: 'c5cddabc-6af5-4374-8eb0-c32f0ebbdb29', // enter your ID
        urlApi: 'https://token.molot.ru/api/card',
        cardHolder: true,
        cvv: false,
        modalSuccess: true,
        style: {
            globalTheme: '', // dark
            customFontFamily: '',
            card: {
                maxWidth: '',
                backgroundColor: '',
                boxShadow: '',
                border: {
                    radius: '',
                    color: '',
                    width: '',
                },
            },
            input: {
                backgroundColor: '',
                fontSize: '',
                lineHeight: '',
                height: '',
                fontWeight: '',
                placeholderColor: '',
                hover: {
                    backgroundColor: '',
                    borderColor: '',
                },
                focus: {
                    backgroundColor: '',
                    borderColor: '',
                },
                label: {
                    color: '',
                    fontSize: '',
                    lineHeight: '',
                    fontWeight: '',
                },
                border: {
                    radius: '',
                    color: '',
                    width: '',
                },
            },
            button: {
                fullWidth: '',
                backgroundColor: '',
                color: '',
                fontWeight: '',
                border: {
                    radius: '',
                },
            },
            privacyText: {
                fontSize: '',
                color: '',
            },
        },
    };
            
        

2. Прямой POST запрос к сервису токенизации

Пример запроса:
  • Request URL:
                        
        https://token.molot.ru/api/card
                        
                    
  • Method:
                        
        POST
                        
                    
  • FormData:
                        
        cardNumber=5555555555554444&expiryMonth=12&expiryYear=12&cardHolder=BULAT%20BULAT&clientId=c5cddabc-6af5-4374-8eb0-c32f0ebbdb29
                        
                    
  • Пример ответа от сервиса:
                        
        {
            "errorCode":0,
            "description":null,
            "data":{
                "token":"5112875722893120619",
                "expirationDate":"2012-12-01T00:00:00"
            }
        }
                        
                    
  • При errorCode = 0, token будет содержать платежный токен, который мерчант в дальнейшем будет использовать для выплат.
  • При errorCode отличном от 0, в description будет описание ошибки.
  • expirationDate дата окончания действия токена.