Интеграция и инициализация виджета
<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 дата окончания действия токена.