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

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

![Светлая тема](/files/-LtyUh-lZ6BgExBWIR-w)

![Тёмная тема](/files/-LtyUr4cD9rBk0_tvhMk)

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

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

{% 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.payanyway.ru/payment-form-v2/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.