diff --git a/Resources/docs/example/apple-pay.md b/Resources/docs/example/apple-pay.md index 916b31f..12ecc89 100644 --- a/Resources/docs/example/apple-pay.md +++ b/Resources/docs/example/apple-pay.md @@ -326,7 +326,7 @@ class ApplePayPaymentGatewayEventSubscriber implements EventSubscriberInterface ## Custom JS events -You can attach to some js events if you want to add some real time changes, here is the list: +You can attach to some js events if you want to add some real time changes, here is the list (be careful it will override default one, so make sure to complete every step): - onpaymentmethodselected - onshippingcontactselected @@ -339,12 +339,19 @@ Example (redirect to order summary on payment success): ```js document.addEventListener('DOMContentLoaded', function () { - document.querySelector('apple-pay-button').addEventListener('onpaymentsuccess', function (e) { - let data = e.detail; // retrieve transaction data - - if ('approved' === data.status) { - window.location.href = 'https://my-domain.com/order_summary/' + data.item_id; + // Attach to session create event to retrieve initialization elements + ApplePaySession.onsessioncreate = function (event) { + let amount = event.amount; + let request = event.request; + let session = event.session; + + // Then override the session events + session.onpaymentsuccess = function (event) { + let data = event.data; + if ('approved' === data.status) { + window.location.href = 'https://my-domain.com/order_summary/' + data.item_id; + } } - }); + }; }) ``` \ No newline at end of file diff --git a/Resources/views/Gateway/apple_pay.html.twig b/Resources/views/Gateway/apple_pay.html.twig index b990cb2..c796320 100644 --- a/Resources/views/Gateway/apple_pay.html.twig +++ b/Resources/views/Gateway/apple_pay.html.twig @@ -36,24 +36,18 @@ }; appleSession.onpaymentmethodselected = function (event) { - applePayButton.dispatchEvent(new CustomEvent('onpaymentmethodselected', {'detail': event})); - appleSession.completePaymentMethodSelection(applePayPaymentRequest.total, applePayPaymentRequest.lineItems ?? []); }; appleSession.onshippingcontactselected = function (event) { - applePayButton.dispatchEvent(new CustomEvent('onshippingcontactselected', {'detail': event})); - appleSession.completeShippingContactSelection(ApplePaySession.STATUS_SUCCESS, applePayPaymentRequest.shippingMethods ?? [], applePayPaymentRequest.total, applePayPaymentRequest.lineItems ?? []); }; appleSession.onshippingmethodselected = function (event) { - applePayButton.dispatchEvent(new CustomEvent('onshippingmethodselected', {'detail': event})); - selectedShippingMethod = event.shippingMethod.identifier; let total = applePayPaymentRequest.total; - total.amount = parseFloat(orderAmount) + parseFloat(event.shippingMethod.amount); + total.amount = (parseFloat(orderAmount) + parseFloat(event.shippingMethod.amount)).toFixed(2); appleSession.completeShippingMethodSelection(ApplePaySession.STATUS_SUCCESS, total, applePayPaymentRequest.lineItems ?? []); } @@ -83,7 +77,29 @@ }).then((data) => { appleSession.completePayment('approved' === data.status ? ApplePaySession.STATUS_SUCCESS : ApplePaySession.STATUS_FAILURE); - applePayButton.dispatchEvent(new CustomEvent('approved' === data.status ? 'onpaymentsuccess' : 'onpaymentfailed', {'detail': data})); + if ('approved' === data.status) { + if (typeof appleSession.onpaymentsuccess != 'function') { + return; + } + + return appleSession.onpaymentsuccess({ + 'amount': orderAmount, + 'request': applePayPaymentRequest, + 'session': appleSession, + 'data': data + }); + } + + if (typeof appleSession.onpaymentsuccess != 'function') { + return; + } + + return appleSession.onpaymentfailed({ + 'amount': orderAmount, + 'request': applePayPaymentRequest, + 'session': appleSession, + 'data': data + }); }).catch(function (error) { console.error('Payment validation unsuccessful: ' + error); @@ -91,8 +107,12 @@ }); } - appleSession.oncancel = function (event) { - applePayButton.dispatchEvent(new CustomEvent('oncancel', {'detail': event})); + if (typeof ApplePaySession.onsessioncreate == 'function') { + ApplePaySession.onsessioncreate({ + 'amount': orderAmount, + 'request': applePayPaymentRequest, + 'session': appleSession, + }); } appleSession.begin();