Draft: MAT-5778 Added Apple Pay for checkout block payment

assets/js/blocks-apple-pay.js

@@ -1,7 +1,6 @@
-import React from 'react'
 import { useEffect, useRef } from '@wordpress/element'
 
-const Shift4ApplePay = ({ onClick, onClose, onSubmit, billing }) => {
+const Shift4ApplePay = ({ onClick, onClose, onSubmit, billing, setExpressPaymentError }) => {
     const tokenInputRef = useRef(null)
     const buttonRef = useRef(null)
     const { cartTotal, currency } = billing
@@ -46,7 +45,7 @@ const Shift4ApplePay = ({ onClick, onClose, onSubmit, billing }) => {
 
         try {
             const applePayToken = await window.shift4PayWithApplePay({
-                value: cartTotal.value,
+                value: (cartTotal.value / Math.pow(10, currency.minorUnit)).toFixed(currency.minorUnit),
                 currency: currency.code
             })
 
@@ -58,7 +57,7 @@ const Shift4ApplePay = ({ onClick, onClose, onSubmit, billing }) => {
             // submits the checkout and begins processing
             onSubmit()
         } catch (error) {
-            console.error('Apple Pay Failed', error)
+            setExpressPaymentError(error)
             onClose()
         }
     }

assets/js/blocks.js

@@ -1,22 +1,20 @@
 const { registerPaymentMethod } = window.wc.wcBlocksRegistry
-// const { registerExpressPaymentMethod } = window.wc.wcBlocksRegistry
-const { createElement } = window.wp.element
+const { registerExpressPaymentMethod } = window.wc.wcBlocksRegistry
 const { cardTitle, savedCardsEnabled } = window.shift4Config
 
-import React from 'react'
 import Shift4PaymentForm from './blocks-form'
-// import Shift4ApplePay from './blocks-apple-pay'
+import Shift4ApplePay from './blocks-apple-pay'
 
 // Register Shift4 Apple Pay.
-// registerExpressPaymentMethod({
-//     name: 'shift4_applepay',
-//     label: 'Apple Pay (Shift4)',
-//     edit: <p>Apple Pay (Shift4)</p>,
-//     content: <Shift4ApplePay />,
-//     canMakePayment: () => {
-//         return !!(window.ApplePaySession && window.ApplePaySession.canMakePayments())
-//     }
-// })
+registerExpressPaymentMethod({
+    name: 'shift4_applepay',
+    label: 'Apple Pay (Shift4)',
+    edit: <p>Apple Pay (Shift4)</p>,
+    content: <Shift4ApplePay />,
+    canMakePayment: () => {
+        return !!(window.ApplePaySession && window.ApplePaySession.canMakePayments())
+    }
+})
 
 // Register Shift4 Credit Card.
 registerPaymentMethod({

assets/js/shift4.js

@@ -202,6 +202,7 @@ function initShift4(blockOptions) {
             })
         } catch (error) {
             errorCallback(error)
+            throw error
         }
     }
 
@@ -258,9 +259,15 @@ function initShift4(blockOptions) {
         try {
             const result = await paymentRequest.show()
             const applePayToken = result.details.token.paymentData
+            if (!applePayToken) {
+                console.warn('Apple Pay Failed')
+                console.log('Apple Pay result: ', result)
+                throw new Error('Apple Pay Failed.')
+            }
             return applePayToken
         } catch (error) {
             errorCallback(error)
+            throw error
         }
     }