fix(payment): fixed the issue with triggering BraintreePaypalCreditBanner for BigCommercePayments provider and made made a little refactoring of customTitles #2631

serhii-tkachenko · 2025-10-10T15:54:49Z

What/Why?

Fixed the issue when BigCommercePayments provider used BraintreePaypalCreditBanner instead of BigCommercePaymentsPayLaterBanner component ;
Updated PaymentMethodIds file with BraintreePayPal, PayPalExpressCredit method ids in payments-integration-api package;
Updated getPaymentMethodTitle method in PaymentMethodTitle.tsx file:

now customTitles object sorted alphabetically based on PaymentMethodType and then by PaymentMethodId;
updated PaymentMethodType.PayPal -> PaymentMethodId.PayPalExpress and PaymentMethodType.PayPalCredit -> PaymentMethodId.PayPalExpressCredit;
created additional BraintreePayPal key to set direct method id for which BraintreePaypalCreditBanner should be rendered;
other items I will describe via comments in the PR;

Rollout/Rollback

Merge / revert

Testing

TODO:

as before, show the error in the console;
as after, show, that error in console does not exists anymore;
plus make screenshots of google pay, paypal, paylater methods;
check if braintree banners are working as expected;
check if bigcommerce payments banners are working as expected;
check if paypal express payment methods have valid titles;
check if paypal commerce ratepay title renders as expected;

…nner for bigcommerce payments provider and made made a little refactoring of customTitles

serhii-tkachenko · 2025-10-10T15:57:34Z

packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx

-                subtitle: (props: PaymentMethodSubtitleProps) => <BigCommercePaymentsPayLaterBanner {...props} />
-            },
-            [PaymentMethodId.BigCommercePaymentsPayLater]: {
+            [PaymentMethodId.BraintreePayPal]: {


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

serhii-tkachenko · 2025-10-10T16:00:12Z

packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx

                titleText: method.logoUrl ? '' : methodDisplayName,
            },
-            [PaymentMethodType.VisaCheckout]: {
+            [PaymentMethodId.BraintreeVisaCheckout]: {


PaymentMethodType.VisaCheckout -> PaymentMethodId.BraintreeVisaCheckout.

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

serhii-tkachenko · 2025-10-10T16:04:39Z

packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx

-            [PaymentMethodId.AmazonPay]: {
-                logoUrl: cdnPath('/img/payment-providers/amazon-header.png'),
-                titleText: '',
+            [PaymentMethodId.BigCommercePaymentsVenmo]: {


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

serhii-tkachenko · 2025-10-10T16:05:11Z

packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx

-            [PaymentMethodId.Zip]: {
-                logoUrl: cdnPath('/img/payment-providers/zip.png'),
-                titleText: language.translate('payment.zip_display_name_text'),
+            [PaymentMethodId.PaypalCommerceVenmo]: {


Same as for BigCommercePaymentsVenmo

serhii-tkachenko · 2025-10-10T16:07:50Z

packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx

-                    method.method === 'scheme' ? 'card' : method.method
-                }.svg`,
-                titleText: methodDisplayName,
+            [PaymentMethodId.PaypalExpress]: {


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.

serhii-tkachenko · 2025-10-10T16:08:27Z

packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx

-                    method.method === 'credit_card'
-                        ? ''
-                        : cdnPath(`/img/payment-providers/mollie_${method.method}.svg`),
+            [PaymentMethodId.PaypalExpressCredit]: {


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.

serhii-tkachenko · 2025-10-10T16:09:00Z

packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx

+                logoUrl: cdnPath('/img/payment-providers/quadpay.png'),
+                titleText: language.translate('payment.quadpay_display_name_text'),
+            },
+            [PaymentMethodId.Ratepay]: {


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

serhii-tkachenko · 2025-10-10T16:10:03Z

packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx

-
-        if (
-          method.gateway === PaymentMethodId.BigCommercePaymentsAlternativeMethod &&
-          method.id === PaymentMethodId.Klarna


Moved to customTitles[PaymentMethodId.BigCommercePaymentsAlternativeMethod]

serhii-tkachenko · 2025-10-10T16:10:43Z

packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx

            }
        }

-        if (method.id === PaymentMethodId.PaypalCommerceVenmo) {


Moved to customTitles[PaymentMethodId.PaypalCommerceVenmo]

serhii-tkachenko · 2025-10-10T16:11:02Z

packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx

-            };
-        }
-
-        if (method.id === PaymentMethodId.BigCommercePaymentsVenmo) {


Moved to customTitles[PaymentMethodId.BigCommercePaymentsVenmo]

serhii-tkachenko · 2025-10-10T16:11:25Z

packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx

            return customTitles[PaymentMethodType.CreditCard];
        }

-        if (method.id === PaymentMethodId.Ratepay) {


Moved to customTitles[PaymentMethodId.Ratepay]

serhii-tkachenko · 2025-10-10T16:11:43Z

packages/payment-integration-api/src/PaymentMethodId.ts

-    PayPalCommerceGooglePay = 'googlepaypaypalcommerce',
-    BraintreeVisaCheckout = 'braintreevisacheckout',
    BraintreeLocalPaymentMethod = 'braintreelocalmethods',
+    BraintreePayPal = 'braintreepaypal',


This is new

serhii-tkachenko · 2025-10-10T16:12:38Z

packages/payment-integration-api/src/PaymentMethodId.ts

-    BigCommercePaymentsFastLane = 'bigcommerce_payments_fastlane',
-    BigCommercePaymentsGooglePay = 'googlepay_bigcommerce_payments',
+    PaypalExpress = 'paypalexpress',
+    PaypalExpressCredit = 'paypalexpresscredit',


This one is new

serhii-tkachenko · 2025-10-10T16:14:05Z

packages/core/src/app/payment/paymentMethod/PaymentMethodTitle.tsx

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

fix(payment): fixed the issue with triggering BraintreePaypalCreditBa…

3bf14db

…nner for bigcommerce payments provider and made made a little refactoring of customTitles

serhii-tkachenko commented Oct 10, 2025

View reviewed changes

fix(payment): fixed the issue with triggering BraintreePaypalCreditBanner for BigCommercePayments provider and made made a little refactoring of customTitles #2631

Are you sure you want to change the base?

fix(payment): fixed the issue with triggering BraintreePaypalCreditBanner for BigCommercePayments provider and made made a little refactoring of customTitles #2631

Uh oh!

Conversation

serhii-tkachenko commented Oct 10, 2025

What/Why?

Rollout/Rollback

Testing

Uh oh!

Choose a reason for hiding this comment

Uh oh!

serhii-tkachenko Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

serhii-tkachenko Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

serhii-tkachenko Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

serhii-tkachenko Oct 10, 2025 •

edited

Loading

serhii-tkachenko Oct 10, 2025 •

edited

Loading

serhii-tkachenko Oct 10, 2025 •

edited

Loading