Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
229 changes: 111 additions & 118 deletions packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I didn't left a comment for the change, then it was just sorted

Original file line number Diff line number Diff line change
Expand Up @@ -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 => (
<BraintreePaypalCreditBanner containerId='braintree-credit-banner-container' {...props} />
[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/[email protected]'),
titleText: '',
},
[PaymentMethodId.Bolt]: {
logoUrl: '',
titleText: methodDisplayName,
},
[PaymentMethodId.BraintreeAch]: {
Expand All @@ -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) => <BigCommercePaymentsPayLaterBanner {...props} />
},
[PaymentMethodId.BigCommercePaymentsPayLater]: {
[PaymentMethodId.BraintreePayPal]: {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is new. It was added to let only braintreepaypal and braintreepaypalcredit to have BraintreePaypalCreditBanner as a subtitle

logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo_letter.svg'),
titleText: methodDisplayName,
subtitle: (props: PaymentMethodSubtitleProps) => <BigCommercePaymentsPayLaterBanner {...props} />
},
[PaymentMethodId.BigCommercePaymentsAlternativeMethod]: {
logoUrl: method.logoUrl || '',
titleText: method.logoUrl ? '' : methodDisplayName,
},
[PaymentMethodId.PaypalCommerce]: {
logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo.svg'),
titleText: '',
subtitle: (props: PaymentMethodSubtitleProps) => <PaypalCommerceCreditBanner containerId='paypal-commerce-banner-container' {...props} />
subtitle: (props: PaymentMethodSubtitleProps): ReactNode => (
<BraintreePaypalCreditBanner containerId='braintree-credit-banner-container' {...props} />
),
},
[PaymentMethodId.PaypalCommerceCredit]: {
[PaymentMethodId.BraintreePaypalCredit]: {
logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo_letter.svg'),
titleText: methodDisplayName,
subtitle: (props: PaymentMethodSubtitleProps) => <PaypalCommerceCreditBanner containerId='paypal-commerce-credit-banner-container' {...props} />
subtitle: (props: PaymentMethodSubtitleProps): ReactNode => (
<BraintreePaypalCreditBanner containerId='braintree-credit-banner-container' {...props} />
),
},
[PaymentMethodId.PaypalCommerceAlternativeMethod]: {
[PaymentMethodId.BraintreeVenmo]: {
logoUrl: method.logoUrl || '',
titleText: method.logoUrl ? '' : methodDisplayName,
},
[PaymentMethodType.VisaCheckout]: {
[PaymentMethodId.BraintreeVisaCheckout]: {
Copy link
Contributor Author

@serhii-tkachenko serhii-tkachenko Oct 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PaymentMethodType.VisaCheckout -> PaymentMethodId.BraintreeVisaCheckout.

This was made to simplify understanding of the affiliation of the VisaCheckout payment method type.

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]: {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This method moved here just to avoid making unnecessary condition in the end of current method. Also the code will be easier to read.

logoUrl: method.logoUrl || '',
titleText: method.logoUrl ? '' : methodDisplayName,
},
[PaymentMethodId.ApplePay]: {
logoUrl: cdnPath('/modules/checkout/applepay/images/[email protected]'),
[PaymentMethodId.BigCommercePaymentsPayPal]: {
logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo.svg'),
titleText: '',
subtitle: (props: PaymentMethodSubtitleProps) => <BigCommercePaymentsPayLaterBanner {...props} />
},
[PaymentMethodId.Bolt]: {
logoUrl: '',
[PaymentMethodId.BigCommercePaymentsPayLater]: {
logoUrl: cdnPath('/img/payment-providers/paypal_commerce_logo_letter.svg'),
titleText: methodDisplayName,
subtitle: (props: PaymentMethodSubtitleProps) => <BigCommercePaymentsPayLaterBanner {...props} />
},
[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]: {
Expand All @@ -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 => (
<BraintreePaypalCreditBanner containerId='braintree-banner-container' {...props} />
),
},
[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]: {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as for BigCommercePaymentsVenmo

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) => <PaypalCommerceCreditBanner containerId='paypal-commerce-banner-container' {...props} />
},
[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) => <PaypalCommerceCreditBanner containerId='paypal-commerce-credit-banner-container' {...props} />
},
[PaymentMethodId.AdyenV3]: {
logoUrl: `https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/${
method.method === 'scheme' ? 'card' : method.method
}.svg`,
titleText: methodDisplayName,
[PaymentMethodId.PaypalExpress]: {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New one. It was created instead of PaymentMethodType.PayPal.

method: PaymentMethodType.PayPal also present for PayPalCommerce, BraintreePayPal and BigCommercePaymentsPayPal, however the list of providers already has their own title keys.

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]: {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New one. It was created instead of PaymentMethodType.PayPalCredit.

method: PaymentMethodType.PayPalCredit also present for PayPalCommerceCredit, BraintreePayPalCredit and BigCommercePaymentsPayLater, however the list of providers already has their own title keys.

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]: {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was moved from condition bellow. Does not know why it was not placed here in the past

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)
Expand All @@ -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) {
Expand All @@ -263,24 +278,6 @@ export function getPaymentMethodTitle(
}
}

if (method.id === PaymentMethodId.PaypalCommerceVenmo) {
Copy link
Contributor Author

@serhii-tkachenko serhii-tkachenko Oct 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to customTitles[PaymentMethodId.PaypalCommerceVenmo]

return customTitles[PaymentMethodId.PaypalCommerceAlternativeMethod];
}

if (
method.gateway === PaymentMethodId.BigCommercePaymentsAlternativeMethod &&
method.id === PaymentMethodId.Klarna
Copy link
Contributor Author

@serhii-tkachenko serhii-tkachenko Oct 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to customTitles[PaymentMethodId.BigCommercePaymentsAlternativeMethod]

) {
return {
logoUrl: cdnPath('/img/payment-providers/klarna.png'),
titleText: methodDisplayName,
};
}

if (method.id === PaymentMethodId.BigCommercePaymentsVenmo) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to customTitles[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.
Expand All @@ -291,10 +288,6 @@ export function getPaymentMethodTitle(
return customTitles[PaymentMethodType.CreditCard];
}

if (method.id === PaymentMethodId.Ratepay) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to customTitles[PaymentMethodId.Ratepay]

return { logoUrl: method.logoUrl || '', titleText: language.translate('payment.ratepay.payment_method_title') };
}

return (
customTitles[method.gateway || ''] ||
customTitles[method.id] ||
Expand Down
38 changes: 20 additions & 18 deletions packages/payment-integration-api/src/PaymentMethodId.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is new

BraintreePaypalCredit = 'braintreepaypalcredit',
BraintreeVenmo = 'braintreevenmo',
BraintreeVisaCheckout = 'braintreevisacheckout',
CBAMPGS = 'cba_mpgs',
Checkoutcom = 'checkoutcom',
CheckoutcomGooglePay = 'googlepaycheckoutcom',
Expand All @@ -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',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one is new

PaypalPaymentsPro = 'paypal',
Qpay = 'qpay',
Quadpay = 'quadpay',
Ratepay = 'ratepay',
Expand All @@ -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;