diff --git a/package.json b/package.json index 2c245c5..266adb3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "processout.js", - "version": "1.8.4", + "version": "1.8.5", "description": "ProcessOut.js is a JavaScript library for ProcessOut's payment processing API.", "scripts": { "build:processout": "tsc -p src/processout && uglifyjs --compress --keep-fnames --ie8 dist/processout.js -o dist/processout.js", diff --git a/src/dynamic-checkout/clients/apple-pay.ts b/src/dynamic-checkout/clients/apple-pay.ts index a0f3a66..e732a72 100644 --- a/src/dynamic-checkout/clients/apple-pay.ts +++ b/src/dynamic-checkout/clients/apple-pay.ts @@ -18,7 +18,7 @@ module ProcessOut { const applePayScript = document.createElement("script") applePayScript.src = applePaySdkUrl applePayScript.onload = () => { - buttonContainer.innerHTML = `` + buttonContainer.innerHTML = `` this.initializeApplePay(invoiceData, buttonContainer, getViewContainer) } @@ -83,7 +83,7 @@ module ProcessOut { this.paymentConfig.invoiceId, this.paymentConfig.invoiceDetails.return_url || null, ), - (err) => + err => DynamicCheckoutEventsUtils.dispatchApplePaySessionError( this.paymentConfig.invoiceId, err, @@ -91,12 +91,11 @@ module ProcessOut { ), ) - session.onpaymentauthorizedPostprocess = - () => - DynamicCheckoutEventsUtils.dispatchApplePayAuthorizedPostProcessEvent( - this.paymentConfig.invoiceId, - this.paymentConfig.invoiceDetails.return_url || null, - ) + session.onpaymentauthorizedPostprocess = () => + DynamicCheckoutEventsUtils.dispatchApplePayAuthorizedPostProcessEvent( + this.paymentConfig.invoiceId, + this.paymentConfig.invoiceDetails.return_url || null, + ) return session } @@ -197,7 +196,8 @@ module ProcessOut { invoiceId => { if (this.paymentConfig.showStatusMessage) { getViewContainer().appendChild( - new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig).element, + new DynamicCheckoutPaymentPendingView(this.processOutInstance, this.paymentConfig) + .element, ) } diff --git a/src/dynamic-checkout/clients/google-pay.ts b/src/dynamic-checkout/clients/google-pay.ts index ec43e81..32eb8c3 100644 --- a/src/dynamic-checkout/clients/google-pay.ts +++ b/src/dynamic-checkout/clients/google-pay.ts @@ -67,10 +67,17 @@ module ProcessOut { const googleClientScript = document.createElement("script") googleClientScript.src = googlePaySdkUrl googleClientScript.onload = () => { + const googlePayMethod = this.getGooglePayMethodData(invoiceData) + const merchantId = + googlePayMethod && googlePayMethod.googlepay + ? googlePayMethod.googlepay.gateway_merchant_id + : "" + const isSandbox = merchantId && merchantId.indexOf("test-") === 0 + this.googleClient = window.globalThis && window.globalThis.google ? new window.globalThis.google.payments.api.PaymentsClient({ - environment: DEBUG ? "TEST" : "PRODUCTION", + environment: DEBUG || isSandbox ? "TEST" : "PRODUCTION", }) : null @@ -93,7 +100,7 @@ module ProcessOut { .then(response => { if (response.result) { const button = this.googleClient.createButton({ - buttonColor: "default", + buttonColor: "white", buttonType: "plain", buttonRadius: 4, buttonSizeMode: "fill", diff --git a/src/dynamic-checkout/styles/default.ts b/src/dynamic-checkout/styles/default.ts index 62ca58c..40b107c 100644 --- a/src/dynamic-checkout/styles/default.ts +++ b/src/dynamic-checkout/styles/default.ts @@ -110,7 +110,7 @@ const defaultStyles = ` apple-pay-button { --apple-pay-button-width: 100%; - --apple-pay-button-height: 40px; + --apple-pay-button-height: 48px; --apple-pay-button-border-radius: 4px; --apple-pay-button-padding: 5px; --apple-pay-button-box-sizing: border-box; @@ -153,14 +153,14 @@ const defaultStyles = ` display: flex; flex-direction: column; align-items: flex-start; - gap: 20px; + gap: 10px; } .dco-saved-payment-methods-wrapper { width: 100%; display: flex; flex-direction: column; - gap: 8px; + gap: 10px; } .dco-saved-payment-method-button { @@ -169,19 +169,15 @@ const defaultStyles = ` justify-content: center; gap: 10px; width: 100%; - padding: 12px 16px; - border: 1px solid #dde0e3; + height: 48px; + padding: 0 16px; + border: 1px solid #000; border-radius: 4px; - background-color: #fff; + background-color: transparent; cursor: pointer; font-weight: 500; font-size: 0.9rem; font-family: inherit; - transition: background-color 0.2s; - } - - .dco-saved-payment-method-button:hover { - background-color: #F6F6F7; } .dco-saved-payment-method-button:disabled { @@ -210,12 +206,28 @@ const defaultStyles = ` .dco-wallet-checkout-wrapper { display: flex; + flex-direction: column; width: 100%; gap: 10px; } .dco-wallet-checkout-button { - flex: 1; + width: 100%; + } + + #google-pay-button-container { + height: 48px; + } + + #google-pay-button-container button { + border: 1px solid #000 !important; + border-radius: 4px !important; + outline: none !important; + background-color: #fff !important; + } + + #google-pay-button-container button:hover { + background-color: #fff !important; } .dco-regular-express-checkout-wrapper { @@ -238,7 +250,7 @@ const defaultStyles = ` display: flex; flex-direction: column; border: 1px solid #dde0e3; - border-radius: 4px; + border-radius: 12px; overflow: hidden; } @@ -472,8 +484,8 @@ const defaultStyles = ` .dco-payment-method-button-pay-button-spinner { width: 18px; height: 18px; - border: 3px solid #f2f2f2; - border-bottom-color: #bfbfbf; + border: 3px solid #ccc; + border-bottom-color: #333; border-radius: 50%; display: inline-block; box-sizing: border-box; @@ -592,6 +604,7 @@ const defaultStyles = ` width: 100%; align-items: center; justify-content: space-between; + margin-bottom: 10px; } .modal-box { diff --git a/src/dynamic-checkout/views/payment-methods.ts b/src/dynamic-checkout/views/payment-methods.ts index 52c8268..c7ee80b 100644 --- a/src/dynamic-checkout/views/payment-methods.ts +++ b/src/dynamic-checkout/views/payment-methods.ts @@ -120,8 +120,7 @@ module ProcessOut { const { walletPaymentMethods, expressPaymentMethods, regularPaymentMethods } = this.getPaymentMethodsElements() - const { expressCheckoutWrapper, walletCheckoutWrapper } = - this.getExpressCheckoutElements() + const { expressCheckoutWrapper, walletCheckoutWrapper } = this.getExpressCheckoutElements() const { regularPaymentMethodsSectionWrapper, regularPaymentMethodsList } = this.getRegularPaymentMethodsElements([...expressPaymentMethods, ...walletPaymentMethods]) @@ -405,7 +404,7 @@ module ProcessOut { "delete", `customers/${customerId}/tokens/${tokenId}`, {}, - (data) => { + data => { if (resolveOutcome(data) === OUTCOME.Failed) { DynamicCheckoutEventsUtils.dispatchDeletePaymentMethodErrorEvent( this.paymentConfig.invoiceId, @@ -473,8 +472,9 @@ module ProcessOut { this.createPaymentMethodsManager(expressCheckoutHeader) const nextFocusTarget = - (paymentManagerMethodsList.querySelector(".dco-delete-payment-method-button") as HTMLElement) || - (document.querySelector(".close-modal-btn") as HTMLElement) + (paymentManagerMethodsList.querySelector( + ".dco-delete-payment-method-button", + ) as HTMLElement) || (document.querySelector(".close-modal-btn") as HTMLElement) if (nextFocusTarget) { nextFocusTarget.focus()