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()