Wprowadzenie
Apple Pay “on-site” jest to integracja płatności Apple Pay bezpośrednio na stronie Merchanta. Polega ona na umieszczeniu przycisku do płatności Apple Pay w sposób umożliwiający klientom płatność bezpośrednio z poziomu strony.
Implementacja
W celu wdrożenia płatności przy pomocy Apple Pay na swojej stronie, należy wgrać na serwer plik, który będzie dostępny z poziomu domeny. Plik ten służy do weryfikacji domeny podczas jej rejestracji. Apple, w celu weryfikacji, odpytuje zarejestrowaną domenę, jak na przykładzie poniżej.
https://{DOMAIN_NAME}/.well-known/apple-developer-merchantid-domain-association
https://secure.tpay.com/.well-known/apple-developer-merchantid-domain-association
Kolejnym krokiem w implementacji jest konfiguracja wcześniej wspomnianej domeny. W tym celu należy zalogować się do panelu akceptanta (Panel Akceptanta | Tpay ) i wejść w zakładkę Integracji, a następnie wybrać z listy Apple Pay.
Następnie należy kliknąć przycisk edycji oraz ikonę plusa znajdującą się po lewej stronie “Domains”. Należy wprowadzić adres url domeny, na której ma znaleźć się przycisk i zapisać ustawienia. Merchant może dodać więcej niż jedną domenę. W celu zdefiniowania kolejnych należy ponownie użyć ikony plusa.
Uwaga!!!
W przypadku, gdy dodawana domena nie istnieje na liście domen dodanych podczas rejestracji konta merchanta prosimy o ich uprzednią rejestrację w zakładce Twoje konto --> Twoje dane --> Punkt Sprzedaż.
Po zakończeniu konfiguracji domen w panelu akceptanta można dodać przycisk na stronę. W celu wygenerowania przycisku zaleca się wykorzystanie strony demo apple. Można znaleźć ją tutaj.
Po wygenerowaniu kodu należy umieścić go w kodzie źródłowym strony w miejscu, gdzie ma być dokonywana płatność.. W tym samym miejscu należy również zaimplementować skrypt wykorzystywany do obsługi przycisku.
<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
Przy uruchomieniu kodu należy dokonać sprawdzenie, czy urządzenie wspiera płatności Apple Pay. W tym celu sprawdza się, czy istnieje obiekt ApplePaySession w przeglądarce oraz czy użytkownik ma podpiętą aktywną kartę w aplikacji Wallet
// Apple payment validation
// Check is Apple device and if user has active card in wallet
if (window.ApplePaySession) {
ApplePaySession
.canMakePaymentsWithActiveCard(merchantIdentifier)
.then(function (canMakePayment) {
if (!canMakePayment) {
alert('Apple pay payment not supported');
}
});
}
Po pomyślnej weryfikacji należy utworzyć nową sesję, w której zdefiniowane zostaną wszystkie dane dotyczące płatności. Opcjonalnie można przekazać requiredShippingContactFields oraz requiredBillingContactFields, gdzie wskazane parametry umożliwiają otrzymanie od płatnika danych dostawy oraz kontakt. Więcej informacji o danych płatności znajdziesz tutaj.
// Apple Pay script version
const applePayVersion = 1
// Payment data
const paymentRequest = {
currencyCode: 985,
countryCode: "POL",
total: {
label: "Payment description",
amount: 10,
type: 'final'
},
supportedNetworks: [
'visa',
'masterCard',
'electron',
'maestro',
'vPay'
],
merchantCapabilities: [
'supports3DS'
],
//optional parameters
requiredShippingContactFields: [
'postalAddress',
‘name’,
‘phone’,
‘email’
],
requiredBillingContactFields: [
‘postalAddress’
]
};
Po utworzeniu sesji należy obsłużyć event sprawdzający domenę merchanta. W tym celu należy wysłać żądanie do własnego środowiska back-end, które odpyta API Tpay na endpoint POST/wallet/applepay/init oraz zwróci odpowiedź do aplikacji frontowej.
// Validate merchant domain
applePaySession.onvalidatemerchant = async function (event) {
await fetch('/wallet/applepay/init', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
// Correct domain name ( same as in Tpay's Apple Pay Settings )
domainName: '',
// Name displayed when paying
displayName: '',
// The URL that is required to obtain an Apple Pay session
validationUrl: event.validationURL,
})
}).then(async response => {
if (response.status === 200) {
let json;
try {
json = await response.json();
}catch {
alert('Tpay error occurred');
return;
}
applePaySession.completeMerchantValidation(response.session);
} else {
alert('Error occurred');
return;
}
});
}
W kolejnym kroku należy zdefiniować obsługę eventu dotyczącego finalizacji transakcji. W tym evencie należy wysłać żądanie do własnego środowiska back-end , które odpyta Tpay API na endpoint POST /transactions oraz zwraca rezultat do aplikacji frontentowej. W evencie zwracane są również informacje o płatniku (ApplePayPayment | Apple Developer Documentation ), które mogą zostać wykorzystane do uzupełniania danych transakcji. Dane dostawy lub/i kontakt są dostępne jeśli zostały wskazane w 'paymentRequest'.
// Payment finalization
applePaySession.onpaymentauthorized = async function (event) {
if (event.payment || event.payment.token || event.payment.token.paymentData) {
applePaySession.completePayment(ApplePaySession.STATUS_FAILURE)
return;
}
//Get billingContact if required in paymentRequest
//event.payment.billingContact
//Get shippingContact if required in paymenRequest
//event.payment.shippingContact
await fetch('/transactions', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
base64_payment_data: btoa(encodeURIComponent(event.payment.token.paymentData))
})
}).then(async response => {
let status = ApplePaySession.STATUS_FAILURE;
if (response.status === 200) {
let json;
try {
json = await response.json();
}catch {
alert('Tpya error occurred');
}
if (json.result && json.result === true) {
status = ApplePaySession.STATUS_SUCCESS;
}
} else {
alert('Error occurred');
}
applePaySession.completePayment(status);
});
}
Dodatkowo obsłużyć można również event dotyczący anulowania płatności. Jest to element opcjonalny.
// Operation canceled
applePaySession.oncancel = function (event) {
alert('Payment canceled');
}
Po więcej informacji dotyczących implementacji przycisku płatności Apple Pay odsyłamy do oficjalnej dokumentacji znajdującej się tutaj.
Zalecenia
Ze względów bezpieczeństwa, wszystkie requesty wysyłane do API Tpay powinny być wysyłane za pośrednictwem własnego środowiska back-end. Wynika to z faktu, iż każde z zapytań wymaga przekazania poświadczeń, które nie powinny być ujawniane płatnikom. W przykładzie zostało to zaimplementowane jedynie w celu ułatwienia w zrozumieniu logiki.
Rekomendujemy
Aby zwiększyć efektywność sprzedaży i wzmocnić wykorzystanie komercyjne tej metody płatności rekomendujemy wykorzystanie możliwości rozszerzonej integracji uwzględniającej takie funkcje jak adres dostawy, opcje dostawy oraz kupony rabatowe. Szczegółowe informacje znajdują się w dokumentacji Apple Pay.
