diff --git a/assets/js/blocks-apple-pay.js b/assets/js/blocks-apple-pay.js index e226bf8..580b75f 100644 --- a/assets/js/blocks-apple-pay.js +++ b/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() } } 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:

Apple Pay (Shift4)

, -// content: , -// canMakePayment: () => { -// return !!(window.ApplePaySession && window.ApplePaySession.canMakePayments()) -// } -// }) +registerExpressPaymentMethod({ + name: 'shift4_applepay', + label: 'Apple Pay (Shift4)', + edit:

Apple Pay (Shift4)

, + content: , + canMakePayment: () => { + return !!(window.ApplePaySession && window.ApplePaySession.canMakePayments()) + } +}) // Register Shift4 Credit Card. registerPaymentMethod({ diff --git a/assets/js/shift4.js b/assets/js/shift4.js index c9e7fc7..f4d4b96 100644 --- a/assets/js/shift4.js +++ b/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 } } diff --git a/build/index.js b/build/index.js index 6157e93..6fb7bcf 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 s=n(594),i=Symbol.for("react.element"),a=(Symbol.for("react.fragment"),Object.prototype.hasOwnProperty),r=s.__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 s,l={},d=null,c=null;for(s in void 0!==n&&(d=""+n),void 0!==t.key&&(d=""+t.key),void 0!==t.ref&&(c=t.ref),t)a.call(t,s)&&!o.hasOwnProperty(s)&&(l[s]=t[s]);if(e&&e.defaultProps)for(s in t=e.defaultProps)void 0===l[s]&&(l[s]=t[s]);return{$$typeof:i,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(s){var i=t[s];if(void 0!==i)return i.exports;var a=t[s]={exports:{}};return e[s](a,a.exports,n),a.exports}n(594);const s=wp.element;var i=n(848);const a=({eventRegistration:e,emitResponse:t,billing:n})=>{const{cartTotal:a,currency:r}=n,o=(0,s.useRef)(null),{onPaymentSetup:l}=e;return(0,s.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,i.jsxs)("div",{id:"shift4-payment-form",children:[(0,i.jsxs)("div",{className:"shift4-payment-field",children:[(0,i.jsx)("label",{className:"shift4-payment-number-label",children:"Card number"}),(0,i.jsx)("div",{className:"shift4-payment-input shift4-payment-number-input","data-shift4":"number"})]}),(0,i.jsxs)("div",{className:"shift4-payment-fields",children:[(0,i.jsxs)("div",{className:"shift4-payment-field",children:[(0,i.jsx)("label",{className:"shift4-payment-expiry-label",children:"Expiration"}),(0,i.jsx)("div",{className:"shift4-payment-input shift4-payment-expiry-input","data-shift4":"expiry"})]}),(0,i.jsxs)("div",{className:"shift4-payment-field",children:[(0,i.jsx)("label",{className:"shift4-payment-cvv-label",children:"Cvv"}),(0,i.jsx)("div",{className:"shift4-payment-input shift4-payment-cvv-input","data-shift4":"cvc"})]})]})]})},r=({onClick:e,onClose:t,onSubmit:n,billing:a,setExpressPaymentError:r})=>{const o=(0,s.useRef)(null),l=(0,s.useRef)(null),{cartTotal:d,currency:c}=a,p=(0,s.useRef)(null);(0,s.useEffect)((()=>{if(!window.shift4Initialised){const e=()=>{"function"==typeof initShift4&&(initShift4({paymentMethodDataRef:p}),window.shift4Initialised=!0)};window.shift4JsLoaded?e():document.addEventListener("shift4JsLoaded",e)}const e=l.current;return e&&e.addEventListener("click",f),()=>{e&&e.removeEventListener("click",f)}}),[]);const f=async()=>{e();try{const e=await window.shift4PayWithApplePay({value:(d.value/Math.pow(10,c.minorUnit)).toFixed(c.minorUnit),currency:c.code});o.current&&(o.current.value=JSON.stringify(e)),n()}catch(e){r(e),t()}};return(0,i.jsxs)("div",{children:[(0,i.jsx)("apple-pay-button",{id:"apple-pay-submit-button",buttonstyle:"black",type:"buy",locale:"en-US",class:"w-full",lang:"en-US",ref:l}),(0,i.jsx)("input",{type:"hidden",name:"shift4_applepay_token",ref:o})]})},{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,i.jsx)("p",{children:"Apple Pay (Shift4)"}),content:(0,i.jsx)(r,{}),canMakePayment:()=>!(!window.ApplePaySession||!window.ApplePaySession.canMakePayments())}),o({name:"shift4_card",label:d,content:(0,i.jsx)(a,{}),edit:(0,i.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