Простая оплата для Ваших клиентов на сайте или в мобильном приложении вместе с Apple Pay


Apple Pay - система платежей от компании Apple, которая позволяет мгновенно осуществлять бесконтактные платежи, оплату на сайтах и в мобильных приложениях. Покупателю достаточно один раз привязать свою карту и подтверждать последующие платежи с помощью TouchID или FaceID. Технология доступна для владельцев устройств Apple (в браузерах Safari на iPhone, iPad и некоторых моделях MacBook).

Простой и быстрый способ получить оплату от клиентов
Подключение Apple Pay на Ваш сайт или мобильное приложение
Подключение без дополнительных интеграций, через страницу WayForPay
Возможность прямой интеграции кнопки Apple Pay на сайт или мобильное приложение
Удобный способ оплаты для владельцев устройств Apple
Безопасность расчетов

Как работает?

Для быстрой и простой оплаты достаточно иметь добавленные карты в Apple Wallet

1. Клиент добавляет карту в Apple Pay
2. При оплате достаточно выбрать ранее добавленную карту в Apple Pay и подтвердить платеж
3. Оплата происходит с указанной карты. Продавец получит уведомление об оплате

Интеграция

Подключение Apple Pay возможно через страницу WayForPay и с помощью прямой интеграции.
Apple Pay доступен всем магазинам/торговцам подключенным к системе WayForPay без дополнительных соглашений и действий.

Подключение через страницу WayForPay

При таком способе нет необходимости в дополнительных интеграциях. Кнопка Apple Pay будет отображена на странице WayForPay. Если Вы уже зарегистрированы в WayForPay метод оплаты включается автоматически. Управлять методами оплаты можно в Личном кабинете, в меню "Платежные методы".

Прямое подключение через Apple Pay API

При такой интеграции необходимо будет пройти ряд процедур и проверок для подключения. Необходимо подать заявку, а также сайт или приложение должны соответствовать ряду требований. Ваш сайт должен работать по схеме HTTPS и поддерживать протокол TLS 1.2.


Прямое подключение через Apple Pay API

Прямое подключение позволит отображать кнопку Apple Pay на сайте или в мобильном приложении.
Для применения технологии Apple Pay на сайтах при прямой интеграции необходимо соблюдение следующих условий использования от компании Apple:

Наличие регистрации аккаунта в программе Apple Developer. В которой необходимо зарегистрировать индивидуальный Merchant ID.
Apple Pay запрещено использовать для оплаты табачной продукции, реплики, товаров для взрослых, покупки виртуальной валюты, для пополнения кошельков.
Рекомендации по использованию и брендированию

Необходимые шаги для использования Apple Pay:

1. Зарегистрируйте Merchant ID

В консоли Apple Developer Account, перейдите в раздел «Certificates, IDs & Profiles», после «Merchant IDs» и пройдите регистрацию нового Merchant ID: в поле Description указывается описание; в поле Identifier следует указать домен Вашего сайта в обратном порядке с добавлением «merchant» в начале, например, сайт shop.ua, то Identifier будет выглядеть так - merchant.ua.shop).

2. Создайте сертификат

На адрес [email protected] напишите письмо, указав зарегистрированный в Apple Developer Account ваш Merchant ID.
Служба поддержки сформирует сертификат и отправит Вам обратным письмом. Далее в консоли Apple Developer создайте сертификат Apple Pay Payment Processing Certificate и передайте в нашу службу поддержки.

3. Подтвердите домен

В консоли Apple Developer Account добавьте домены для каждого сайта, где будет осуществляться прием оплаты через Apple Pay. Сайты должны работать по схеме HTTPS и поддерживать протокол TLS 1.2.

Подтвердите владение доменами.


Прямая интеграция Apple Pay на сайте

Реализация состоит из клиентской части (javascript) и серверной.

1.Проверка возможности оплаты с помощью Apple Pay
Выполняется проверка, поддерживает ли устройство или браузер оплату с Apple Pay, а также то, добавлена ли в Wallet карта, которой можно оплачивать.
if (window.ApplePaySession) {
    var promise = ApplePaySession.canMakePaymentsWithActiveCard({YOUR_MERCHANT_ID});
    promise.then(function(canMakePayments) {
        if (canMakePayments) {
            //карта привязана, можно запускать сессию        }
    });
} else {
    //невозможно оплатить}
2. Формирование структуры платежа для сессии
Указываем наименование товара/услуги, сумму и валюту платежа. Создаем новую сессию оплаты.
document.getElementById("apple-pay-button").onclick = function(event) {
    var paymentRequest = {
        currencyCode: 'UAH',
        countryCode: 'UA',
        total: {
            label: {PRODUCT_NAME},
            amount: {PAYMENT_AMOUNT}
        },
        merchantCapabilities: ['supports3DS'],
        supportedNetworks: ['masterCard', 'visa']
    };
}

var session = new ApplePaySession(3, paymentRequest);
3. Выполняем валидацию мерчанта
Для проверки возможности оплаты для вашего идентификатора мерчанта и получения необходимых данных для выполнения платежа необходимо сформировать структуру данных.
Так же выполнить запрос на оплату в WayForPay используя API Charge и обработать полученный ответ от системы.
session.onvalidatemerchant = function(event) {
    var promise = validateMerchant(event.validationURL);
    promise.then(function(merchantSession) {
        session.completeMerchantValidation(merchantSession);
    });
}

function validateMerchant(validationURL) {
    return new Promise(function(resolve, reject) {
        var applePayPayload = {
            'merchantId': {YOUR_MERCHANT_ID},
            'validationURL': {YOUR_VALIDATION_URL},
            'body': {
                'merchantIdentifier': {YOUR_MERCHANT_ID},
                'domainName': {YOUR_DOMAIN_NAME},
                'displayName': {PRODUCT_NAME}
            }
        };

        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            var data = JSON.parse(this.responseText);
            resolve(data);
        };
        xhr.onerror = reject;
        xhr.open('POST', merchantValidationEndpoint, true);
        xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
        xhr.send(JSON.stringify(applePayPayload));
    });
}

4. Запускаем сессию и обрабатываем оплату

session.onpaymentauthorized = function(event) {
//после получения токена передаем его в wayforpay
session.completePayment(ApplePaySession.STATUS_SUCCESS);
}

session.begin();

Пример js кода:

//в примере используется библиотека jquery//дополнительные скрипты прописывать не требуется, все объекты для платежей Apple Pay уже есть в браузере Safari
if (window.ApplePaySession) { //проверка устройства    var merchantIdentifier = 'Ваш Apple Merchant ID';
    var promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);
    promise.then(function (canMakePayments) {
        if (canMakePayments) {
            $('#apple-pay').show(); //кнопка Apple Pay        }
    });
}

$('#apple-pay').click(function () { //обработчик кнопки    var request = {
        // requiredShippingContactFields: ['email'], //Раскомментируйте, если вам нужен e-mail. Также можно запросить postalAddress, phone, name.        countryCode: 'UA',
        currencyCode: 'UAH',
        supportedNetworks: ['visa', 'masterCard'],
        merchantCapabilities: ['supports3DS'],
        //Назначение платежа указывайте только латиницей!        total: { label: 'Test', amount: '1.00' },
    }
    var session = new ApplePaySession(1, request);

    // обработчик события для создания merchant session.    session.onvalidatemerchant = function (event) {
        var data = {
            validationUrl: event.validationURL
        };

        // отправьте запрос на ваш сервер        // для запуска сессии        $.post("/ApplePay/StartSession", data).then(function (result) {
            session.completeMerchantValidation(result.Model);
        });
    };

    // обработчик события авторизации платежа    session.onpaymentauthorized = function (event) {
        //var email = event.payment.shippingContact.emailAddress; //если был запрошен адрес e-mail        //var phone = event.payment.shippingContact.phoneNumber; //если был запрошен телефон        //все варианты смотрите на сайте https://developer.apple.com/reference/applepayjs/paymentcontact
        var data = {
            cryptogram: JSON.stringify(event.payment.token)
        };

        //отправьте запрос на ваш сервер, а далее выполните запрос Charge api wayforpay.com        //для проведения оплаты        $.post("/ApplePay/Pay", data).then(function (result) {
            var status;
            if (result.Success) {
                status = ApplePaySession.STATUS_SUCCESS;
            } else {
                status = ApplePaySession.STATUS_FAILURE;
            }

            session.completePayment(status);
        });
    };

    // Начало сессии Apple Pay    session.begin();
});

Пример набора данных, отправляемых методом Charge wayforpay api

{
    "apiVersion":1,
    "transactionType":"CHARGE",
    "merchantAccount":"test_merch_n1",
    "merchantDomainName":"www.ggg.com",
    "orderReference":"A550500763641",
    "orderDate":1550500763,
    "amount":1,
    "currency":"UAH",
    "productName":[
        "dung W100F",
        "Sdung d 7.0 Black"
    ],
    "productPrice":[
        21.1,
        30.99
    ],
    "productCount":[
        1,
        2
    ],
    "clientFirstName":"Kgwed",
    "clientLastName":"Antnd",
    "clientCountry":"UKR",
    "clientEmail":"[email protected]",
    "clientPhone":"380612527744",
    "clientIpAddress":"127.0.0.1",
    "merchantSignature":"cdd678b727be03c6810f98a551a3faa0",
    "merchantTransactionType":"SALE",
    "merchantTransactionSecureType":"NON3DS",
    "applePayString":"{"version":"EC_v1","data":"tB2ubO0fbh39SWRNB9HUEo1XjbSz65PjJl1z6VunEcIES1aLamgmdhkWRqFLcucGH5cO21magwmOXqCjip1xX83LM9okiyRXe2Rssmrb5by5OkHZeafSioqaq0n7IjDqPTu0gwtwAzpqe+0gfSnDa+M0hVWcbxe7FgXhQxLQCa7vGVbzI+d9R4Y3PdPPVIWNW9i09McNZ4Sc5xqGbHEgJ28z0K/3s2yR0O82mlxBe5SSvfTcf7rlSNBdmDq8xMYSapjv3U5YmBBAErxdaAU7bWmvEGkjONCiBJUHQzwqEhQDAnivKRTI/LiSfMs3Vv53+Vk6FHGc6DxiAClmAXBxu+Z2W+iTlzI8LYzZb4PNc6F691Ca7kfF7YIsRY+qb/rgKwsaFfHqi26cUoEV","signature":"MIAGCSqGSIb3DQEHAqCAMIACAQExDzANBglghkgBZQMEAgEFADCABgkqhkiG9w0BBwEAAKCAMIID4jCCA4igAwIBAgIIJEPyqAad9XcwCgYIKoZIzj0EAwIwejEuMCwGA1UEAwwlQXBwbGUgQXBwbGljYXRpb24gSW50ZWdyYXRpb24gQ0EgLSBHMzEmMCQGA1UECwwd92NkBh0EAgUAMAoGCCqGSM49BAMCA0gAMEUCIHKKnw+Soyq5mXQr1V62c0BXKpaHodYu9TWXEPUWPpbpAiEAkTecfW6+W5l0r0ADfzTCPq2YtbS39w01XIayqBNy8bEwggLuMIICdaADAgECAghJbS+/OpjalzAKBggqhkjOPQQDAjBnMRswGQYDVQQDDBJBcHBsZSBSb290IENBIC0gRzMxJjAkBgNVBAsMHUFwcGxlIENlcnRpZmljYXRpb24gQXV0aG9yaXR5MRMwEQYDVQQKDApBcHBsZSBJbmMuMQswCQYDVQQGEwJVUzAeFw0xNDA1MDYyMzQ2MzBaFw0yOTA1MDYyMzQ2MzBaMHoxLjAsBgNVBAMMJUFwcGxlIEFwcGxpY2F0aW9uIEludGVncmF0aW9uIENBIC0gRzMxJjAkBgNVBAsMHUFwcGxlIENlcnRpZmljYXRpb24gQXV0aG9yaXR5MRMwEQYDVQQKDApBcHBsZSBJbmMuMQswCQYDVQQGEwJVUzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABPAXEYQZ12SF1RpeJYEHduiAou/ee65N4I38S5PhM1bVZls1riLQl3YNIk57ugj9dhfOiMt2u2ZwvsjoKYT/VEWjgfcwgfQwRgYIKwYBBQUHAQEEOjA4MDYGCCsGAQUFBzABhipodHRwOi8vb2NzcC5hcHBsZS5jb20vb2NzcDA0LWFwcGxlcm9vdGNhZzMwHQYDVR0OBBYEFCPyScRPk+TvJ+bE9ihsP6K7/S5LMA8GA1UdEwEB/wQFMAMBAf8wHwYDVR0jBBgwFoAUu7DeoVgziJqkipnevr3rr9rLJKswNwYDVR0fBDAwLjAsoCqgKIYmaHR0cDovL2NybC5hcHBsZS5jb20vYXBwbGVyb290Y2FnMy5jcmwwDgYDVR0PAQH/BAQDAgEGMBAGCiqGSIb3Y2QGAg4EAgUAMAoGCCqGSM49BAMCA2cAMGQCMDrPcoNRFpmxhvs1w1bKYr/0F+3ZD3VNoo6+8ZyBXkK3ifiY95tZn5jVQQ2PnenC/gIwMi3VRCGwowV3bF3zODuQZ/0XfCwhbZZPxnJpghJvVPh6fRuZy5sJiSFhBpkPCZIdAAAxggGMMIIBiAIBATCBhjB6MS4wLAYDVQQDDCVBcHBsZSBBcHBsaWNhdGlvbiBJbnRlZ3JhdGlvbiBDQSAtIEczMSYwJAYDVQQLDB1BcHBsZSBDZXJ0aWZpY2F0aW9uIEF1dGhvcml0eTETMBEGA1UECgwKQXBwbGUgSW5jLjELMAkGA1UEBhMCVVMCCCRD8qgGnfV3MA0GCWCGSAFlAwQCAQUAoIGVMBgGCSqGSIb3DQEJAzELBgkqhkiG9w0BBwEwHAYJKoZIhvcNAQkFMQ8XDTE5MDIxNTEwMzMyNVowKgYJKoZIhvcNAQk0MR0wGzANBglghkgBZQMEAgEFAKEKBggqhkjOPQQDAjAvBgkqhkiG9w0BCQQxIgQgDARTlPaUQwgOAWGrBpdkYCh+Yt9PR+QNrJML+rsAliowCgYIKoZIzj0EAwIERzBFAiEA9pKsQLRkwftlXnmLkTCrmFMyvi+biVCtCpizmzWoMwECIFi3+v7qhI/o/RKUbhYR6JoBUm1GswjzXhIXZiGcMq58AAAAAAAA","header":{"ephemeralPublicKey":"MFkwDQgAE88rVlkeu4xpPqMWDw59BRYO+zqqlCjcfLO3mE0/S9xhKZJfmIEcJlxtDJ1hwQ+U2L+HF7OJXL+WMsGHA==","publicKeyHash":"eUhXLM2/Z05nnAcntk0tjzFBzHgqJarnBDnovx5WMkc=","transactionId":"9845723470cc9722355763fd5b5689847842f09591855764d29322de4a319bf9"}}",
    "socialUri":"socialUri",
    "holdTimeout":1000000
}

Прямая интеграция Apple Pay в мобильное приложение

Для интеграции метода в приложение используйте SDK PassKit от Apple для получения PaymentToken и метод оплаты Charge в API WayForPay для проведения платежа.

Процесс оплаты:

Проверка совместимости
Если устройство пользователя поддерживает Apple Pay, отображается брендированная кнопка оплаты
Быстрая покупка
Пользователь подтверждает платеж с помощью функций Touch ID или Face ID, либо вводом пароля.
Безопасность без 3-D Secure
Данные банковских карт не хранятся в устройствах и никуда не передаются при оплате.

Требования
При использовании Apple Pay необходимо соблюдение следующих условий от компании Apple.
Комиссия
К платежному методу применяется стандартная комиссия установленная для магазина.
Полезные ссылки

Еще не с WayForPay?

Зарегистрируйтесь и подключите популярный платежный метод для своих клиентов

Остались вопросы? Мы на связи 24/7
Написать нам в мессенджеры