feat(payment): PAYPAL-6499 add wallet buttons by bc-yaroslav-zhmutskyi · Pull Request #3062 · bigcommerce/catalyst

bc-yaroslav-zhmutskyi · 2026-06-24T08:59:17Z

What/Why?

Add wallet button integration for cart page

Testing

Manual

video_paypal.mp4

Migration

No need

changeset-bot · 2026-06-24T08:59:22Z

🦋 Changeset detected

Latest commit: fb2e096

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@bigcommerce/catalyst-core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2026-06-24T08:59:24Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
catalyst	Ready	Preview, Comment	Jul 9, 2026 1:10pm

github-actions · 2026-06-24T09:00:31Z

Bundle Size Report

Comparing against baseline from 2b7f2cc (2026-07-09).

Metric	Baseline	Current	Delta
Total JS	446.1 kB	447.1 kB	+1 kB (+0.2%)

Per-Route First Load JS

Route	Baseline	Current	Delta
/(default)/cart/page	347.2 kB	348.3 kB	+1.1 kB (+0.3%)

Threshold: 5% increase. Routes with ⚠️ exceed the threshold.

github-actions · 2026-06-24T09:56:46Z

Unlighthouse Performance Comparison — Vercel

Comparing PR preview deployment Unlighthouse scores vs production Unlighthouse scores.

Summary Score

Aggregate score across all categories as reported by Unlighthouse.

	Prod Desktop	Prod Mobile	Preview Desktop	Preview Mobile
Score	89	92	92	94

Category Scores

Category	Prod Desktop	Prod Mobile	Preview Desktop	Preview Mobile
Performance	74	83	74	69
Accessibility	95	92	95	95
Best Practices	100	100	100	100
SEO	88	100	100	100

Core Web Vitals

Metric	Prod Desktop	Prod Mobile	Preview Desktop	Preview Mobile
LCP	3.7 s	4.7 s	3.7 s	5.7 s
CLS	0.049	0	0.001	0.19
FCP	1.1 s	1.1 s	1.2 s	1.2 s
TBT	10 ms	0 ms	10 ms	0 ms
Max Potential FID	60 ms	40 ms	70 ms	50 ms
Time to Interactive	3.7 s	4.7 s	6.1 s	5.7 s

Full Unlighthouse report →

bc-nick · 2026-07-03T11:38:54Z

 # Disable automatic fetch instrumentation (not recommended unless using custom instrumentation)
 # NEXT_OTEL_FETCH_DISABLED=1
+
+# Checkout SDK loader URL used in local development for wallet buttons.


Mention that the related files should be places in the core/public/v1 folder to be able use them via next server in dev mode

bc-nick · 2026-07-03T13:41:17Z

Also can you please provide some information regarding how the release environment works here? How the release flow should be managed in our case? Probably it should be covered by exp or something before merging.

bc-yaroslav-zhmutskyi · 2026-07-13T12:28:15Z

Also can you please provide some information regarding how the release environment works here? How the release flow should be managed in our case? Probably it should be covered by exp or something before merging.

Our changes will be covered by experiment on backend side storefront service and will be disabled in prod for now.
Canary branch containing the latest code in development and the most recent commit may not be stable. After merge of this PR we will need to create release

bc-nick

LGMT

chanceaclark · 2026-07-14T15:56:32Z

+export async function getPreferredCurrencyCode(code?: string): Promise<CurrencyCode | undefined> {
  const cookieStore = await cookies();
-  const currencyCode = cookieStore.get('currencyCode')?.value;
+  const currencyCode = cookieStore.get('currencyCode')?.value || code;


cookie || code means the cookie always overrides the code arg, so getCurrencyData(cart.currencyCode) can get silently overridden by a stale currency cookie. Cart currency's fixed at creation, so this can mismatch amount vs currency on the wallet button. I would say leave this helper's signature alone (~20 other call sites) and just do (await getPreferredCurrencyCode()) ?? currencyCode inline in getCurrencyData.

chanceaclark · 2026-07-14T15:56:53Z

+  const isMountedRef = useRef(false);
+  const initButtonProps = useStreamable(walletButtonsInitOptions);
+
+  useEffect(() => {
+    if (!isMountedRef.current && initButtonProps.length) {
+      isMountedRef.current = true;
+
+      const initWalletButtons = async () => {
+        await new WalletButtonsInitializer().initialize(initButtonProps);
+      };
+
+      void initWalletButtons();
+    }
+  }, [cartId, initButtonProps]);


isMountedRef makes this a one-shot init forever. Deps [cartId, initButtonProps] say "re-run on change," but the ref blocks that after the first run, so a quantity change won't update the PayPal amount. I would fix this before merge.

chanceaclark · 2026-07-14T15:57:12Z

+      isMountedRef.current = true;
+
+      const initWalletButtons = async () => {
+        await new WalletButtonsInitializer().initialize(initButtonProps);
+      };
+
+      void initWalletButtons();


isMountedRef gets set before initialize() resolves, and void initWalletButtons() has no .catch. If the SDK script fails to load, that rejection's swallowed and it never retries, wallet buttons just silently never show up. Worth a .catch that resets the ref.

chanceaclark · 2026-07-14T15:57:16Z

+  cartId: string;
+}) => {
+  const isMountedRef = useRef(false);
+  const initButtonProps = useStreamable(walletButtonsInitOptions);


This runs outside the <Stream fallback={null}> boundary below, so a rejected promise throws into render instead of degrading gracefully like the fallback implies. Might be worth moving the unwrap inside Stream's render prop.

chanceaclark · 2026-07-14T15:57:19Z

+      {(buttonOptions) => (
+        <div style={{ display: 'flex', alignItems: 'end', flexDirection: 'column' }}>
+          {buttonOptions.map((button) =>
+            button.containerId ? <div id={button.containerId} key={button.containerId} /> : null,


Nit: containerId is required and always set, so : null here is dead. Could just be buttonOptions.map((button) => <div id={button.containerId} key={button.containerId} />).

chanceaclark · 2026-07-14T15:57:58Z

+type PaymentWalletsVariables = VariablesOf<typeof PaymentWalletsQuery>;
+
+export const getPaymentWallets = async (variables: PaymentWalletsVariables) => {
+  const customerAccessToken = await getSessionCustomerAccessToken();


getSessionCustomerAccessToken isn't cache()'d, so with N wallets it decodes the session N+2 times per render. Might be worth wrapping it in cache().

chanceaclark · 2026-07-14T15:58:12Z

     * - robots.txt (robots route)
     */
-    '/((?!api|admin|_next/static|_next/image|_vercel|favicon.ico|xmlsitemap.php|sitemap.xml|robots.txt).*)',
+    '/((?!api|admin|_next/static|_next/image|v1|_vercel|favicon.ico|xmlsitemap.php|sitemap.xml|robots.txt).*)',


This v1 isn't segment-anchored, so it'll match any slug starting with "v1" (e.g. /v1-turbo-kit), not just the loader path. Might want v1/ instead.

chanceaclark · 2026-07-14T15:58:42Z

  GiftCertificateCodeFormState,
 } from '@/vibes/soul/sections/cart/gift-certificate-code-form';
 import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
+import { ClientWalletButtons } from 'components/wallet-buttons';


Two things: this import should be ~/components/wallet-buttons like the rest of the file. Also, vibes/soul's supposed to stay presentation-only, this pulls in app-level wallet logic plus a cartId prop. Could pass ClientWalletButtons in as a ReactNode slot instead (see product-detail's additionalActions).

chanceaclark · 2026-07-14T16:02:48Z

+    const checkoutButtonModule = await window.checkoutKitLoader.load('wallet-button');
+
+    return checkoutButtonModule.createWalletButtonInitializer({
+      graphQLEndpoint: '/graphql',


We probably should react to the trailing slash environment variable and append it if it's enabled.

chanceaclark · 2026-07-14T16:20:16Z

+# Checkout SDK loader URL used in local development for wallet buttons.
+# In non-development environments the production CDN loader is always used.
+# Related files can be placed in core/public/v1 so they are served by the Next server in dev mode
+NEXT_PUBLIC_CHECKOUT_SDK_DEV_URL=http://localhost:3000/v1/loader.js


Can we avoid having to drop the file in the local Catalyst folder? My thoughts here is that since you are trying to make changes in both repos, you can have two separate running dev processes:

In Catalyst, http://localhost:3000/...

In checkout-sdk-js, http://localhost:3001/v1/loader.js

This way we can get rid of the proxy.ts change below, you can make changes in both repos without having to rebuild, we don't need to drop a file into core/public/.

bc-yaroslav-zhmutskyi requested a review from a team as a code owner June 24, 2026 08:59

bc-yaroslav-zhmutskyi marked this pull request as draft June 24, 2026 08:59

bc-yaroslav-zhmutskyi force-pushed the PAYPAL-6499 branch from 574a0b4 to 75cfe8a Compare June 24, 2026 09:14

vercel Bot deployed to Preview June 24, 2026 09:14 View deployment

bc-yaroslav-zhmutskyi force-pushed the PAYPAL-6499 branch from 75cfe8a to 210c887 Compare June 30, 2026 10:22

vercel Bot deployed to Preview June 30, 2026 10:23 View deployment

bc-yaroslav-zhmutskyi marked this pull request as ready for review June 30, 2026 13:27

bc-yaroslav-zhmutskyi force-pushed the PAYPAL-6499 branch from 210c887 to ecf5807 Compare July 1, 2026 21:00

vercel Bot deployed to Preview July 1, 2026 21:01 View deployment

bc-yaroslav-zhmutskyi force-pushed the PAYPAL-6499 branch from ecf5807 to 82c8ffb Compare July 1, 2026 21:57

vercel Bot deployed to Preview July 1, 2026 21:58 View deployment

bc-nick reviewed Jul 3, 2026

View reviewed changes

bc-vivekaggarwal mentioned this pull request Jul 5, 2026

feat(promotions): PROMO-1507 add featured promotions callout to pdp and plp #3057

Merged

feat(payment): PAYPAL-6499 add wallet buttons integration

fb2e096

bc-yaroslav-zhmutskyi force-pushed the PAYPAL-6499 branch from 82c8ffb to fb2e096 Compare July 9, 2026 13:09

vercel Bot deployed to Preview July 9, 2026 13:10 View deployment

bc-nick approved these changes Jul 13, 2026

View reviewed changes

chanceaclark reviewed Jul 14, 2026

View reviewed changes

Uh oh!

Conversation

bc-yaroslav-zhmutskyi commented Jun 24, 2026 • edited by chanceaclark Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What/Why?

Testing

Migration

Uh oh!

changeset-bot Bot commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel Bot commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Size Report

Per-Route First Load JS

Uh oh!

github-actions Bot commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlighthouse Performance Comparison — Vercel

Summary Score

Category Scores

Core Web Vitals

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bc-nick commented Jul 3, 2026

Uh oh!

bc-yaroslav-zhmutskyi commented Jul 13, 2026

Uh oh!

bc-nick left a comment

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!

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!

3 participants

bc-yaroslav-zhmutskyi commented Jun 24, 2026 •

edited by chanceaclark

Loading

changeset-bot Bot commented Jun 24, 2026 •

edited

Loading

vercel Bot commented Jun 24, 2026 •

edited

Loading

github-actions Bot commented Jun 24, 2026 •

edited

Loading

github-actions Bot commented Jun 24, 2026 •

edited

Loading