feat(payment): POC headless wallet buttons implementation #1999

bc-nick · 2025-02-26T19:04:24Z

What/Why?

POC of Headless Wallet Buttons feature

POC related to checkout-sdk part: bigcommerce/checkout-sdk-js#2742

Testing

headless_wallet_buttons_with_catalyst_sf.mov

changeset-bot · 2025-02-26T19:04:29Z

⚠️ No Changeset found

Latest commit: 5759535

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

vercel · 2025-02-26T19:04:30Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
catalyst-canary	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 24, 2025 8:36pm

4 Skipped Deployments

Name	Status	Preview	Updated (UTC)
catalyst	⬜️ Ignored (Inspect)		Mar 24, 2025 8:36pm
catalyst-au	⬜️ Ignored (Inspect)	Visit Preview	Mar 24, 2025 8:36pm
catalyst-soul	⬜️ Ignored (Inspect)	Visit Preview	Mar 24, 2025 8:36pm
catalyst-uk	⬜️ Ignored (Inspect)	Visit Preview	Mar 24, 2025 8:36pm

bc-nick · 2025-02-27T10:11:53Z

I'd like to provide some information:

core/public/v1 is the place where we will unload checkout-sdk build if we wont to develop locally, for this we need to run npm run build-cdn command and move all build files from dist-cdn/v1 folder to core/public/v1. For prod we are going to use CDN, here is this place
on the screen record in description we are not able redirect to checkout page properly, we are working on it now, this is an back-end issue
checkout-sdk part is not released yet, but in progress of implementation, POC of this part of work you can check here (build with this changes is using in this project)

Based on this PR will be created appropriate tickets when checkout-sdk part will be finished and released

animesh1987 · 2025-02-27T10:50:21Z

Hey @bc-nick are we going to copy paste all of sdk dist file code here?

Can we otherwise fetch the SDK button script from CDN?

bc-nick · 2025-02-27T11:33:16Z

Hey @bc-nick are we going to copy paste all of sdk dist file code here?

Can we otherwise fetch the SDK button script from CDN?

@animesh1987 it will be enough to copy paste only required files for local developing: loader.js and headless-checkout-wallet-....js

chanceaclark · 2025-03-07T16:39:05Z

core/middlewares/with-wallet-buttons-proxy-requests.ts

+    if (request.url.includes('/cart-information') && request.method === 'GET') {
+      const cartId = request.nextUrl.searchParams.get('cartId');
+
+      if (cartId) {
+        try {
+          const cart = await fetchCart(cartId);
+
+          return NextResponse.json(cart);
+        } catch (error) {
+          return NextResponse.json({ error });
+        }
+      }
+
+      return NextResponse.json(
+        { error: 'Invalid request body: cartId is not provided' },
+        { status: 400 },
+      );
+    }


After chatting offline, we should remove this entire middleware handler and move these blocks into route handlers.

For example, this block should be moved to core/app/api/(wallet-buttons)/cart-information/route.ts:

import { NextRequest, NextResponse } from 'next/server'; export const GET = async (request: NextRequest) => { const cartId = request.nextUrl.searchParams.get('cartId'); if (cartId) { try { const cart = await fetchCart(cartId); return NextResponse.json(cart); } catch (error) { return NextResponse.json({ error }); } } return NextResponse.json( { error: 'Invalid request body: cartId is not provided' }, { status: 400 }, ); };

core/next.config.ts

chanceaclark · 2025-03-07T16:43:58Z

core/vibes/soul/sections/cart/client.tsx

+          {walletButtons && (
+            <div className="mt-4">
+              <ClientWalletButtons walletButtons={walletButtons} />
+            </div>
+          )}


@migueloller @hunterbecton, do you think this is the right API to consume the wallet buttons in Vibes?

chanceaclark · 2025-03-07T16:45:24Z

core/public/v1/loader.js

As chatted about offline, these files are only for local development only. We will not need these files until bigcommerce/checkout-sdk-js#2742 is merged and deployed to the CDN. Leaving this comment to ensure we remove these files before merge.

Sure, I will remove this files

chanceaclark · 2025-03-10T15:11:56Z

core/lib/wallet-buttons/wallet-buttons-initializer.ts

I was going to comment on all the little changes I wanted in this core/lib/wallet-buttons but it got pretty long. Instead I have a branch of my vision of what I wanted to change PAYPAL-5114...chore/headless-wallets-cleanup

The main subjects:

Reduce the amount of indirections (too many files) to complete the task.

Passed the only information needed into the initializer (methodIds) to reduce surface area

Simplify the WalletButtonsInitializer class and remove any utilities + simplify types.

Only thing needed by the constructor was the url.

Moved the loader script URL into a private attribute.

Add a union of types for the different payment options. In practice, this usually helps remove a lot of conditional type checking in application code.

Reject initializing if the script element fails onerror + onabort.

Proper gql.tada usage, instead of using string template literals to inject dynamic data.

Removed additions to core/client/queries – when you remove items from middleware, just place the fetching in the same file as the route handlers.

thanks for the recommendations, I will take a look tomorrow and come back as soon as possible

I have made some updates regarding comments related to most of them

chanceaclark · 2025-03-10T15:16:24Z

core/client/queries/get-payment-wallet-with-initialization-data.ts

+  const graphQLQuery = graphql(`
+		query {
+			site {
+				paymentWalletWithInitializationData(filter: {paymentWalletEntityId: "${entityId}"}) {


This is not the proper way to pass in data in gql.tada queries, check around the codebase to see how to do it properly or check out this example PAYPAL-5114...chore/headless-wallets-cleanup#diff-d5e5c3bd2d9602afaf35db11c6adea51a6a29268df218fe0e76e3035a31d57c5R200-R227.

chanceaclark · 2025-03-14T14:35:45Z

core/middlewares/with-wallet-buttons-proxy-requests.ts

Can you check out the docs and experiment on how to properly add route handlers. I want to completely get rid of this middleware and route handlers solve that.

chanceaclark · 2025-03-14T14:39:03Z

core/components/wallet-buttons/index.tsx

This server component file is not even being used. Let's just move all the code from core/components/wallet-buttons/_components/client-wallet-buttons/index.tsx into this file.

This file is not used yet. But I left it in order to have opportunity render this component through server side. But I can remove it of course

Since checkout-sdk is client-side only, it doesn't really make sense to keep a server component.

chanceaclark · 2025-03-14T14:40:53Z

core/components/wallet-buttons/_actions/create-wallet-buttons-init-options.ts

This is not really a server action. Like in my example, can we just move this into page-data.ts and/or inline some of this in the page.tsx file (see my branch).

I will add this changes and let you know, thanks

chanceaclark · 2025-03-14T14:41:43Z

core/client/queries/get-payment-wallet-with-initialization-data.ts

All of these additional queries that were added can just be inlined inside the route handlers once you have them set up correctly.

Got you, thanks

Not all of them. This request will not be moved because it is using in another place.

I have removed middleware and switched to route api.

@chanceaclark do we really need to move all queries to the route handlers? It we do, I would like to suggest create a file for each of them app/api/wallet-buttons/.../query.ts to avoid a huge amount of code accumulating in one place. What do you think?

Let's just inline in each of the route handlers for now, we can optimize/move them later if it deems necessary.

chanceaclark · 2025-03-14T14:46:08Z

core/client/queries/get-cart.ts


-  const cart = response.data.site.cart;


This change seems unnecessary. Can we just destructure here instead of splitting the function in two separate functions? I understand you are trying to fetch the cart separately, but it looks like you just need the carts currency code. I would just create a separate query for the currency code, more inlined with the route handler that needs it.

const { cart, checkout } = response.data.site;

chanceaclark · 2025-03-14T14:50:58Z

core/app/[locale]/(default)/cart/_actions/redirect-to-checkout.ts

Why did we need to change this file? Seems like something we should avoid.

Because we do not need to work with form validation and with cart action in our case. We need to make a request for getting information about redirect_urls only and pass it to checkout-sdk.

I'd avoid changing the original function and make a separate function for what you need. Abstracting things is not always the best approach and it's fine to be duplicative at first.

chanceaclark · 2025-03-14T14:58:55Z

core/lib/wallet-buttons/utils.ts

The reason why my branch didn't have this util file is that it's a bit of a indirection. We should keep the API of WalletButtonsInitializer pretty slim, which means that it only needs to know about the methodIds that are needed. We can return the Option interface to the consumer to handle what it needs to.

The indirections I see:

-> fetch methods (app) -> getWalletButtonOptions (lib) -> pass to wallet buttons component (app) -> return options (lib) -> render components (app)

However, we can simplify this:

-> fetch methods (app) -> pass to wallet buttons component (app) -> initialize options (lib) -> render components (app)

It also means we don't have to handle the undefined case in our app, which adds complexity. We should handle this inside the lib and only return the type Option[]

Unfortunately this filter will not work correctly because the id's are different. But I think you are right about your approach. I will make some updates providing approach based on your's suggested and will let you know

What you have I think is way more complex than it should be. If the id's are different you can just change this data structure to be a record instead, then your initialize function returns an array:

const options: Record<string, Option> = { 'paypalcommerce.paypal': { methodId: 'paypalcommerce', containerId: 'paypalcommerce-button', paypalcommerce: { style: { color: 'gold', label: 'checkout' }, cartId: 'cartId', }, }, // ... }; // ... async initialize(methodIds: string[]): Promise<Option[]> { await this.initializeCheckoutKitLoader(); const checkoutButtonInitializer = await this.initCheckoutButtonInitializer(); return methodIds .map(methodId => options[methodId]) .filter(Boolean) .map((option) => { checkoutButtonInitializer.initializeHeadlessButton(option); return option; }); }

@chanceaclark I created class that works with that structure and return config with available wallet button options. This options may be different for each of the available buttons.

github-actions · 2025-03-24T20:38:05Z

⚡️🏠 Lighthouse report

Lighthouse ran against https://catalyst-canary-fggvp8r1u-bigcommerce-platform.vercel.app

🖥️ Desktop

We ran Lighthouse against the changes on a desktop and produced this report. Here's the summary:

Category	Score
🟢 Performance	96
🟢 Accessibility	92
🟠 Best practices	78
🟠 SEO	82

📱 Mobile

We ran Lighthouse against the changes on a mobile and produced this report. Here's the summary:

Category	Score
🟠 Performance	87
🟢 Accessibility	92
🟠 Best practices	78
🟠 SEO	85

bc-nick force-pushed the PAYPAL-5114 branch from 63c747d to cd6eba8 Compare February 26, 2025 22:51

vercel bot deployed to Preview – catalyst-canary February 26, 2025 22:53 View deployment

bc-nick changed the title ~~feat(payment): PAYPAL-5114 headless wallet buttons implementation~~ feat(payment): PAYPAL-5114 POC headless wallet buttons implementation Feb 27, 2025

bc-nick force-pushed the PAYPAL-5114 branch from cd6eba8 to 3e1d6b2 Compare February 27, 2025 11:35

vercel bot deployed to Preview – catalyst-canary February 27, 2025 11:37 View deployment

bc-nick force-pushed the PAYPAL-5114 branch from 3e1d6b2 to 295b928 Compare February 27, 2025 18:24

vercel bot deployed to Preview – catalyst-canary February 27, 2025 18:26 View deployment

bc-nick force-pushed the PAYPAL-5114 branch from 295b928 to 705a9f9 Compare March 5, 2025 18:35

vercel bot deployed to Preview – catalyst-canary March 5, 2025 18:37 View deployment

chanceaclark reviewed Mar 10, 2025

View reviewed changes

bc-nick force-pushed the PAYPAL-5114 branch from 705a9f9 to 5759535 Compare March 10, 2025 18:53

vercel bot deployed to Preview – catalyst-canary March 10, 2025 18:55 View deployment

vercel bot deployed to Preview – catalyst-canary March 14, 2025 14:21 View deployment

chanceaclark reviewed Mar 14, 2025

View reviewed changes

bc-nick added 3 commits March 19, 2025 15:12

feat(payment): PAYPAL-5114 currency, wallet buttons queries

63792cf

feat(payment): PAYPAL-5114 rebase canary

1e6bc1f

feat(payment): PAYPAL-5114 some updates regarding comments

234a185

bc-nick force-pushed the PAYPAL-5114 branch from 3a1bf85 to 234a185 Compare March 24, 2025 20:34

vercel bot deployed to Preview – catalyst-canary March 24, 2025 20:36 View deployment

chanceaclark changed the title ~~feat(payment): PAYPAL-5114 POC headless wallet buttons implementation~~ feat(payment): POC headless wallet buttons implementation Apr 1, 2025

bc-nick added the do not merge label May 14, 2025

feat(payment): POC headless wallet buttons implementation #1999

Are you sure you want to change the base?

feat(payment): POC headless wallet buttons implementation #1999

Uh oh!

Conversation

bc-nick commented Feb 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What/Why?

Testing

Uh oh!

changeset-bot bot commented Feb 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Feb 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bc-nick commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

animesh1987 commented Feb 27, 2025

Uh oh!

bc-nick commented Feb 27, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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!

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!

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!

github-actions bot commented Mar 24, 2025

bc-nick commented Feb 26, 2025 •

edited

Loading

changeset-bot bot commented Feb 26, 2025 •

edited

Loading

vercel bot commented Feb 26, 2025 •

edited

Loading

bc-nick commented Feb 27, 2025 •

edited

Loading