# Встраивание кнопок для платежей с использованием методов Apple Pay и Google Pay {#ru_pp_embedded_payment_buttons}
статья о порядке работы со специализированной редакцией платёжной формы Payment Page для глубокой интеграции с сервисами Apple Pay и Google Pay
## Общая информация {#section_gsv_s5w_vgc .section}
В некоторых случаях может быть актуальным использовать непосредственно в веб-сервисе брендированные кнопки, позволяющие оплачивать заказы широко известными платёжными методами, такими как Apple Pay и Google Pay. При работе с платёжной платформой Ecommpay для этого можно применять специализированную редакцию платёжной формы Payment Page, встраиваемую в веб-сервис в виде соответствующих кнопок и позволяющую проводить платежи со сбором всех необходимых сведений, в том числе о доставке, на стороне сервисов платёжных методов.
При использовании этой редакции платёжной формы в интерфейсе веб-сервиса пользователю отображаются кнопки заданных методов, а при переходе по любой из этих кнопок выполняется перенаправление к соответствующему платёжному сервису, без использования интерфейса Payment Page. Вместе с тем, если для проведения платежа необходимо предоставить дополнительные сведения, пользователю может отображаться модальное окно с соответствующими страницами Payment Page. Чтобы избегать таких ситуаций, рекомендуется обеспечивать передачу необходимых сведений в запросах на открытие Payment Page, а также сбор таких сведений на стороне сервисов Apple Pay или Google Pay.
Эта редакция платёжной формы позволяет работать с методами Apple Pay и Google Pay и может сочетаться с основной редакцией Payment Page, в том числе для поддержки платежей с использованием токенов платёжных карт \([подробнее](ru_PP_Payment_by_token.md)\), для перехода к другим методам через их предварительный выбор в веб-сервисе \([подробнее](ru_PP__PreselectingPS.md)\) и для вызова платёжной формы с полным набором доступных методов. При этом оформление кнопок можно настраивать с помощью параметров вызова платёжной формы \(подробнее [далеe](ru_pp_embedded_payment_buttons.md#section_ltd_zgx_mhc)\). Использование встроенного в интерфейс Dashboard конструктора оформления для этих кнопок не поддерживается, но может быть полезным для настройки оформления тех страниц платёжной формы, которые могут отображаться пользователям в случае необходимости предоставить дополнительные сведения.
## Особенности {#section_u5f_ftw_q3c .section}
При использовании специализированных кнопок Apple Pay и Google Pay от Ecommpay стоит учитывать следующие особенности:
- Встраивание брендированных кнопок непосредственно в веб-сервис мерчанта может улучшать пользовательский опыт и повышать конверсию. Это обеспечивается тем, что, во-первых, кнопки таких глобальных сервисов, как правило, легко узнаваемы и повышают доверие со стороны пользователей, и во-вторых, при работе с такими кнопками число действий в основном пользовательском сценарии сводится к минимуму, без каких-либо дополнительных перенаправлений и подтверждений. \(Так, открытие Payment Page с предварительно выбранным методом Apple Pay или Google Pay добавляет в схожий пользовательский сценарий по крайней мере один дополнительный шаг.\)
- Оформление брендированных кнопок регулируется требованиями компаний Apple и Google и может настраиваться мерчантом с учётом их рекомендаций.
- Минималистичный дизайн, используемый для встраиваемых кнопок, может быть удобен во многих случаях, например в интерфейсах с высокой плотностью информации и при работе с мобильных устройств.
- При проведении оплат с использованием встраиваемых кнопок поддерживается сбор необходимых дополнительных сведений о пользователях \(включая их расчётные адреса, адреса и способы доставки товаров и иную информацию\) непосредственно в сервисах Apple Pay и Google Pay, в рамках платёжных сессий. Это позволяет избегать сбора соответствующих сведений на стороне веб-сервиса или платёжной формы Payment Page, с сопутствующим расширением пользовательских сценариев и дополнительными действиями по настройке такой функциональности.
- В случаях, когда пользователь аутентифицирован в сервисе Apple Pay или Google Pay и на стороне этого сервиса есть соответствующая информация, возможно проведение „быстрых“ платежей \(по сценарию *Express checkout*\) — с автоматическим заполнением всех необходимых сведений о пользователе \(включая сведения о платёжной карте, расчётном адресе, адресе и способе доставки\). При этом релевантные сведения о доставке и расчётном адресе могут быть доступны мерчанту в рамках платёжной сессии соответствующего сервиса. Такой сценарий может быть особенно актуальным для тех пользователей, которые не аутентифицированы в веб-сервисе мерчанта, с поддержкой режима так называемого „гостевого заказа“ \(*guest checkout*\), без создания учётной записи в веб-сервисе.
- Кнопки Apple Pay и Google Pay могут встраиваться на любую страницу веб-сервиса \(например, на страницу с описанием товара или в раздел каталога товаров\), практически в любой из структурных элементов \(включая меню и различные панели и блоки\), что обеспечивает высокую гибкость и позволяет реализовывать разнообразные способы перехода пользователей к оплатам.
## Пользовательский сценарий {#section_j1y_t5w_vgc .section}
Со стороны пользователя проведение оплаты с использованием встроенных кнопок может выглядеть следующим образом.
1. Пользователь переходит в интерфейсе веб-сервиса на страницу, где ему отображаются кнопки заданных методов, и инициирует оплату с помощью одного из них.
2. Пользователь перенаправляется к сервису выбранного метода.
3. В сервисе выбранного метода пользователь выбирает адрес и способ доставки, если это актуально, и выполняет другие необходимые действия.
4. Пользователю отображается информация о результате оплаты \(с учётом того, как это настроено на стороне веб-сервиса\).
## Варианты оформления {#section_phr_twq_x3c .section}
Со стороны мерчанта можно настраивать различные параметры оформления брендированных кнопок, включая варианты их компоновки, наполнения \(в части названий и логотипов\) и цветового оформления, а также высоту и радиус скругления. Для этого предусмотрены соответствующие параметры вызова платёжной формы \(подробнее [далеe](ru_pp_embedded_payment_buttons.md#section_ltd_zgx_mhc)\).
При работе с параметрами оформления брендированных кнопок стоит учитывать следующее:
- Необходимо соблюдать требования и рекомендации компаний Apple \([подробнее](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons)\) и Google \([подробнее](https://developers.google.com/pay/api/web/guides/brand-guidelines)\).
- Вариант компоновки и размеры задаются как общие параметры и действуют идентично для всех применяемых кнопок, в то время как остальные параметры можно применять для каждого метода \(и соответствующей кнопки\) индивидуально.
- При выборе варианта компоновки кнопок он применяется только в ситуациях, когда ширина элемента, в который встроены кнопки, превышает 1047 пикселей. В остальных случаях кнопки располагаются строго друг под другом.
- Для статичного управления размерами доступна только высота кнопок, но не их ширина. Ширина устанавливается автоматически и меняется динамически, исходя из ширины элемента, в который встраиваются кнопки, и количества кнопок в одном ряду. Минимально допустимая ширина каждой кнопки составляет 160 пикселей, а максимально допустимая — ширине элемента, в который встраиваются кнопки. Высота кнопок по умолчанию составляет 44 пикселя.
## Схема работы {#section_yp4_55w_vgc .section}
При проведении оплаты с использованием встроенных кнопок взаимодействие между веб-сервисом и платёжной формой строится с применением специализированных библиотек Ecommpay и осуществляется следующим образом.
1. От веб-сервиса на заданный URL Ecommpay передаётся запрос на проведение оплаты через Payment Page.
2. Запрос на проведение оплаты поступает в платёжную платформу.
3. В платёжной платформе выполняется приём запроса, с проверкой наличия обязательных параметров и корректной подписи.
4. Осуществляется подготовка к открытию платёжной формы согласно параметрам проекта и вызова.
5. Пользователю отображаются кнопки заданных методов.
6. Пользователь щёлкает кнопку одного из доступных платёжных методов.
7. На стороне Payment Page выполняется обработка запроса.
8. От Payment Page к веб-сервису направляется сообщение о необходимости подтвердить оплату.
9. От веб-сервиса к Payment Page направляется сообщение с подтверждением оплаты, после чего выполняются действия, актуальные для этого метода.
10. От Payment Page к веб-сервису направляется сообщение с информацией о результате оплаты и адресом страницы для перенаправления пользователя.
Взаимодействие при указании сведений о доставке на стороне сервиса выбранного метода \(Apple Pay или Google Pay\) может осуществляться следующим образом.
1. От веб-сервиса к Payment Page направляется сообщение с подтверждением оплаты.
2. В платёжную платформу передаётся запрос на открытие интерфейса и формы оплаты Google Pay.
3. Запрос на открытие интерфейса и формы оплаты Google Pay и получение информации о картах, доступных пользователю, передаётся в сервис Google Pay.
4. В сервисе Google Pay выполняется обработка запроса и формируется платёжная форма со списком карт, доступных пользователю.
5. Пользователю отображается интерфейс сервиса Google Pay со списком карт в маскированном виде и полями для указания сведений о доставке.
6. Пользователь указывает адрес доставки.
7. В сервисе Google Pay выполняется обработка запроса.
8. От сервиса Google Pay к Payment Page направляется сообщение со сведениями об адресе доставки.
9. От Payment Page к веб-сервису направляется сообщение со сведениями об адресе доставки.
10. От веб-сервиса к Payment Page направляется сообщение с подтверждением доступности доставки по этому адресу.
11. От Payment Page к сервису Google Pay направляется сообщение с подтверждением доступности доставки.
12. В сервисе Google Pay выполняется обработка запроса.
13. Пользователю отображается информация о доступных способах доставки.
14. Пользователь выбирает способ доставки.
15. В сервисе Google Pay выполняется обработка запроса.
16. От сервиса Google Pay к Payment Page направляется сообщение со сведениями о выбранном пользователем способе доставки.
17. От Payment Page к веб-сервису направляется сообщение со сведениями о выбранном пользователем способе доставки.
18. От веб-сервиса к Payment Page направляется сообщение с подтверждением доступности доставки выбранным способом.
19. От Payment Page к сервису Google Pay направляется сообщение с подтверждением доступности доставки.
20. В сервисе Google Pay выполняется обработка запроса.
21. Пользователю отображается информация об оплате с учётом выбранных им параметров доставки \(адреса и способа\).
22. Пользователь выполняет другие необходимые действия, если требуется, и подтверждает оплату.
23. В сервисе Google Pay выполняется обработка запроса.
24. От сервиса Google Pay к Payment Page направляется сообщение со сведениями об оплате с учётом выбранных пользователем параметров доставки.
25. От Payment Page к веб-сервису направляется сообщение со сведениями об оплате с учётом выбранных пользователем параметров доставки.
26. От веб-сервиса к Payment Page направляется сообщение с подтверждением оплаты, после чего выполняются действия, актуальные для этого метода.
27. От Payment Page к веб-сервису направляется сообщение с информацией о результате оплаты и адресом страницы для перенаправления пользователя.
## Подключение и настройка {#section_rys_fvw_vgc .section}
Чтобы начать работу со встроенными кнопками, следует:
1. Подключить в клиентской части CSS- и JavaScript-библиотеки от Ecommpay, расположенные по адресам `https://paymentpage.ecommpay.com/shared/merchant.css` и `https://paymentpage.ecommpay.com/shared/merchant.js` соответственно.
**Внимание:** Следует учитывать, что для корректной работы платёжной формы CSS- и JavaScript-библиотеки от Ecommpay должны подключаться через сеть доставки содержимого \(Content Delivery Network, CDN\); локальное хранение этих библиотек не допускается.
``` {#codeblock_evv_14l_wgc .language-xml}
```
2. Настроить политику обеспечения безопасности контента с помощью директив Content Security Policy, указав в HTTP-заголовке `Content-Security-Policy` адреса источников, необходимых для корректной работы платёжной формы \([подробнее](ru_pp_interaction_organisation.md#section_m5x_m2v_njc)\).
``` {#codeblock_ejr_n4k_mjc}
Content-Security-Policy:
script-src https://paymentpage.ecommpay.com https://applepay.cdn-apple.com;
style-src https://paymentpage.ecommpay.com;
img-src https://applepay.cdn-apple.com;
frame-src https://paymentpage.ecommpay.com https://applepay.cdn-apple.com
```
3. Добавить в клиентской части элемент, предназначенный для отображения в нём кнопок заданных методов.
``` {#codeblock_sc1_bpl_wgc .language-xml}
```
4. Обеспечить в серверной части сбор и подписывание параметров запросов на открытие Payment Page \(в том числе с применением [SDK для работы с подписью](ru_sdk_overview.md), если это актуально\), а также отправку подписанных данных в клиентскую часть веб-сервиса.
5. Обеспечить в клиентской части вызов платёжной формы с использованием JavaScript-библиотеки от Ecommpay и метода `EPayWidget.runEmbedded`.
6. Реализовать в клиентской части функции для обработки интерфейсных событий. Вместе с функциями, информация о которых представлена в этой статье, могут использоваться и другие \([подробнее](ru_pp_ui_monitoring.md#)\).
7. Для работы с платёжным методом Apple Pay — предварительно зарегистрировать рабочие домены веб-сервиса в сервисе Apple Pay.
## Использование {#section_nty_sml_wgc .section}
В целом для проведения платежа с использованием встроенных кнопок со стороны веб-сервиса необходимо следующее:
1. Сформировать запросы для отображения необходимых кнопок.
2. Вызвать платёжную форму в виде брендированных кнопок.
3. Подтвердить переход к оплате при переходе пользователем по конкретной кнопке.
4. Подтвердить возможность доставки товара или услуги с учётом выбора пользователя.
5. Подтвердить проведение оплаты на итоговых условиях.
Более детально эти действия можно представить следующим образом:
1. Сформировать необходимое число запросов на открытие платёжной формы в виде брендированных кнопок.
Это может быть один общий запрос для отображения двух кнопок в одном элементе iframe, два частных запроса для отображения каждой кнопки в отдельном элементе iframe или один частный запрос для отображения лишь одной из кнопок. При этом в каждом используемом запросе должен указываться JavaScript-объект `configObj` [с параметрами вызова](ru_pp_embedded_payment_buttons.md#) платёжной формы и [с подписью](ru_platform_signature.md#) к ним. Также при формировании таких запросов необходимо учитывать следующее:
- К базовому минимуму параметров, обязательному для проведения платежа, в этом случае относятся:
- `target_element` — идентификатор того элемента iframe, в котором необходимо открыть платёжную форму;
- `payment_id` — идентификатор платежа, уникальный в рамках проекта;
- `payment_amount` — сумма платежа в дробных единицах валюты;
- `payment_currency` — буквенный код валюты платежа в формате ISO-4217 alpha-3;
- `project_id` — идентификатор проекта, полученный от Ecommpay при интеграции;
- `merchant_domain` — доменное имя веб-сервиса, в котором необходимо открыть платёжную форму;
- `force_payment_group` для отображения кнопок обоих методов \(со значением `one_click_buttons`\) или `force_payment_method` для отображения кнопки только одного из методов \(со значением `apple_pay_core` для метода Apple Pay или `google_pay_host` для метода Google Pay\);
- `mode` — указатель режима работы Payment Page со значением `purchase`;
- `signature` — подпись запроса, составленная после указания всех целевых параметров.
- Для инициирования дополнительных действий на стороне сервисов Apple Pay и Google Pay дополнительно следует использовать параметр `payment_methods_options` и указывать в нём следующее:
- перечень запрашиваемых сведений о пользователе в составе массива `billing_contact_fields` — для сбора определённых сведений о пользователе, если сбор этих сведений не настроен для всех платежей в рамках используемого проекта \([подробнее](ru_PP_Gathering_customer_data.md)\);
- сведения о допустимых способах доставки товара или услуги пользователю в составе объекта `shipping` — для выбора пользователем одного из этих способов.
Информация о сведениях, которые можно указывать в параметре `payment_methods_options` при работе со встроенными кнопками, представлена [далее](ru_pp_embedded_payment_buttons.md#section_ltd_zgx_mhc).
``` {#codeblock_hgm_1yl_wgc .language-javascript}
{
"target_element":"widget-container-one-click-buttons",
"payment_id":"X03936",
"payment_amount":131960,
"payment_currency":"USD",
"project_id":22,
"merchant_domain":"cosmoshop.jupiter.example",
"force_payment_group":"one_click_buttons",
"mode":"purchase",
"signature":"YWb6Z20ByxpQ30hfTIjaCCsVIwVynXV"
}
```
``` {#codeblock_p4q_12m_dhc .language-json}
{
"express_checkout":{
"billing_contact_fields":[
"email",
"name",
"phone",
"billing_address",
"postal_code"
],
"shipping":{
"shipping_fields":[
"shipping_address",
"name",
"phone"
],
"allowed_country_codes":[
"GB",
"IE"
],
"shipping_methods":[
{
"label":"Speed of sound shipping",
"detail":"Express shipping (1 hour)",
"amount":199,
"identifier":"cosmo-shipping-009"
},
{
"label":"Warp drive shipping",
"detail":"Instant shipping",
"amount":2999,
"identifier":"cosmo-shipping-012"
}
]
},
"buttons":{
"max_column":1,
"height": 40,
"border_radius": 100
}
},
"google_pay_host":{
"shipping":{
"allowed_country_codes":[
"GB",
"IE"
]
},
"button":{
"color":"black",
"type":"checkout",
"border_type":"no_border"
}
},
"apple_pay_core":{
"button":{
"theme":"black",
"type":"buy"
}
}
}
```
2. Вызвать платёжную форму с помощью метода `EPayWidget.runEmbedded`.
При вызове платёжной формы необходимо указать JavaScript-объект `configObj` и определить целевые функции обратного вызова, такие как `onCheckSubmit` \(используемую для обработки информации о щелчке кнопки; подробнее далее\).
``` {#codeblock_s5r_xyl_wgc .language-javascript}
const checkoutButtonsWidget = EPayWidget.runEmbedded({
...configObj,
onCheckSubmit: async function (data, resolve, reject) {
if (!await merchantPage.validateCheckoutPage()) {
return reject() // Отклонение оплаты
}
if (!await merchantAPI.validateCartAmount(checkoutButtonsWidget.configObj.payment_amount, checkoutButtonsWidget.configObj.payment_currency)) {
return reject() // Отклонение оплаты
};
return resolve(); // Подтверждение оплаты, с возможностью указать объект additional_parameters в качестве аргумента
},
}, 'POST');
```
3. При подтверждении пользователем оплаты \(с переходом по встроенной кнопке\) — проверить сведения об оплате \(включая сумму и валюту платежа, а также другие значимые параметры\) и вызвать актуальную функцию: `resolve` для подтверждения оплаты или `reject` для её отклонения.
Вместе с подтверждением платежа на этом этапе можно передать различные дополнительные сведения, если они не были переданы при вызове платёжной формы или их актуально изменить. Таким образом могут быть переданы:
- сведения о пользователе и адреса для перенаправления — в объекте `additional_parameters`;
- идентификатор пользователя, информация о товарных позициях и дополнительная информация о платеже для её учёта на стороне веб-сервиса — в объекте `payment_update` \(вместе с идентификатором проекта, идентификатором, суммой и валютой платежа, а также [с подписью](ru_platform_signature.md#) к набору параметров в рамках этого объекта\).
В случае отклонения оплаты пользователю следует предоставлять информацию об ошибке со стороны веб-сервиса.
``` {#codeblock_ctr_ztl_wgc .language-json}
{
// Общие сведения о пользователе
customer_first_name:"Arthur",
customer_last_name:"McDonald",
customer_phone:"447700900123",
customer_email:"mcdonald@space.com"
// Сведения об адресе проживания пользователя
customer_country:"GB",
customer_city:"Belfast",
customer_address:"14A Cosmos Crescent, Flat 25",
customer_zip:"BT99 0ZZ",
// Сведения о расчётном адресе пользователя
billing_country:"GB",
billing_city:"Belfast",
billing_address:"14A Cosmos Crescent, Flat 25",
billing_postal:"BT99 0ZZ",
// Сведения об адресе пользователя, используемом для проверки Address Verification Service
avs_street_address:"14A Cosmos Crescent, Flat 25",
avs_post_code:"BT99 0ZZ",
// Сведения для возвращения пользователя к веб-сервису
redirect_success_url:"https://cosmoshop.jupiter.example/pages/success",
redirect_success_mode:"parent_page",
redirect_fail_url:"https://cosmoshop.jupiter.example/pages/failed",
redirect_fail_mode:"parent_page",
};
```
``` {#codeblock_znb_khr_1jc .language-json}
{
"project_id":22,
"payment_id":"X03936",
"payment_amount":131960,
"payment_currency":"USD",
"customer_id":"customer_112",
"receipt_data":"eyJwb3NpdGlvbnMiOiBbeyJxdWFudGl0eSI6IDMsICJhbW91bnQiOiAxMDAwMCwgInRheCI6IDE4LCAidGF4X2Ftb3VudCI6IDE4MDAsICJkZXNjcmlwdGlvbiI6ICJEZXNpZ24gZnJhbWUifV0sICJ0b3RhbF90YXhfYW1vdW50IjogMTgwMCwgImNvbW1vbl90YXgiOiAxOH0=",
"merchant_data":"{\"items\":[{\"sku\":\"GM12-CC\", \"description\":\"10 Copper Coins\",\"count\":1}, {\"sku\":\"GM12-GC\",\"description\":\"Golden Coin\", \"count\":2}],\"total_count\":3,\"user_id\":\"122\"",
"signature":"OoyvuCort6RIe8jofbUwZMWhkTaIIr7iIDFwry3bKc0iWGRMqPB1/8jVK4yJX+dv2AZDrNU7Ip4TMcqMG8AD8w=="
}
```
4. Если в запросе на открытие платёжной формы в составе объекта `shipping` были указаны сведения о допустимых способах доставки товара или услуги пользователю — обеспечить проверку и подтверждение \(либо отклонение\) возможности доставки.
Для этого следует использовать функции `onCheckShippingAddress` и `onCheckShippingMethod` библиотеки merchant.js, с помощью которых можно реагировать на указание пользователем адреса и способа доставки соответственно. При работе с этими функциями стоит учитывать, что последовательность указания адреса и способа может меняться с учётом особенностей используемого сервиса, а проверка возможности доставки может итеративно повторяться при изменении указываемой пользователем информации. Также рекомендуется выстраивать сообщения об ошибках, связанных с доставкой, таким образом, чтобы обеспечивать достаточный уровень информирования и удобства пользователей и предупреждать последующие ошибки с их стороны.
Чтобы обеспечить проверку возможности доставки, при каждом изменении пользователем параметров доставки следует:
- В отношении адреса доставки — проверять возможность доставки на адрес, указанный пользователем, и вызывать актуальную функцию:
- `onCheckShippingAddress.resolve` — для подтверждения возможности доставки, с обязательным указанием суммы платежа с учётом этой доставки и, если актуально, с обновлением сведений о параметрах доставки \(в массиве `shipping_methods`\);
- `onCheckShippingAddress.reject` — для отклонения возможности доставки, с обязательным указанием суммы платежа без учёта доставки и, если актуально, с указанием текстов сообщений, которые следует отобразить пользователю, включая общее сообщение об ошибке и частные пояснения по любым из параметров доставки.
``` {#codeblock_w41_dkk_dhc .language-json}
{
"region":"Belfast City",
"city":"Belfast",
"country_code":"GB",
"postal_code":"BT99 0ZZ"
}
```
``` {#codeblock_y5q_ttn_jhc .language-javascript}
errors = {
"fields": {
"country_code": "Supported shipping countries: GB, DE, IT",
"region": "This region is not supported",
"city": "Only Dublin is available",
"postal_code": "The range of postal address 10060 - 100150",
},
"message": "Cannot ship to the provided address"
}
```
- В отношении способа доставки — проверять возможность доставки тем способом, который указал пользователь, и вызывать актуальную функцию:
- `onCheckShippingMethod.resolve` — для подтверждения возможности доставки, с обязательным указанием суммы платежа с учётом этой доставки;
- `onCheckShippingMethod.reject` — для отклонения возможности доставки, с обязательным указанием суммы платежа без учёта доставки и, если актуально, с указанием текстов сообщений, которые следует отобразить пользователю.
``` {#codeblock_n4l_zlk_dhc .language-json}
{
"identifier":"cosmo-shipping-012"
}
```
``` {#codeblock_bv1_pwn_jhc .language-javascript}
errors = {
"message": "This shipping option cannot be selected for this address",
}
```
5. Если актуально подтверждение оплаты \(с учётом выбранного адреса и способа доставки или других сведений, указанных пользователем на стороне используемого сервиса\) — проверить корректность итоговых сведений, касающихся оплаты.
Для этого следует использовать функцию `onConfirmation` библиотеки merchant.js, с помощью которой можно получать такие сведения. После проверки их корректности следует вызвать актуальную функцию:
- `onConfirmation.resolve` — для подтверждения оплаты, с указанием итоговых сведений со стороны веб-сервиса. К таким сведениям относятся:
- идентификатор проекта, идентификатор, сумма и валюта платежа, а также другие актуальные сведения \(по мере необходимости, включая информацию о товарных позициях и дополнительную информацию о платеже для её учёта на стороне веб-сервиса\) и [подпись](ru_platform_signature.md#) к этому набору параметров — в объекте `payment_update`;
- сведения о пользователе и адреса для перенаправления \(при необходимости указания или обновления таких сведений\) — в объекте `additional_parameters`.
- `onConfirmation.reject` — для отклонения оплаты, с обязательным указанием суммы платежа и, если актуально, с указанием текста для сообщения об ошибке, которое следует отобразить пользователю.
``` {#codeblock_am1_wnk_dhc .language-json}
{
"customer":{
"email":"mcdonald@space.com",
"first_name":"Arthur",
"last_name":"McDonald",
"phone":"447700900123"
},
"billing_address":{
"address":"14A Cosmos Crescent, Flat 25",
"city":"Belfast",
"region":"Belfast City",
"country_code":"GB",
"postal_code":"BT99 0ZZ"
},
"shipping_address":{
"address":"Dock 7, Innovation Hangar",
"city":"Belfast",
"region":"Belfast City",
"country_code":"GB",
"postal_code":"BT99 1XY",
"first_name":"Arthur",
"last_name":"McDonald",
"phone":"447700900321"
}
}
```
``` {#codeblock_ugm_wnk_dhc .language-javascript}
{
"project_id":22,
"payment_id":"X03936",
"payment_amount":131960,
"payment_currency":"USD",
"customer_id":"customer_112",
"receipt_data":"eyJwb3NpdGlvbnMiOiBbeyJxdWFudGl0eSI6IDMsICJhbW91bnQiOiAxMDAwMCwgInRheCI6IDE4LCAidGF4X2Ftb3VudCI6IDE4MDAsICJkZXNjcmlwdGlvbiI6ICJEZXNpZ24gZnJhbWUifV0sICJ0b3RhbF90YXhfYW1vdW50IjogMTgwMCwgImNvbW1vbl90YXgiOiAxOH0=",
"merchant_data":"{\"items\":[{\"sku\":\"GM12-CC\", \"description\":\"10 Copper Coins\",\"count\":1}, {\"sku\":\"GM12-GC\",\"description\":\"Golden Coin\", \"count\":2}],\"total_count\":3,\"user_id\":\"122\"",
"signature":"OoyvuCort6RIe8jofbUwZMWhkTaIIr7iIDFwry3bKc0iWGRMqPB1/8jVK4yJX+dv2AZDrNU7Ip4TMcqMG8AD8w=="
}
```
``` {#codeblock_wfp_fc2_fhc .language-json}
{"billing_country": "GB", "customer_email": "mcdonald@space.com", "avs_post_code": "BR1 1AA", "redirect_success_url":"https://cosmoshop.jupiter.example/order?id=123"}
```
``` {#codeblock_c3g_tlg_nhc .language-javascript}
errors = {
"fields": {
"country_code": "Supported shipping countries: GB, DE, IT",
"region": "This region is not supported",
"city": "Only Dublin is available",
"postal_code": "The range of postal address 10060 - 100150",
},
"message": "Cannot ship to the provided address"
}
```
Дополнительно на стороне веб-сервиса мерчанта можно управлять отображением страницы ожидания, а также получать информацию об ошибках и о результатах проведения платежей с помощью функций для обработки интерфейсных событий:
- `onShowLoader` — для отображения страницы ожидания веб-сервиса;
- `onHideLoader` — для скрытия страницы ожидания веб-сервиса \(в случае необходимости отображать пользователю страницы платёжной формы Payment Page\);
- `onPaymentSubmitResult` — для получения информации об идентификаторе запроса на проведения платежа \(в случае необходимости отслеживать статус платежа\);
- `onError` — для получения информации об ошибках на стороне платежной формы.
Для контроля результатов проведения платежей можно использовать также [серверные оповещения](ru_platform_callbacks.md#).
В целом HTML-страница клиентской части веб-сервиса с возможностью проведения платежей с использованием кнопок может выглядеть следующим образом.
``` {#codeblock_fd1_mxx_1hc .language-javascript}
const expressButtons = EPayWidget.runEmbedded({
payment_amount: 131960,
payment_currency: "USD",
project_id: "22",
payment_id: "X03936",
force_payment_group: "one_click_buttons",
payment_methods_options: {"google_pay_host": {"billing_contact_fields": ["name", "email", "phone", "billing_address"]}},
target_element: "widget-container-one-click-buttons",
merchant_domain: cosmoshop.jupiter.example,
signature: "abcYWb6Z30hfTIjaCCsVIDEF123",
onShowLoader: merchantPage.showMerchantLoader,
onHideLoader: merchantPage.hideMerchantLoader,
onCheckSubmit: async function (data, resolve, reject) {
if (await merchantAPI.canStartPayment(merchantPage.cart)) {
return resolve();
}
return reject();
},
onCheckShippingAddress: async function (data, resolve, reject) {
const {addressIsAvailable, newPaymentAmount, newShippingMethods, errors} = await merchantAPI.validateShippingAddress(data);
if (addressIsAvailable) {
return resolve({payment_amount: newPaymentAmount, shipping_methods: newShippingMethods});
} else {
return reject({payment_amount: newPaymentAmount, errors});
}
},
onCheckShippingMethod: async function (data, resolve, reject) {
const {addressIsAvailable, newPaymentAmount} = await merchantAPI.saveShippingMethod(orderId, data.identifier);
if (addressIsAvailable) {
return resolve({payment_amount: newPaymentAmount});
} else {
return reject({payment_amount: newPaymentAmount});
}
},
onConfirmation: async function (data, resolve, reject) {
const { orderId, paymentUpdate, additionalParameters, errors } = await merchantAPI.placeOrder(merchantPage.cart, merchantPage.customerInfo);
if (orderId) {
return resolve({payment_update: paymentUpdate, additional_parameters: additionalParameters});
} else {
return reject({errors})
}
},
onPaymentSubmitResult: async function (data) {
await merchantAPI.saveTransactionId(data.request_id)
},
onError: async function ({ messages }) {
await merchantAPI.log("Payment error occurred " + messages)
if (messages.includes("invalid payment_id")) {
merchantPage.redirectToContactSupportPage();
}
},
});
```
**На уровень выше:**[Payment Page](ru_PP_about.md)
## Используемые параметры {#ru_pp_embedded_payment_buttons_parameters}
### Общие параметры {#section_hht_xgx_mhc .section}
Для открытия платёжной формы в виде кнопок может использоваться набор параметров, представленных в следующей таблице.
|Параметр|Описание|
|--------|--------|
|`avs_post_code`
string, optional
|Почтовый индекс пользователя, используемый для проверки [Address Verification Service](ru_PP_avs.md).
Пример: `BT99 0ZZ`
|
|`avs_street_address`
string, optional
|Адрес пользователя, используемый для проверки [Address Verification Service](ru_PP_avs.md).
Включает в себя номер дома и название улицы.
Пример: `14A Cosmos Crescent, Flat 25`
|
|`billing_address`
string, optional
|Номер дома \(с обозначением корпуса или строения, где это актуально\) и название улицы в расчётном адресе пользователя.
Для сбора сведений о расчётном адресе пользователя на стороне сервисов Apple Pay и Google Pay следует использовать параметр `payment_methods_options`.
Пример: `14A Cosmos Crescent, Flat 25`
|
|`billing_city`
string, optional
|Название города в расчётном адресе пользователя.
Для сбора сведений о расчётном адресе пользователя на стороне сервисов Apple Pay и Google Pay следует использовать параметр `payment_methods_options`.
Пример: `Belfast`
|
|`billing_country`
string, optional
|Код страны в расчётном адресе пользователя \(в формате ISO 3166-1 alpha-2\).
Для сбора сведений о расчётном адресе пользователя на стороне сервисов Apple Pay и Google Pay следует использовать параметр `payment_methods_options`.
Пример: `GB`
|
|`billing_postal`
string, optional
|Почтовый индекс в расчётном адресе пользователя.
Для сбора сведений о расчётном адресе пользователя на стороне сервисов Apple Pay и Google Pay следует использовать параметр `payment_methods_options`.
Пример: `BT99 0ZZ`
|
|`billing_region`
string, optional
|Название региона \(штата, провинции или иной территориальной области\) в расчётном адресе пользователя.
Для сбора сведений о расчётном адресе пользователя на стороне сервисов Apple Pay и Google Pay следует использовать параметр `payment_methods_options`.
Пример: `Belfast City`
|
|`billing_region_code`
string, optional
|Внутренний код региона \(штата, провинции или иной территориальной области\) в расчётном адресе пользователя.
Представляет собой вторую часть международного кода территории \(в формате ISO 3166-2\), без двухбуквенного кода страны и разделительного дефиса, и является применимым в тех случаях, когда передаётся в одном запросе с кодом страны в значении параметра `billing_country`.
Для сбора сведений о расчётном адресе пользователя на стороне сервисов Apple Pay и Google Pay следует использовать параметр `payment_methods_options`.
Пример: `BFS`
|
|`customer_address`
string, optional
|Название улицы и номер дома \(с обозначением корпуса или строения, где это актуально\) в адресе проживания пользователя, с использованием разделительной запятой.
Представляет собой строку длиной не более 255 символов.
Пример: `14A Cosmos Crescent, Flat 25`
|
|`customer_birthplace`
string, optional
|Название места рождения пользователя \(города или иного населённого пункта\).
Представляет собой строку длиной не более 255 символов.
Пример: `York`
|
|`customer_city`
string, optional
|Название города \(или иного населённого пункта\) в адресе проживания пользователя.
Представляет собой строку длиной не более 255 символов.
Пример: `Belfast`
|
|`customer_country`
string, optional
|Код страны в адресе проживания пользователя.
Указывается в формате ISO 3166-1 alpha-2.
Пример: `GB`
|
|`customer_day_of_birth`
string, optional
|Дата рождения пользователя.
Представляет собой строку в формате `ДД-ММ-ГГГГ`.
Пример: `12-03-1986`
|
|`customer_email`
string, optional
|Адрес электронной почты пользователя.
Представляет собой строку длиной не более 255 символов, состоящую из локального адреса и доменного имени, разделённых символом «@».
Для сбора сведений об электронной почте пользователя на стороне сервисов Apple Pay и Google Pay следует использовать параметр `payment_methods_options`.
Пример: `mcdonald@space.com`
|
|`customer_first_name`
string, optional
|Имя пользователя.
Представляет собой строку длиной не более 255 символов.
Для сбора сведений об имени пользователя на стороне сервисов Apple Pay и Google Pay следует использовать параметр `payment_methods_options`.
Пример: `Arthur`
|
|`customer_id`
string, optional
|Идентификатор пользователя в рамках проекта \(указанного в значении параметра `project_id`\).
Должен быть однозначно сопоставим с учётной записью пользователя в веб-сервисе, в том числе для корректной работы с рисками и борьбы с мошенническими операциями.
Пример: `customer_112`
|
|`customer_last_name`
string, optional
|Фамилия пользователя.
Представляет собой строку длиной не более 255 символов.
Для сбора сведений о фамилии пользователя на стороне сервисов Apple Pay и Google Pay следует использовать параметр `payment_methods_options`.
Пример: `McDonald`
|
|`customer_middle_name`
string, optional
|Отчество \(или второе или среднее имя\) пользователя.
Представляет собой строку длиной не более 255 символов.
Пример: `Rhys`
|
|`customer_phone`
string, optional
|Номер телефона пользователя.
В общем случае должен быть полным, с кодом страны, хотя в отдельных случаях допустимо указание и без кода страны. Должен содержать не менее 4 и не более 24 цифр.
Для сбора сведений о телефоне пользователя на стороне сервисов Apple Pay и Google Pay следует использовать параметр `payment_methods_options`.
Пример: `447700900123`
|
|`customer_state`
string, optional
|Название региона \(штата, провинции или иной территориальной области\) в адресе проживания пользователя.
Представляет собой строку длиной не более 255 символов.
Пример: `Belfast City`
|
|`customer_street`
string, optional
|Название улицы в адресе проживания пользователя.
Представляет собой строку длиной не более 255 символов.
Пример: `Cosmos Crescent`
|
|`customer_zip`
string, optional
|Почтовый индекс в адресе проживания пользователя.
Представляет собой строку длиной не более 10 символов.
Пример: `BT99 0ZZ`
|
|`force_payment_method`
string, required\*
|В рамках проведения платежей с использованием встроенных кнопок может принимать одно из следующих значений:
- `apple_pay_core` — для отображения кнопки метода Apple Pay,
- `google_pay_host` — для отображения кнопки метода Google Pay.
При каждом вызове платёжной формы должен указываться один из параметров, `force_payment_method` или `force_payment_group`, но не оба этих параметра.
Пример: `google_pay_host`
|
|`force_payment_group`
string, required\*
|В рамках проведения платежей с использованием кнопок может принимать значение `one_click_buttons`. В этом случае отображаются кнопки обоих методов, Apple Pay и Google Pay.
При каждом вызове платёжной формы должен указываться один из параметров, `force_payment_method` или `force_payment_group`, но не оба этих параметра.
Пример: `one_click_buttons`
|
|`merchant_data`
string, optional
|Дополнительная информация для учёта на стороне веб-сервиса.
Состав сведений, передаваемых в значении этого параметра, может быть произвольным, но должен предварительно согласовываться и настраиваться для корректной обработки в платформе и представления в оповещениях и карточках платежей \([подробнее](ru_pp_additional_data.md#)\). В согласованных случаях может представлять собой JSON-объект, при передаче которого методом POST требуется экранировать символ `"` \(двойной штрих, U+0022\) путём постановки перед ним символа `\` \(косой обратной черты, U+005C\).
``` {#codeblock_hnr_wvd_wdc .language-json}
"merchant_data": "{\"items\":[{\"sku\":\"GM12-CC\",
\"description\":\"10 Copper Coins\",\"count\":1},
{\"sku\":\"GM12-GC\",\"description\":\"Golden Coin\",
\"count\":2}],\"total_count\":3,\"user_id\":\"122\"}"
```
|
|`merchant_domain`
string, required
|Доменное имя веб-сервиса, в котором необходимо открыть платёжную форму.
Пример: `cosmoshop.jupiter.example`
|
|`mode`
string, required
|Указатель режима работы Payment Page.
В рамках проведения платежей с использованием кнопок должен принимать значение `purchase`.
Пример: `purchase`
|
|`payment_amount`
integer, required
|Сумма платежа.
Приводится в дробных единицах валюты без десятичного разделителя.
Пример: `131960` \(для суммы 1319,60 при использовании валюты с двумя дробными разрядами\)
|
|`payment_currency`
string, required
|Трёхбуквенный код валюты платежа.
Указывается в формате ISO-4217 alpha-3, согласно [справочнику](ru_currency_codes.md).
Пример: `USD`
|
|`payment_id`
string, required
|Идентификатор платежа.
Должен задаваться на стороне веб-сервиса и представлять собой строку длиной не более 255 символов с обеспечением регистронезависимости и уникальности в рамках используемого проекта.
Пример: `X03936`
|
|`payment_methods_options`
string, optional
|Дополнительные сведения, актуальные при работе с отдельными платёжными методами и сторонними сервисами. Могут содержать параметры, описанные [далее](ru_pp_embedded_payment_buttons.md#section_ltd_zgx_mhc)
|
|`project_id`
integer, required
|Идентификатор проекта взаимодействия веб-сервиса с платёжной платформой, полученный от Ecommpay при интеграции \([подробнее](ru_glossary.md#)\).
Пример: `22`
|
|`receipt_data`
string, optional
|Информация о товарных позициях оплачиваемого заказа.
Может использоваться для отправки пользователю \([подробнее](ru_PP_receipt_data.md)\). Представляют собой строку, полученную в результате кодирования исходного JSON-объекта с применением алгоритма Base64. Этот объект может включать в себя различные сведения из числа допустимых.
- `positions`, array — массив, в котором можно перечислить до 300 товарных позиций; для каждой товарной позиции указывается следующее:
- `amount`, integer — стоимость товара
- `quantity`, integer — количество товарных единиц
- `tax`, integer — ставка налога на добавленную стоимость \(НДС\), если она отличается для разных товарных позиций
- `tax_amount`, integer — сумма налога на добавленную стоимость \(НДС\)
- `description`, string — произвольное описание товара
- `total_tax_amount`, integer — общая сумма НДС за всю покупку
- `common_tax`, integer — ставка налога на добавленную стоимость \(НДС\), если она одинаковая для всех товарных позиций
``` {#codeblock_jg4_sj2_wdc .language-json}
{
"receipt_data":{
"positions":[
{
"quantity":3,
"amount":10000,
"tax":18,
"tax_amount":1800,
"description":"Рамка с дизайном"
}
],
"total_tax_amount":1800,
"common_tax":18
}
}
```
``` {#codeblock_trx_sj2_wdc}
receipt_data: "eyAgCiAgICAgICJwb3NpdGlvbnMiOlsgIAogICAgICAgICB7ICAKICAgICAgICAg
ICAgInF1YW50aXR5IjozLAogICAgICAgICAgICAiYW1vdW50IjoxMDAwMCwKICAgICAgICAgICAgInRheCI6MTgsCiAg
ICAgICAgICAgICJ0YXhfYW1vdW50IjoxODAwLAogICAgICAgICAgICAiZGVzY3JpcHRpb24iOiLQoNCw0LzQutCwING
BINC00LjQt9Cw0LnQvdC+0LwiCiAgICAgICAgIH0KICAgICAgXSwKICAgICAgInRvdGFsX3RheF9hbW91bnQiOjE4MDAs
CiAgICAgICJjb21tb25fdGF4IjoxOCAgICAgICAKfQ"
```
|
|`redirect_fail_url`
string, optional
|Адрес для автоматического итогового возвращения пользователя к веб-сервису при отклонении оплаты.
Пример: `https://cosmoshop.jupiter.example/pages/failed`
|
|`redirect_success_url`
string, optional
|Адрес для автоматического итогового возвращения пользователя к веб-сервису при проведении оплаты.
Пример: `https://cosmoshop.jupiter.example/pages/success`
|
|`signature`
string, required
|Цифровая подпись к параметрам запроса.
Должна составляться после указания всех целевых параметров в соответствии с заданным алгоритмом \([подробнее](ru_platform_signature.md#)\).
|
|`target_element`
string, required
|Идентификатор элемента iframe \(в рамках HTML-страницы веб-сервиса\), в котором необходимо открыть платёжную форму.
Пример: `widget-container-one-click-buttons`
|
### Специальные параметры для работы с методами Apple Pay и Google Pay {#section_ltd_zgx_mhc .section}
При работе со встроенными кнопками в параметре `payment_methods_options` допустимо указывать дополнительные сведения, актуальные для работы с тем или иным методом, представленные в следующей таблице.
|Параметр|Описание| |
|--------|--------|--|
|`express_checkout`
object, optional
|Дополнительные сведения, актуальные при работе со всеми методами|29-3|
|`buttons`
object, optional
|Параметры отображения брендированных кнопок.
Пример: `"buttons":{"max_column":1, "height": 40, "radius": 100 }`
|29-3-129-3|
|`height`
integer, optional
|Высота кнопки, в пикселях.
Применяется в отношении каждой используемой кнопки. Может принимать значения от 40 до 55 пикселей. Значение по умолчанию — 44 пикселя.
Пример: `40`
|29-3-1-129-3-1|
|`border_radius`
integer, optional
|Радиус скругления углов кнопки, в пикселях.
Применяется в отношении каждой используемой кнопки. Может принимать значения от 0 до 100 пикселей. Значение по умолчанию — 4 пикселя.
Пример: `100`
|29-3-1-229-3-1|
|`max_columns`
integer, optional
|Указатель варианта компоновки кнопок в используемом элементе iframe.
Применяется в ситуациях, когда ширина элемента, в который встроены кнопки, превышает 1047 пикселей. В остальных случаях значение этого параметра игнорируется и в одном ряду отображается строго одна кнопка.
Может принимать одно из следующих значений:
- `0` — отображение максимально возможного количества кнопок в одном ряду \(*гибкая компоновка*; используется по умолчанию\);
- `1` — отображение строго по одной кнопке в одном ряду \(*компоновка строго в один столбец*\);
- `2` — отображение по возможности по две кнопки в одном ряду \(*компоновка по возможности в два столбца*\).
Пример: `1`
|29-3-1-329-3-1|
|`shipping`
object, optional
|Сведения о доставке товара или услуги пользователю|29-3-229-3|
|`shipping_fields`
array, optional
|Сведения об адресе доставки, которые необходимо собрать на стороне сервиса Apple Pay или Google Pay.
Представляют собой массив с перечнем запрашиваемых сведений, в числе которых могут быть:
- `phone` — номер телефона получателя доставки,
- `name` — имя и фамилия получателя доставки,
- `shipping_address` — адрес доставки.
Пример: `"shipping_fields":["shipping_address"]`
|29-3-2-129-3-2|
|`shipping_methods`
array, optional
|Сведения о доступных способах доставки. Способ доставки, указанный первым, отображается в сервисе Apple Pay или Google Pay выбранным по умолчанию|29-3-2-329-3-2|
|`label`
string, required\*
|Название способа доставки, которое следует отображать пользователю.
Должно указываться при передаче массива `shipping_methods`.
Пример: `Warp drive shipping`
|29-3-2-3-129-3-2-3|
|`detail`
string, required\*
|Описание способа доставки, которое следует отображать пользователю.
Должно указываться при передаче массива `shipping_methods`.
Пример: `Instant shipping`
|29-3-2-3-229-3-2-3|
|`amount`
integer, required\*
|Стоимость доставки.
Приводится в дробных единицах валюты платежа, указанной в параметре `payment_currency`, без десятичного разделителя.
Должна указываться при передаче массива `shipping_methods`.
Пример: `2999` \(для суммы 29,99 при использовании валюты с двумя дробными разрядами\)
|29-3-2-3-329-3-2-3|
|`identifier`
string, required\*
|Служебный идентификатор способа доставки, заданный на стороне веб-сервиса.
Должен указываться при передаче массива `shipping_methods`.
Пример: `cosmo-shipping-012`
|29-3-2-3-429-3-2-3|
|`billing_contact_fields`
array, optional
|Сведения о расчётном адресе пользователя, которые необходимо собрать на стороне сервиса Apple Pay или Google Pay.
Представляют собой массив с перечнем запрашиваемых сведений, в числе которых могут быть:
- `email` — адрес электронной почты пользователя,
- `name` — имя и фамилия пользователя,
- `phone` — номер телефона пользователя,
- `postal_code` — почтовый индекс в адресе пользователя,
- `billing_address` — расчётный адрес пользователя.
Пример: `"billing_contact_fields":["email","phone"]`
|29-3-329-3|
|`google_pay_host`
object, optional
|Дополнительные сведения, актуальные при работе с платёжным методом Google Pay|29-2|
|`shipping`
object, optional
|Сведения о доставке товара или услуги пользователю|29-2-129-2|
|`allowed_country_codes`
array, optional
|Сведения о странах, для которых доступна доставка. Если эти сведения не указаны, доступными считаются все страны.
Представляют собой массив с перечнем кодов стран в формате ISO 3166-1 alpha-2.
Пример: `"allowed_country_codes":["GB","IE"]`
|29-2-1-129-2-1|
|`button`
object, optional
|Параметры оформления кнопки.
Пример: `"button":{"theme":"black","type":"checkout","border_type": "no_border" }`
|29-2-329-2|
|`border_type`
string, optional
|Указатель необходимости обрисовки контура кнопки \([подробнее](https://developers.google.com/pay/api/web/guides/brand-guidelines#custom-button)\).
Может принимать следующие значения:
- `default_border` — с обрисовкой контура,
- `no_border` — без обрисовки контура.
Значение по умолчанию — `default_border`.
Пример: `no_border`
|29-2-3-129-2-3|
|`color`
string, optional
|Указатель варианта цветового оформления кнопки \([подробнее](https://developers.google.com/pay/api/web/guides/brand-guidelines#custom-button)\).
Может принимать одно из следующих значений:
- `black` — для тёмного варианта оформления,
- `white` — для светлого варианта оформления.
По умолчанию применяется тёмный вариант оформления.
Пример: `black`
|29-2-3-229-2-3|
|`type`
string, optional
|Указатель варианта текстового наполнения кнопки в соответствии с документацией Google Pay \([подробнее](https://developers.google.com/pay/api/web/guides/brand-guidelines#style)\).
Так, при указании варианта `donate` должна использоваться кнопка с названием **Donate with **, рекомендуемая для внесения взносов и пожертвований.
Пример: `checkout`
|29-2-3-329-2-3|
|`apple_pay_core`
object, optional
|Дополнительные сведения, актуальные при работе с платёжным методом Apple Pay|29-1|
|`button`
object, optional
|Параметры оформления кнопки.
Пример: `"button":{"theme":"black","type":"buy" }`
|29-1-329-1|
|`theme`
string, optional
|Указатель варианта цветового оформления кнопки \([подробнее](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Button-styles)\).
Может принимать одно из следующих значений:
- `black` — для тёмного варианта оформления без обрисовки контура кнопки,
- `white` — для светлого варианта оформления без обрисовки контура,
- `white-outline` — для светлого варианта оформления с обрисовкой контура.
По умолчанию применяется тёмный вариант оформления.
Пример: `black`
|29-1-3-129-1-3|
|`type`
string, optional
|Указатель варианта текстового наполнения кнопки в соответствии с документацией Apple Pay \([подробнее](https://developer.apple.com/documentation/applepayontheweb/applepaybuttontype)\).
Так, при указании варианта `contribute` должна использоваться кнопка с названием с **Contribute with **, рекомендуемая для внесения взносов и пожертвований.
Пример: `buy`
|29-1-3-229-1-3|