API запроса на оплату (EdgeHTML)

Примечание

В этой статье описан рабочий процесс, поддерживаемый в устаревшей версии Microsoft Edge. Microsoft Edge \ (Chromium ) поддерживает API запроса на оплату с другой реализацией на основе проекта Chromium.

Продажи электронных торговли продолжают увеличиваться на быстром темпе. Согласно eMarketer, в 2018 цифровые продажи обносятся с учетом того, что увеличиваются до 23% на основе уровней, измеренных в 2013. Несмотря на то, что потребительские и коммерческие компании будут пользоваться преимуществами продаж из электронных торговли, проблемы остаются. Сегодня каждый из владельцев веб-сайтов электронной коммерции должен вкладывать время в разработку бесплатных потоков и правил проверки. Потребители должны перемещаться по разным заказам на извлечение и повторно вводить одинаковые сведения о платежах и отправке на каждом сайте, где они будут покупаться. Это может занять много времени и неприятностей для потребителей, что приводит к высокой доле отказов в корзине покупок и снижению продаж для торговых продавцов. Оценка продавцов в масштабах от 60% до 70% покупательской корзины отброшена.

API запроса на оплату – это функция, которая стандартизует процесс извлечения платежа. Этот API требует меньше настроек для веб-разработчиков и обеспечивает более быструю, более согласованную и, таким образом, более понятную и удобную работу для потребителей. Поскольку потребители могут выбирать платежные средства и адреса доставки из своей учетной записи Майкрософт, они обязаны вводить меньше данных для заполнения покупок, что сокращает время и ввод данных, необходимых для выполнения оплаты.

API запроса на оплату — это открытый стандартный стандарт, который позволяет браузерам выступать в качестве посредника между продавцами, получателями и методами оплаты (например, кредитными картами), которые пользователи хранили в облаке.

Если вы используете API запроса на оплату, пользователи в обычном режиме изменяют веб-сайты продавцов. Когда вы будете готовы к оплате, на веб-сайте получателя платежа вызывается API запроса на оплату , чтобы создать запрос на оплату и передать в браузер необходимые сведения о платежах (например, Поддерживаемые методы оплаты, сумма покупки, валюта и т. д.).

Конструктор запросов на оплату

Браузер выполняет проверку подлинности пользователя, позволяет пользователю выбирать поддерживаемый метод оплаты для файла и обрабатывает платежные данные. Затем браузер отправляет сведения о платеже на веб-сайт продавца, чтобы он мог завершить платежи. Помимо получения платежных данных, продавец также может выбрать получение сведений о доставке в рамках запроса на оплату.

Создание отклика на платеж

Чтобы ознакомиться с ИНТЕРФЕЙСом запроса на оплату в действии, а также получить общие сведения о том, как его использовать, ознакомьтесь с этим видеороликом.

Примечание

API запроса на оплату поддерживается в Microsoft Edge Build 14992 +.

Создание запроса на оплату

Веб-страницы создают запрос на оплату , как правило, когда пользователь инициирует процесс оплаты нажатием кнопки "Купить". Конструктор запросов на оплату constructor включает methodData, Details и Options.

var payment = new PaymentRequest ( 
    methodData,  // required payment method data including payment method identifiers 
    details,     // required transaction information 
    options      // optional information like shipping or contact info to be returned 
); 

Этот methodData параметр включает список методов оплаты и относящихся к ним сетей, принятых на веб-сайте, а также связанных с ними данных. В Microsoft Edge этот список соответствует поддерживаемым методам оплаты, которые покупатель сохранил в своей учетной записи Майкрософт, и приводит к появлении списка "платить за" в пользовательском интерфейсе оплаты.

Список "платить за" в пользовательском интерфейсе Microsoft "Бумажник"

var supportedInstruments = [{
    supportedMethods: ['basic-card'],
    data: {
        supportedNetworks: ['visa', 'mastercard', 'amex'],
        supportedTypes: ['credit'] 
    }         
}]; 

detailsПараметр, содержащий сведения о том, что продавец хочет передать клиенту о транзакции. Сюда входят элементы сводки заказов, такие как итоговый, налоговый, сумма отгрузки и другие элементы сводного уровня, влияющие на сумму платежа. Они не предназначены для размещения элементов строки заказа.

Этот details параметр также используется для определения вариантов доставки, доступных клиенту при необходимости. Дополнительные сведения содержатся в разделе " Заявка на оплату " с разделом "Доставка".

Каждая detail строка содержит метку валюты и сумму.

Примечание

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

Промежуточные итоги, отгрузка, налоги и общие сведения

var details = {
    total: {
        label: 'Total (USD)',
        amount: {currency: 'USD', value: '193.98'}
    },
    displayItems: [{
        label: 'Subtotal',
        amount: {currency: 'USD', value: '174.99'}
    }, {
        label: 'Taxes',
        amount: {currency: "USD", value: '18.99'}
    }],
};  

PaymentRequestне поддерживает возврат денег, поэтому суммы всегда должны быть положительными; отдельные элементы списка могут быть отрицательными (например, скидками).

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

Этот options параметр определяет данные, которые веб-страница возвращает из запроса на платеж. Кроме того, определяются данные, которые необходимо собирать, в том числе если требуется доставка, адрес электронной почты и/или номер телефона.

Раскрывающийся список "адрес электронной почты"

var options =
    {
        requestPayerEmail: true
    }; 

Отображение запроса на оплату

show()Метод вызывается веб-страницей, чтобы разрешить пользователю взаимодействовать с пользовательским интерфейсом запроса на оплату . show()Метод возвращает обещание, которое будет разрешено, когда пользователь авторизует запрос на платеж.

paymentRequest.show().then(paymentInstrumentResponse => {

paymentInstrumentResponse.complete('success').then().catch(error => {
    handlePaymentRequestError(error); 
});

Подтверждение и оплата данных

Прерывание запроса на оплату

Этот abort() метод может быть вызван веб-страницей в любое время после show() вызова метода, до тех пор, пока обещание не будет разрешено. abort()Метод заставит браузер прервать запрос на оплату и закрыть пользовательский интерфейс запроса на оплату . Например, веб-страница может прерываться, если пользователь не завершил транзакцию в течение требуемого времени.

payment.abort();

Отклик на оплату

Когда клиент утверждает заявку на оплату, на веб-сайт возвращается ответ на платеж . Отклики на платеж включают следующее:

Свойство Описание Обязательный Дополнительные сведения
methodName Идентификатор метода оплаты, выбранного пользователем. Y
details Объект JSON, включающий все данные, которые требуется продавцу для обработки транзакции с помощью выбранного метода оплаты или маркера оплаты Y Простая карточка Dictionary: cardholderName; cardNumber; expiryMonth; expiryYear; cardSecurityCode; billingAddress;
shippingAddress Адрес доставки, выбранный пользователем Необязательно. Требуется при requestShipping истинности Словарь адресов: страна; addressLine; региональных город dependentLocality; Индекс sortingCode; languageCode; всей получателя Кнопка
shippingOption Идентификатор выбранного варианта отгрузки Необязательно. Требуется при requestShipping истинности
payerName Имя, указанное пользователем. Необязательно. Требуется при requestPayerName истинности
payerEmail Адрес электронной почты, выбранный пользователем Необязательно. Требуется при requestPayerEmail истинности
PayerPhone Номер телефона, выбранный пользователем Необязательно. Требуется при requestPayerPhone истинности

detailsОбъект JSON в ответе на платеж будет содержать данные платежа, необходимые продавцу для обработки платежа. В самой простой форме ответ будет представлять собой базовые полезные данные карты , содержащие сведения о платежных картах с открытым текстом. Если у продавцов есть дополнительные участники шлюзов и процессоров для обеспечения поддержки оплаты, для продавцов может потребоваться полезная нагрузка, которую может обработать процессор. Они могут использовать форму маркера процессора/шлюза или зашифрованного средства оплаты. Эти методы оплаты находятся за пределами области настоящего документа и будут рассмотрены в документации, касающейся процессора. Кроме того, чтобы получить простой ответ на карту, разработчику не требуется дополнительное подключение к корпорации Майкрософт, в отличие от других методов оплаты процессора/шлюза, которые могут потребовать выставления ключа шифрования или авторизации запросов (OAuth).

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

Страница, отображаемая при обработке платежа

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

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

Заявка на оплату с отгрузкой

Адрес доставки

Для продаж, для которых требуется доставка физических товаров, требуется адрес доставки. Чтобы включить адрес доставки, укажите его requestShipping = True в options параметре запроса.

Когда пользователь выбирает или обновляет адрес доставки, onshippingaddresschange событие будет запущено. На веб-сайте, использующем прослушиватель событий, будет содержаться уведомление об изменении, после чего можно проверить адрес, повторно рассчитать затраты на доставку и налоги, а также обновить, shippingOptions чтобы отобразить измененные затраты и варианты отправки, доступные для выбранного адреса (если применимо).

Варианты отправки

Варианты доставки можно представить клиенту, добавив shippingOptions к details параметру. Настройка по умолчанию может быть установлена selected = True для одного из вариантов отправки.

Когда пользователь выбирает или обновляет shippingOptions, onshippingoptionchange событие будет запущено. На веб-сайте, использующем прослушиватель событий, будет содержаться сообщение об изменении и может обновить details параметр с учетом нужной суммы отгрузки.

var details = {
    total: {
        label: 'Total (USD)',
        amount: {currency: 'USD', value: '193.98'}
    },
    displayItems: [{
         label: 'Subtotal',
         amount: {currency: 'USD', value: '174.99'}
        }, {
            label: 'Shipping',
            amount: {currency: 'USD', value: '0.00'}
        }, {
            label: 'Taxes',
            amount: {currency: "USD", '18.99'}
    }],
    shippingOptions: [{
        id: 'STANDARD',
        label: 'Standard – FREE (5-6 Business days)',
        amount: {currency: 'USD', value: '0.00'},
        selected: true
    }, {
        id: 'EXPEDITED',
        label: 'Two-Day Shipping',
        amount: {currency: 'USD', value: '7.00'}
    }]
};
        
var options = {
    requestShipping: true,
    requestPayerEmail: true
}; 
 

Справочник по API

API запроса оплаты

Specification

API запроса оплаты