Update: change how apple pay events are attached

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;
+            }
         }
-    });
+    };
 })
 ```

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,16 +77,42 @@
             }).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);
 
                 appleSession.abort();
             });
         }
 
-        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();