From e5c639b8254af5f8f5d049cafec7a9c7bc6c11a8 Mon Sep 17 00:00:00 2001
From: Garry <garry@liquido.cn>
Date: Thu, 22 May 2025 21:20:09 +0800
Subject: [PATCH] Added Apple Pay for checkout block payment

---
 assets/js/blocks-apple-pay.js |  3 +--
 assets/js/blocks.js           | 24 +++++++++++-------------
 build/index.js                |  2 +-
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/assets/js/blocks-apple-pay.js b/assets/js/blocks-apple-pay.js
index e226bf8..9201312 100644
--- a/assets/js/blocks-apple-pay.js
+++ b/assets/js/blocks-apple-pay.js
@@ -1,4 +1,3 @@
-import React from 'react'
 import { useEffect, useRef } from '@wordpress/element'
 
 const Shift4ApplePay = ({ onClick, onClose, onSubmit, 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
             })
 
diff --git a/assets/js/blocks.js b/assets/js/blocks.js
index 24dfc4c..c63c101 100644
--- a/assets/js/blocks.js
+++ b/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({
diff --git a/build/index.js b/build/index.js
index 6157e93..66e0dba 100644
--- a/build/index.js
+++ b/build/index.js
@@ -1,2 +1,2 @@
 /*! For license information please see index.js.LICENSE.txt */
-(()=>{"use strict";var e={20:(e,t,s)=>{var i=s(594),a=Symbol.for("react.element"),n=(Symbol.for("react.fragment"),Object.prototype.hasOwnProperty),r=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,o={key:!0,ref:!0,__self:!0,__source:!0};function d(e,t,s){var i,d={},l=null,p=null;for(i in void 0!==s&&(l=""+s),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(p=t.ref),t)n.call(t,i)&&!o.hasOwnProperty(i)&&(d[i]=t[i]);if(e&&e.defaultProps)for(i in t=e.defaultProps)void 0===d[i]&&(d[i]=t[i]);return{$$typeof:a,type:e,key:l,ref:p,props:d,_owner:r.current}}t.jsx=d,t.jsxs=d},594:e=>{e.exports=React},848:(e,t,s)=>{e.exports=s(20)}},t={};function s(i){var a=t[i];if(void 0!==a)return a.exports;var n=t[i]={exports:{}};return e[i](n,n.exports,s),n.exports}s(594);const i=wp.element;var a=s(848);const n=({eventRegistration:e,emitResponse:t,billing:s})=>{const{cartTotal:n,currency:r}=s,o=(0,i.useRef)(null),{onPaymentSetup:d}=e;return(0,i.useEffect)((()=>{if(!window.shift4Initialised){const e=()=>{"function"==typeof initShift4&&(initShift4({paymentMethodDataRef:o}),window.shift4Initialised=!0,window.shift4UpdatedCheckout())};window.shift4JsLoaded?e():document.addEventListener("shift4JsLoaded",e)}window.shift4UpdatedCheckout();const e=d((async()=>(window.clearError(),await window.shift4PaymentFormSubmit({amount:n.value,currency:r.code}),o.current?{type:t.responseTypes.SUCCESS,meta:{paymentMethodData:{...o.current}}}:{type:t.responseTypes.ERROR})));return()=>{e()}}),[t.responseTypes.ERROR,t.responseTypes.SUCCESS,d]),(0,a.jsxs)("div",{id:"shift4-payment-form",children:[(0,a.jsxs)("div",{className:"shift4-payment-field",children:[(0,a.jsx)("label",{className:"shift4-payment-number-label",children:"Card number"}),(0,a.jsx)("div",{className:"shift4-payment-input shift4-payment-number-input","data-shift4":"number"})]}),(0,a.jsxs)("div",{className:"shift4-payment-fields",children:[(0,a.jsxs)("div",{className:"shift4-payment-field",children:[(0,a.jsx)("label",{className:"shift4-payment-expiry-label",children:"Expiration"}),(0,a.jsx)("div",{className:"shift4-payment-input shift4-payment-expiry-input","data-shift4":"expiry"})]}),(0,a.jsxs)("div",{className:"shift4-payment-field",children:[(0,a.jsx)("label",{className:"shift4-payment-cvv-label",children:"Cvv"}),(0,a.jsx)("div",{className:"shift4-payment-input shift4-payment-cvv-input","data-shift4":"cvc"})]})]})]})},{registerPaymentMethod:r}=window.wc.wcBlocksRegistry,{createElement:o}=window.wp.element,{cardTitle:d,savedCardsEnabled:l}=window.shift4Config;r({name:"shift4_card",label:"Card Payment",content:(0,a.jsx)(n,{}),edit:(0,a.jsx)("p",{children:"Credit Card (Shift4)'"}),canMakePayment:()=>!0,ariaLabel:"Shift4 Credit Card payment method",supports:{features:["products"],showSavedCards:"yes"===l,showSaveOption:"yes"===l}})})();
\ No newline at end of file
+(()=>{"use strict";var e={20:(e,t,n)=>{var i=n(594),s=Symbol.for("react.element"),a=(Symbol.for("react.fragment"),Object.prototype.hasOwnProperty),r=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,o={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var i,l={},d=null,c=null;for(i in void 0!==n&&(d=""+n),void 0!==t.key&&(d=""+t.key),void 0!==t.ref&&(c=t.ref),t)a.call(t,i)&&!o.hasOwnProperty(i)&&(l[i]=t[i]);if(e&&e.defaultProps)for(i in t=e.defaultProps)void 0===l[i]&&(l[i]=t[i]);return{$$typeof:s,type:e,key:d,ref:c,props:l,_owner:r.current}}t.jsx=l,t.jsxs=l},594:e=>{e.exports=React},848:(e,t,n)=>{e.exports=n(20)}},t={};function n(i){var s=t[i];if(void 0!==s)return s.exports;var a=t[i]={exports:{}};return e[i](a,a.exports,n),a.exports}n(594);const i=wp.element;var s=n(848);const a=({eventRegistration:e,emitResponse:t,billing:n})=>{const{cartTotal:a,currency:r}=n,o=(0,i.useRef)(null),{onPaymentSetup:l}=e;return(0,i.useEffect)((()=>{if(!window.shift4Initialised){const e=()=>{"function"==typeof initShift4&&(initShift4({paymentMethodDataRef:o}),window.shift4Initialised=!0,window.shift4UpdatedCheckout())};window.shift4JsLoaded?e():document.addEventListener("shift4JsLoaded",e)}window.shift4UpdatedCheckout();const e=l((async()=>(window.clearError(),await window.shift4PaymentFormSubmit({amount:a.value,currency:r.code}),o.current?{type:t.responseTypes.SUCCESS,meta:{paymentMethodData:{...o.current}}}:{type:t.responseTypes.ERROR})));return()=>{e()}}),[t.responseTypes.ERROR,t.responseTypes.SUCCESS,l]),(0,s.jsxs)("div",{id:"shift4-payment-form",children:[(0,s.jsxs)("div",{className:"shift4-payment-field",children:[(0,s.jsx)("label",{className:"shift4-payment-number-label",children:"Card number"}),(0,s.jsx)("div",{className:"shift4-payment-input shift4-payment-number-input","data-shift4":"number"})]}),(0,s.jsxs)("div",{className:"shift4-payment-fields",children:[(0,s.jsxs)("div",{className:"shift4-payment-field",children:[(0,s.jsx)("label",{className:"shift4-payment-expiry-label",children:"Expiration"}),(0,s.jsx)("div",{className:"shift4-payment-input shift4-payment-expiry-input","data-shift4":"expiry"})]}),(0,s.jsxs)("div",{className:"shift4-payment-field",children:[(0,s.jsx)("label",{className:"shift4-payment-cvv-label",children:"Cvv"}),(0,s.jsx)("div",{className:"shift4-payment-input shift4-payment-cvv-input","data-shift4":"cvc"})]})]})]})},r=({onClick:e,onClose:t,onSubmit:n,billing:a})=>{const r=(0,i.useRef)(null),o=(0,i.useRef)(null),{cartTotal:l,currency:d}=a,c=(0,i.useRef)(null);(0,i.useEffect)((()=>{if(!window.shift4Initialised){const e=()=>{"function"==typeof initShift4&&(initShift4({paymentMethodDataRef:c}),window.shift4Initialised=!0)};window.shift4JsLoaded?e():document.addEventListener("shift4JsLoaded",e)}const e=o.current;return e&&e.addEventListener("click",p),()=>{e&&e.removeEventListener("click",p)}}),[]);const p=async()=>{e();try{const e=await window.shift4PayWithApplePay({value:(l.value/Math.pow(10,d.minorUnit)).toFixed(d.minorUnit),currency:d.code});r.current&&(r.current.value=JSON.stringify(e)),n()}catch(e){console.error("Apple Pay Failed",e),t()}};return(0,s.jsxs)("div",{children:[(0,s.jsx)("apple-pay-button",{id:"apple-pay-submit-button",buttonstyle:"black",type:"buy",locale:"en-US",class:"w-full",lang:"en-US",ref:o}),(0,s.jsx)("input",{type:"hidden",name:"shift4_applepay_token",ref:r})]})},{registerPaymentMethod:o}=window.wc.wcBlocksRegistry,{registerExpressPaymentMethod:l}=window.wc.wcBlocksRegistry,{cardTitle:d,savedCardsEnabled:c}=window.shift4Config;l({name:"shift4_applepay",label:"Apple Pay (Shift4)",edit:(0,s.jsx)("p",{children:"Apple Pay (Shift4)"}),content:(0,s.jsx)(r,{}),canMakePayment:()=>!(!window.ApplePaySession||!window.ApplePaySession.canMakePayments())}),o({name:"shift4_card",label:d,content:(0,s.jsx)(a,{}),edit:(0,s.jsx)("p",{children:"Credit Card (Shift4)'"}),canMakePayment:()=>!0,ariaLabel:"Shift4 Credit Card payment method",supports:{features:["products"],showSavedCards:"yes"===c,showSaveOption:"yes"===c}})})();
\ No newline at end of file