diff --git a/packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx b/packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx index 17a389e3a0..f6e555275c 100644 --- a/packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx +++ b/packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx @@ -66,19 +66,50 @@ export function getPaymentMethodTitle( logoUrl: '', titleText: methodName, }, - [PaymentMethodId.BraintreeVenmo]: { - logoUrl: method.logoUrl || '', - titleText: method.logoUrl ? '' : methodDisplayName, + [PaymentMethodType.GooglePay]: { + logoUrl: cdnPath('/img/payment-providers/google-pay.png'), + titleText: '', }, - [PaymentMethodId.BraintreePaypalCredit]: { - logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo_letter.svg'), - titleText: methodDisplayName, - subtitle: (props: PaymentMethodSubtitleProps): ReactNode => ( - + [PaymentMethodType.PayWithGoogle]: { + logoUrl: cdnPath('/img/payment-providers/google-pay.png'), + titleText: '', + }, + [PaymentMethodType.Barclaycard]: { + logoUrl: cdnPath( + `/img/payment-providers/barclaycard_${method.id.toLowerCase()}.png`, ), + titleText: '', }, - [PaymentMethodType.PaypalCredit]: { - logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo_letter.svg'), + [PaymentMethodId.AdyenV2]: { + logoUrl: `https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/${ + method.method === 'scheme' ? 'card' : method.method + }.svg`, + titleText: methodDisplayName, + }, + [PaymentMethodId.AdyenV3]: { + logoUrl: `https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/${ + method.method === 'scheme' ? 'card' : method.method + }.svg`, + titleText: methodDisplayName, + }, + [PaymentMethodId.Affirm]: { + logoUrl: cdnPath('/img/payment-providers/affirm-checkout-header.png'), + titleText: language.translate('payment.affirm_display_name_text'), + }, + [PaymentMethodId.Afterpay]: { + logoUrl: isExperimentEnabled(checkoutSettings, 'PROJECT-6993.change_afterpay_logo_for_us_stores') && storeCountryCode === 'US' ? cdnPath('/img/payment-providers/afterpay-new-us.svg') : cdnPath('/img/payment-providers/afterpay-badge-blackonmint.png'), + titleText: methodName, + }, + [PaymentMethodId.AmazonPay]: { + logoUrl: cdnPath('/img/payment-providers/amazon-header.png'), + titleText: '', + }, + [PaymentMethodId.ApplePay]: { + logoUrl: cdnPath('/modules/checkout/applepay/images/applepay-header@2x.png'), + titleText: '', + }, + [PaymentMethodId.Bolt]: { + logoUrl: '', titleText: methodDisplayName, }, [PaymentMethodId.BraintreeAch]: { @@ -89,78 +120,67 @@ export function getPaymentMethodTitle( logoUrl: method.logoUrl || '', titleText: methodDisplayName, }, - [PaymentMethodId.BigCommercePaymentsPayPal]: { - logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo.svg'), - titleText: '', - subtitle: (props: PaymentMethodSubtitleProps) => - }, - [PaymentMethodId.BigCommercePaymentsPayLater]: { + [PaymentMethodId.BraintreePayPal]: { logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo_letter.svg'), titleText: methodDisplayName, - subtitle: (props: PaymentMethodSubtitleProps) => - }, - [PaymentMethodId.BigCommercePaymentsAlternativeMethod]: { - logoUrl: method.logoUrl || '', - titleText: method.logoUrl ? '' : methodDisplayName, - }, - [PaymentMethodId.PaypalCommerce]: { - logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo.svg'), - titleText: '', - subtitle: (props: PaymentMethodSubtitleProps) => + subtitle: (props: PaymentMethodSubtitleProps): ReactNode => ( + + ), }, - [PaymentMethodId.PaypalCommerceCredit]: { + [PaymentMethodId.BraintreePaypalCredit]: { logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo_letter.svg'), titleText: methodDisplayName, - subtitle: (props: PaymentMethodSubtitleProps) => + subtitle: (props: PaymentMethodSubtitleProps): ReactNode => ( + + ), }, - [PaymentMethodId.PaypalCommerceAlternativeMethod]: { + [PaymentMethodId.BraintreeVenmo]: { logoUrl: method.logoUrl || '', titleText: method.logoUrl ? '' : methodDisplayName, }, - [PaymentMethodType.VisaCheckout]: { + [PaymentMethodId.BraintreeVisaCheckout]: { logoUrl: cdnPath('/img/payment-providers/visa-checkout.png'), titleText: methodName, }, - [PaymentMethodId.Affirm]: { - logoUrl: cdnPath('/img/payment-providers/affirm-checkout-header.png'), - titleText: language.translate('payment.affirm_display_name_text'), - }, - [PaymentMethodId.Afterpay]: { - logoUrl: isExperimentEnabled(checkoutSettings, 'PROJECT-6993.change_afterpay_logo_for_us_stores') && storeCountryCode === 'US' ? cdnPath('/img/payment-providers/afterpay-new-us.svg') : cdnPath('/img/payment-providers/afterpay-badge-blackonmint.png'), - titleText: methodName, + [PaymentMethodId.BigCommercePaymentsAlternativeMethod]: { + logoUrl: + method.id === PaymentMethodId.Klarna + ? cdnPath('/img/payment-providers/klarna.png') + : method.logoUrl || '', + titleText: method.logoUrl ? '' : methodDisplayName, }, - [PaymentMethodId.AmazonPay]: { - logoUrl: cdnPath('/img/payment-providers/amazon-header.png'), - titleText: '', + [PaymentMethodId.BigCommercePaymentsVenmo]: { + logoUrl: method.logoUrl || '', + titleText: method.logoUrl ? '' : methodDisplayName, }, - [PaymentMethodId.ApplePay]: { - logoUrl: cdnPath('/modules/checkout/applepay/images/applepay-header@2x.png'), + [PaymentMethodId.BigCommercePaymentsPayPal]: { + logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo.svg'), titleText: '', + subtitle: (props: PaymentMethodSubtitleProps) => }, - [PaymentMethodId.Bolt]: { - logoUrl: '', + [PaymentMethodId.BigCommercePaymentsPayLater]: { + logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo_letter.svg'), titleText: methodDisplayName, + subtitle: (props: PaymentMethodSubtitleProps) => + }, + [PaymentMethodId.Checkoutcom]: { + logoUrl: ['credit_card', 'card', 'checkoutcom'].includes(method.id) + ? '' + : cdnPath(`/img/payment-providers/checkoutcom_${method.id.toLowerCase()}.svg`), + titleText: methodName, }, [PaymentMethodId.Clearpay]: { logoUrl: cdnPath('/img/payment-providers/clearpay-header.png'), titleText: '', }, - [PaymentMethodType.GooglePay]: { - logoUrl: cdnPath('/img/payment-providers/google-pay.png'), - titleText: '', - }, - [PaymentMethodType.PayWithGoogle]: { - logoUrl: cdnPath('/img/payment-providers/google-pay.png'), - titleText: '', - }, [PaymentMethodId.Humm]: { logoUrl: cdnPath('/img/payment-providers/humm-checkout-header.png'), titleText: '', }, [PaymentMethodId.Klarna]: { logoUrl: method.initializationData?.enableBillie - ? cdnPath('/img/payment-providers/klarna-billie-header.png') - : cdnPath('/img/payment-providers/klarna-header.png'), + ? cdnPath('/img/payment-providers/klarna-billie-header.png') + : cdnPath('/img/payment-providers/klarna-header.png'), titleText: methodDisplayName, }, [PaymentMethodId.Laybuy]: { @@ -171,59 +191,50 @@ export function getPaymentMethodTitle( logoUrl: 'https://masterpass.com/dyn/img/acc/global/mp_mark_hor_blk.svg', titleText: '', }, - [PaymentMethodType.Paypal]: { - // TODO: method.id === PaymentMethodId.BraintreeVenmo should be removed after the PAYPAL-1380.checkout_button_strategies_update experiment removal + [PaymentMethodId.Mollie]: { logoUrl: - method.id === PaymentMethodId.BraintreeVenmo && method.logoUrl - ? method.logoUrl - : cdnPath('/img/payment-providers/paypalpaymentsprouk.png'), - titleText: '', - subtitle: (props: PaymentMethodSubtitleProps): ReactNode => ( - - ), - }, - [PaymentMethodId.Quadpay]: { - logoUrl: cdnPath('/img/payment-providers/quadpay.png'), - titleText: language.translate('payment.quadpay_display_name_text'), + method.method === 'credit_card' + ? '' + : cdnPath(`/img/payment-providers/mollie_${method.method}.svg`), + titleText: methodDisplayName, }, - [PaymentMethodId.Sezzle]: { - logoUrl: cdnPath('/img/payment-providers/sezzle-checkout-header.png'), - titleText: language.translate('payment.sezzle_display_name_text'), + [PaymentMethodId.PaypalCommerceAlternativeMethod]: { + logoUrl: method.logoUrl || '', + titleText: method.logoUrl ? '' : methodDisplayName, }, - [PaymentMethodId.Zip]: { - logoUrl: cdnPath('/img/payment-providers/zip.png'), - titleText: language.translate('payment.zip_display_name_text'), + [PaymentMethodId.PaypalCommerceVenmo]: { + logoUrl: method.logoUrl || '', + titleText: method.logoUrl ? '' : methodDisplayName, }, - [PaymentMethodType.Barclaycard]: { - logoUrl: cdnPath( - `/img/payment-providers/barclaycard_${method.id.toLowerCase()}.png`, - ), + [PaymentMethodId.PaypalCommerce]: { + logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo.svg'), titleText: '', + subtitle: (props: PaymentMethodSubtitleProps) => }, - [PaymentMethodId.AdyenV2]: { - logoUrl: `https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/${ - method.method === 'scheme' ? 'card' : method.method - }.svg`, + [PaymentMethodId.PaypalCommerceCredit]: { + logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo_letter.svg'), titleText: methodDisplayName, + subtitle: (props: PaymentMethodSubtitleProps) => }, - [PaymentMethodId.AdyenV3]: { - logoUrl: `https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/${ - method.method === 'scheme' ? 'card' : method.method - }.svg`, - titleText: methodDisplayName, + [PaymentMethodId.PaypalExpress]: { + logoUrl: method.logoUrl ? method.logoUrl : cdnPath('/img/payment-providers/paypalpaymentsprouk.png'), + titleText: '', }, - [PaymentMethodId.Mollie]: { - logoUrl: - method.method === 'credit_card' - ? '' - : cdnPath(`/img/payment-providers/mollie_${method.method}.svg`), + [PaymentMethodId.PaypalExpressCredit]: { + logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo_letter.svg'), titleText: methodDisplayName, }, - [PaymentMethodId.Checkoutcom]: { - logoUrl: ['credit_card', 'card', 'checkoutcom'].includes(method.id) - ? '' - : cdnPath(`/img/payment-providers/checkoutcom_${method.id.toLowerCase()}.svg`), - titleText: methodName, + [PaymentMethodId.Quadpay]: { + logoUrl: cdnPath('/img/payment-providers/quadpay.png'), + titleText: language.translate('payment.quadpay_display_name_text'), + }, + [PaymentMethodId.Ratepay]: { + logoUrl: method.logoUrl || '', + titleText: language.translate('payment.ratepay.payment_method_title'), + }, + [PaymentMethodId.Sezzle]: { + logoUrl: cdnPath('/img/payment-providers/sezzle-checkout-header.png'), + titleText: language.translate('payment.sezzle_display_name_text'), }, [PaymentMethodId.StripeV3]: { logoUrl: paymentWithLogo.includes(method.id) @@ -247,6 +258,10 @@ export function getPaymentMethodTitle( logoUrl: '', titleText: language.translate('payment.credit_debit_card_text'), }, + [PaymentMethodId.Zip]: { + logoUrl: cdnPath('/img/payment-providers/zip.png'), + titleText: language.translate('payment.zip_display_name_text'), + }, }; if (method.gateway === PaymentMethodId.BlueSnapDirect) { @@ -263,24 +278,6 @@ export function getPaymentMethodTitle( } } - if (method.id === PaymentMethodId.PaypalCommerceVenmo) { - return customTitles[PaymentMethodId.PaypalCommerceAlternativeMethod]; - } - - if ( - method.gateway === PaymentMethodId.BigCommercePaymentsAlternativeMethod && - method.id === PaymentMethodId.Klarna - ) { - return { - logoUrl: cdnPath('/img/payment-providers/klarna.png'), - titleText: methodDisplayName, - }; - } - - if (method.id === PaymentMethodId.BigCommercePaymentsVenmo) { - return customTitles[PaymentMethodId.BigCommercePaymentsAlternativeMethod]; - } - // KLUDGE: 'paypal' is actually a credit card method. It is the only // exception to the rule below. We should probably fix it on API level, // but apparently it would break LCO if we are not careful. @@ -291,10 +288,6 @@ export function getPaymentMethodTitle( return customTitles[PaymentMethodType.CreditCard]; } - if (method.id === PaymentMethodId.Ratepay) { - return { logoUrl: method.logoUrl || '', titleText: language.translate('payment.ratepay.payment_method_title') }; - } - return ( customTitles[method.gateway || ''] || customTitles[method.id] || diff --git a/packages/payment-integration-api/src/PaymentMethodId.ts b/packages/payment-integration-api/src/PaymentMethodId.ts index 0f9a80903f..aa71c6eb84 100644 --- a/packages/payment-integration-api/src/PaymentMethodId.ts +++ b/packages/payment-integration-api/src/PaymentMethodId.ts @@ -8,23 +8,29 @@ enum PaymentMethodId { Afterpay = 'afterpay', AmazonPay = 'amazonpay', ApplePay = 'applepay', + AuthorizeNetGooglePay = 'googlepayauthorizenet', Barclaycard = 'barclaycard', + BigCommercePaymentsAlternativeMethod = 'bigcommerce_payments_apms', + BigCommercePaymentsCreditCards = 'bigcommerce_payments_creditcards', + BigCommercePaymentsFastLane = 'bigcommerce_payments_fastlane', + BigCommercePaymentsGooglePay = 'googlepay_bigcommerce_payments', + BigCommercePaymentsPayPal = 'bigcommerce_payments_paypal', + BigCommercePaymentsPayLater = 'bigcommerce_payments_paylater', + BigCommercePaymentsVenmo = 'bigcommerce_payments_venmo', BlueSnapV2 = 'bluesnapv2', BlueSnapDirect = 'bluesnapdirect', + BNZGooglePay = 'googlepaybnz', Boleto = 'boleto', Bolt = 'bolt', Braintree = 'braintree', - BraintreeAch = 'braintreeach', - BraintreeVenmo = 'braintreevenmo', - AuthorizeNetGooglePay = 'googlepayauthorizenet', - BNZGooglePay = 'googlepaybnz', BraintreeAcceleratedCheckout = 'braintreeacceleratedcheckout', + BraintreeAch = 'braintreeach', BraintreeGooglePay = 'googlepaybraintree', - PayPalCommerceAcceleratedCheckout = 'paypalcommerceacceleratedcheckout', - PayPalCommerceGooglePay = 'googlepaypaypalcommerce', - BraintreeVisaCheckout = 'braintreevisacheckout', BraintreeLocalPaymentMethod = 'braintreelocalmethods', + BraintreePayPal = 'braintreepaypal', BraintreePaypalCredit = 'braintreepaypalcredit', + BraintreeVenmo = 'braintreevenmo', + BraintreeVisaCheckout = 'braintreevisacheckout', CBAMPGS = 'cba_mpgs', Checkoutcom = 'checkoutcom', CheckoutcomGooglePay = 'googlepaycheckoutcom', @@ -41,20 +47,16 @@ enum PaymentMethodId { Moneris = 'moneris', OrbitalGooglePay = 'googlepayorbital', Oxxo = 'oxxo', - PaypalExpress = 'paypalexpress', - PaypalPaymentsPro = 'paypal', PaypalCommerce = 'paypalcommerce', + PayPalCommerceAcceleratedCheckout = 'paypalcommerceacceleratedcheckout', + PaypalCommerceAlternativeMethod = 'paypalcommercealternativemethods', PaypalCommerceCredit = 'paypalcommercecredit', PaypalCommerceCreditCards = 'paypalcommercecreditcards', - PaypalCommerceAlternativeMethod = 'paypalcommercealternativemethods', + PayPalCommerceGooglePay = 'googlepaypaypalcommerce', PaypalCommerceVenmo = 'paypalcommercevenmo', - BigCommercePaymentsPayPal = 'bigcommerce_payments_paypal', - BigCommercePaymentsPayLater = 'bigcommerce_payments_paylater', - BigCommercePaymentsCreditCards = 'bigcommerce_payments_creditcards', - BigCommercePaymentsAlternativeMethod = 'bigcommerce_payments_apms', - BigCommercePaymentsVenmo = 'bigcommerce_payments_venmo', - BigCommercePaymentsFastLane = 'bigcommerce_payments_fastlane', - BigCommercePaymentsGooglePay = 'googlepay_bigcommerce_payments', + PaypalExpress = 'paypalexpress', + PaypalExpressCredit = 'paypalexpresscredit', + PaypalPaymentsPro = 'paypal', Qpay = 'qpay', Quadpay = 'quadpay', Ratepay = 'ratepay', @@ -67,10 +69,10 @@ enum PaymentMethodId { StripeOCSGooglePay = 'googlepaystripeocs', StripeV3 = 'stripev3', StripeUPE = 'stripeupe', + TdOnlineMartGooglePay = 'googlepaytdonlinemart', WorldpayAccess = 'worldpayaccess', WorldpayAccessGooglePay = 'googlepayworldpayaccess', Zip = 'zip', - TdOnlineMartGooglePay = 'googlepaytdonlinemart', } export default PaymentMethodId;