# Платёжная форма

Наша форма имеет две цветовые темы – светлую и тёмную. Подумайте, какая из них будет лучше сочетаться с дизайном вашего сайта:

![Светлая тема](https://548799807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld9fkSEkl3osIxlhshp%2F-LtyRkiyqLuTmCROYEVq%2F-LtyUh-lZ6BgExBWIR-w%2Fdefault_one-input.png?alt=media\&token=2a54ca9d-1486-443e-bf9f-6c49abf495de)

![Тёмная тема](https://548799807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld9fkSEkl3osIxlhshp%2F-LtyRkiyqLuTmCROYEVq%2F-LtyUr4cD9rBk0_tvhMk%2Fdefault_one-input_dark.png?alt=media\&token=6e461d6e-0281-4db8-a56f-4d7030fd93fd)

Определились? Теперь можно приступать к интеграции.

## Добавление платёжной формы на сайт магазина

{% hint style="info" %}
Если вы уже используете интерфейс **MONETA.Assistant**, то подключение новой платёжной формы займёт совсем немного времени, если нет – [изучите документацию](http://moneta.ru/doc/MONETA.Assistant.ru.pdf), чтобы реализовать обработчики **Check** и **Pay URL**.
{% endhint %}

### Подключим скрипт

После того, как ваш магазин готов обрабатывать запросы от нашей системы, добавьте следующий скрипт на страницу, где будете принимать платежи от клиентов:

```markup
<script type="text/javascript" src="https://www.payanyway.ru/assistant-builder">
</script>
```

{% hint style="info" %}
Исходники скрипта доступны на [GitHub](https://github.com/PayAnyWay/assistant)
{% endhint %}

### Определим параметры платежа

Теперь на этой же странице нужно подготовить параметры для платёжной формы:

```markup
<script type="text/javascript">

    var options = {
        account: 32691195,
        amount: 12.34,
        transactionId: '1234567890-abcdef'
    };
    
    ...

</script>
```

В этом примере параметров всего три, но может быть и больше – вот они все:

| Параметр      | Описание                                                                                                                                                                                                                                                                                                          | По умолчанию |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| account       | Номер вашего бизнес-счёта                                                                                                                                                                                                                                                                                         |              |
| amount        | Сумма платежа                                                                                                                                                                                                                                                                                                     |              |
| transactionId | Номер заказа в магазине                                                                                                                                                                                                                                                                                           |              |
| operationId   | ID операции в PayAnyWay                                                                                                                                                                                                                                                                                           |              |
| description   | Описание заказа                                                                                                                                                                                                                                                                                                   |              |
| signature     | Подпись запроса                                                                                                                                                                                                                                                                                                   |              |
| subscriberId  | ID клиента в магазине                                                                                                                                                                                                                                                                                             |              |
| testMode      | <p>Признак тестового платежа. Значения: </p><p><em>0</em> – платёж настоящий, </p><p><em>1</em> – платёж тестовый</p>                                                                                                                                                                                             | *0*          |
| lang          | <p>Язык интерфейса. Значения: </p><p><em>ru</em> – русский,</p><p><em>en</em> – английский </p>                                                                                                                                                                                                                   | *ru*         |
| theme         | <p>Цветовая тема интерфейса. Значения: </p><p><em>light</em> – светлая,</p><p><em>dark</em> – тёмная</p>                                                                                                                                                                                                          | *light*      |
| customParams  | <p>Укажите любые другие параметры, если необходимо. Например: </p><p></p><p><em>customParams: {</em></p><p>    <em>param1: "value1",</em></p><p>    <em>param2: "value2"</em></p><p><em>}</em> </p><p></p><p>Все параметры из блока <em>customParams</em> будут присутствовать в запросах на Check и Pay URL.</p> |              |

### Отрисуем платёжную форму

После того, как все параметры платёжной формы определены – отрисуем её.&#x20;

```javascript
var assistant = new Assistant.Builder();
assistant.build(options, 'payment-form');
```

Обратите внимание на второй параметр в функции *build*. Это id контейнера, в котором будет отрисована платёжная форма. В данном примере нам предварительно нужно было создать следующий html-элемент и разместить его на странице:

```markup
<div id="payment-form"></div>
```

Если не указывать второй параметр в функции *build* – платёжная форма будет отрисована в модальном окне поверх всей страницы.

{% hint style="info" %}
Платёжная форма в модальном окне всегда имеет светлую цветовую тему. Наши дизайнеры небезосновательно считают, что так лучше.
{% endhint %}

### Добавим обработчики

И ещё один момент – после успешной оплаты или в случае ошибки (а иногда – во время обработки платежа) бывает необходимо совершить какие-либо действия: уйти на другую страницу и так далее. Для этого можно добавить обработчики:

```javascript
// платёж прошёл успешно
assistant.setOnSuccessCallback(function(operationId, transactionId) {
    // todo: здесь можно сделать что угодно – например, 
    // перенаправить на другую страницу:
    location.replace("https://domain.domain"); 
});

// платёж не прошёл
assistant.setOnFailCallback(function(operationId, transactionId) {
    // todo: действия на ваш вкус
});

// платёж обрабатывается
assistant.setOnInProgressCallback(function(operationId, transactionId) {
    // todo: тоже можно что-нибудь придумать           
});
```

Здесь: *operationId* – номер операции в **PayAnyWay**, *transactionId* – номер заказа в магазине.

{% hint style="info" %}
Если в настройках счёта задан *InProgress URL* – переход по нему произойдёт автоматически.
{% endhint %}

### Код целиком

Если вдруг где-то запутались:

```markup
<div id="payment-form"></div>

<script type="text/javascript" src="https://www.payanyway.ru/assistant-builder">
</script>
<script type="text/javascript">

    var options = {
        account: 32691195,
        amount: 12.34,
        transactionId: '1234567890-abcdef'
    };

    var assistant = new Assistant.Builder();
    
    // платёж прошёл успешно
    assistant.setOnSuccessCallback(function(operationId, transactionId) {
        // todo: здесь можно сделать что угодно – например, 
        // перенаправить на другую страницу:
        location.replace("https://domain.domain"); 
    });
    
    // платёж не прошёл
    assistant.setOnFailCallback(function(operationId, transactionId) {
        // todo: действия на ваш вкус
    });
    
    // платёж обрабатывается
    assistant.setOnInProgressCallback(function(operationId, transactionId) {
        // todo: тоже можно что-нибудь придумать            
    });
    
    assistant.build(options, 'payment-form');

</script>
```