Встраивание кнопок для платежей с использованием методов Apple Pay и Google Pay

Общая информация

В некоторых случаях может быть актуальным использовать непосредственно в веб-сервисе брендированные кнопки, позволяющие оплачивать заказы широко известными платёжными методами, такими как Apple Pay и Google Pay. При работе с платёжной платформой ecommpay для этого можно применять специализированную редакцию платёжной формы Payment Page, встраиваемую в веб-сервис в виде соответствующих кнопок и позволяющую проводить платежи со сбором всех необходимых сведений, в том числе о доставке, на стороне сервисов платёжных методов.

При использовании этой редакции платёжной формы в интерфейсе веб-сервиса пользователю отображаются кнопки заданных методов, а при переходе по любой из этих кнопок выполняется перенаправление к соответствующему платёжному сервису, без использования интерфейса Payment Page. Вместе с тем, если для проведения платежа необходимо предоставить дополнительные сведения, пользователю может отображаться модальное окно с соответствующими страницами Payment Page. Чтобы избегать таких ситуаций, рекомендуется обеспечивать передачу необходимых сведений в запросах на открытие Payment Page, а также сбор таких сведений на стороне сервисов Apple Pay или Google Pay.

Эта редакция платёжной формы позволяет работать с методами Apple Pay и Google Pay и может сочетаться с основной редакцией Payment Page, в том числе для поддержки платежей с использованием токенов платёжных карт (подробнее), для перехода к другим методам через их предварительный выбор в веб-сервисе (подробнее) и для вызова платёжной формы с полным набором доступных методов. При этом оформление кнопок можно настраивать с помощью параметров вызова платёжной формы (подробнее далеe). Использование встроенного в интерфейс Dashboard конструктора оформления для этих кнопок не поддерживается, но может быть полезным для настройки оформления тех страниц платёжной формы, которые могут отображаться пользователям в случае необходимости предоставить дополнительные сведения.

Особенности

При использовании специализированных кнопок 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 могут встраиваться на любую страницу веб-сервиса (например, на страницу с описанием товара или в раздел каталога товаров), практически в любой из структурных элементов (включая меню и различные панели и блоки), что обеспечивает высокую гибкость и позволяет реализовывать разнообразные способы перехода пользователей к оплатам.

Пользовательский сценарий

Со стороны пользователя проведение оплаты с использованием встроенных кнопок может выглядеть следующим образом.

1. Пользователь переходит в интерфейсе веб-сервиса на страницу, где ему отображаются кнопки заданных методов, и инициирует оплату с помощью одного из них.
2. Пользователь перенаправляется к сервису выбранного метода.
3. В сервисе выбранного метода пользователь выбирает адрес и способ доставки, если это актуально, и выполняет другие необходимые действия.
4. Пользователю отображается информация о результате оплаты (с учётом того, как это настроено на стороне веб-сервиса).

Варианты оформления

Со стороны мерчанта можно настраивать различные параметры оформления брендированных кнопок, включая варианты их компоновки, наполнения (в части названий и логотипов) и цветового оформления, а также высоту и радиус скругления. Для этого предусмотрены соответствующие параметры вызова платёжной формы (подробнее далеe).

При работе с параметрами оформления брендированных кнопок стоит учитывать следующее:

• Необходимо соблюдать требования и рекомендации компаний Apple (подробнее) и Google (подробнее).
• Вариант компоновки и размеры задаются как общие параметры и действуют идентично для всех применяемых кнопок, в то время как остальные параметры можно применять для каждого метода (и соответствующей кнопки) индивидуально.
• При выборе варианта компоновки кнопок он применяется только в ситуациях, когда ширина элемента, в который встроены кнопки, превышает 1047 пикселей. В остальных случаях кнопки располагаются строго друг под другом.
• Для статичного управления размерами доступна только высота кнопок, но не их ширина. Ширина устанавливается автоматически и меняется динамически, исходя из ширины элемента, в который встраиваются кнопки, и количества кнопок в одном ряду. Минимально допустимая ширина каждой кнопки составляет 160 пикселей, а максимально допустимая — ширине элемента, в который встраиваются кнопки. Высота кнопок по умолчанию составляет 44 пикселя.

Схема работы

При проведении оплаты с использованием встроенных кнопок взаимодействие между веб-сервисом и платёжной формой строится с применением специализированных библиотек ecommpay и осуществляется следующим образом.

Взаимодействие при указании сведений о доставке на стороне сервиса выбранного метода (Apple Pay или Google Pay) может осуществляться следующим образом.

Подключение и настройка

Чтобы начать работу со встроенными кнопками, следует:

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); локальное хранение этих библиотек не допускается.

   <link rel="stylesheet" href="https://paymentpage.ecommpay.com/shared/merchant.css" />
   <script type="text/javascript" src="https://paymentpage.ecommpay.com/shared/merchant.js"></script>

2. Добавить в клиентской части элемент, предназначенный для отображения в нём кнопок заданных методов.

   <!-- Отображение двух кнопок в разных элементах iframe -->
   <div class="row">
     <div id="widget-container-google-pay"></div>
     <div id="widget-container-apple-pay"></div>
   </div>
   
   <!-- Отображение двух кнопок в одном элементе iframe -->
   <div id="widget-container-one-click-buttons"></div>

3. Обеспечить в серверной части сбор и подписывание параметров запросов на открытие Payment Page (в том числе с применением SDK для работы с подписью, если это актуально), а также отправку подписанных данных в клиентскую часть веб-сервиса.
4. Обеспечить в клиентской части вызов платёжной формы с использованием JavaScript-библиотеки от ecommpay и метода EPayWidget.runEmbedded.
5. Реализовать в клиентской части функции для обработки интерфейсных событий. Вместе с функциями, информация о которых представлена в этой статье, могут использоваться и другие (подробнее).
6. Для работы с платёжным методом Apple Pay — предварительно зарегистрировать рабочие домены веб-сервиса в сервисе Apple Pay.

Использование

В целом для проведения платежа с использованием встроенных кнопок со стороны веб-сервиса необходимо следующее:

1. Сформировать запросы для отображения необходимых кнопок.
2. Вызвать платёжную форму в виде брендированных кнопок.
3. Подтвердить переход к оплате при переходе пользователем по конкретной кнопке.
4. Подтвердить возможность доставки товара или услуги с учётом выбора пользователя.
5. Подтвердить проведение оплаты на итоговых условиях.

Более детально эти действия можно представить следующим образом:

1. Сформировать необходимое число запросов на открытие платёжной формы в виде брендированных кнопок.

   Это может быть один общий запрос для отображения двух кнопок в одном элементе iframe, два частных запроса для отображения каждой кнопки в отдельном элементе iframe или один частный запрос для отображения лишь одной из кнопок. При этом в каждом используемом запросе должен указываться JavaScript-объект configObj с параметрами вызова платёжной формы и с подписью к ним. Также при формировании таких запросов необходимо учитывать следующее:

   • К базовому минимуму параметров, обязательному для проведения платежа, в этом случае относятся:
     • 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 — для сбора определённых сведений о пользователе, если сбор этих сведений не настроен для всех платежей в рамках используемого проекта (подробнее);
     • сведения о допустимых способах доставки товара или услуги пользователю в составе объекта shipping — для выбора пользователем одного из этих способов.

     Информация о сведениях, которые можно указывать в параметре payment_methods_options при работе со встроенными кнопками, представлена далее.

   {
     "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"
   }

   {
     "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 (используемую для обработки информации о щелчке кнопки; подробнее далее).

   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 (вместе с идентификатором проекта, идентификатором, суммой и валютой платежа, а также с подписью к набору параметров в рамках этого объекта).

   В случае отклонения оплаты пользователю следует предоставлять информацию об ошибке со стороны веб-сервиса.

   {
   // Общие сведения о пользователе
       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",
   };

   {
      "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 — для отклонения возможности доставки, с обязательным указанием суммы платежа без учёта доставки и, если актуально, с указанием текстов сообщений, которые следует отобразить пользователю, включая общее сообщение об ошибке и частные пояснения по любым из параметров доставки.

     {
       "region":"Belfast City",
       "city":"Belfast",
       "country_code":"GB",
       "postal_code":"BT99 0ZZ"
     }

     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 — для отклонения возможности доставки, с обязательным указанием суммы платежа без учёта доставки и, если актуально, с указанием текстов сообщений, которые следует отобразить пользователю.

     {
       "identifier":"cosmo-shipping-012"
     }

     errors = {
         "message": "This shipping option cannot be selected for this address",
     }

5. Если актуально подтверждение оплаты (с учётом выбранного адреса и способа доставки или других сведений, указанных пользователем на стороне используемого сервиса) — проверить корректность итоговых сведений, касающихся оплаты.

   Для этого следует использовать функцию onConfirmation библиотеки merchant.js, с помощью которой можно получать такие сведения. После проверки их корректности следует вызвать актуальную функцию:

   • onConfirmation.resolve — для подтверждения оплаты, с указанием итоговых сведений со стороны веб-сервиса. К таким сведениям относятся:
     • идентификатор проекта, идентификатор, сумма и валюта платежа, а также другие актуальные сведения (по мере необходимости, включая информацию о товарных позициях и дополнительную информацию о платеже для её учёта на стороне веб-сервиса) и подпись к этому набору параметров — в объекте payment_update;
     • сведения о пользователе и адреса для перенаправления (при необходимости указания или обновления таких сведений) — в объекте additional_parameters.
   • onConfirmation.reject — для отклонения оплаты, с обязательным указанием суммы платежа и, если актуально, с указанием текста для сообщения об ошибке, которое следует отобразить пользователю.

   {
     "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"
     }
   }

   {
      "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=="
   }

   {"billing_country": "GB", "customer_email": "mcdonald@space.com", "avs_post_code": "BR1 1AA", "redirect_success_url":"https://cosmoshop.jupiter.example/order?id=123"}
   

   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 — для получения информации об ошибках на стороне платежной формы.

Для контроля результатов проведения платежей можно использовать также серверные оповещения.

В целом HTML-страница клиентской части веб-сервиса с возможностью проведения платежей с использованием кнопок может выглядеть следующим образом.

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();
        }
    },
});