feat(payment): PAYPAL-4867 POC of headless wallet buttons #2742

bc-nick · 2024-11-27T18:26:51Z

What?

POC of Headless Wallet Buttons

Why?

According to the purpose of the project

Testing / Proof

headless_demo_1.mov

@bigcommerce/team-checkout @bigcommerce/team-payments

bc-nick · 2024-11-27T20:20:30Z

packages/core/auto-export.config.json

+        {
+            "inputPath": "packages/*/src/index.ts",
+            "outputPath": "packages/core/src/generated/checkout-headless-button-strategies.ts",
+            "memberPattern": "^create.+HeadlessButtonStrategy$"


Need to think about the right pattern for headless strategies. test-core is failed because for button strategies we have the same substring (ButtonStrategy) as for headless button strategies in memberPattern field. For this reason, we do not have a unique token. Should be replaced with one of the following examples: HeadlessWalletStrategy, HeadlessStrategy or something like that

Maybe we can use HeadlessWalletStrategy here.

serhii-tkachenko · 2024-12-02T11:33:35Z

packages/core/src/cart/cart-action-creator.ts

+                const jwtToken = state.config.getStorefrontJwtToken();
+
+                if (!jwtToken) {
+                    throw new MissingDataError(MissingDataErrorType.MissingPaymentToken);


It might be better to check if this error fits here, since StorefrontJWTToken is not equals to PaymentToken

Yeap it is not difficult to switch it for another error. We can create a new one if we do not an appropriate

serhii-tkachenko · 2024-12-02T12:27:18Z

packages/core/src/cart/cart-action-creator.ts

+                    })
+                    .then((response) => {
+                        observer.next(
+                            createAction(CartActionType.LoadCartSucceeded, response.body),


Should we update LoadCartSucceeded with LoadCartEntitySucceeded? So in this case we will 100% sure that this action type is belong to current request

We can change the name if we wish, if necessary

serhii-tkachenko · 2024-12-02T12:56:05Z

packages/core/src/cart/cart-request-sender.ts

+
+        const mappedLineItems: LineItemMap = {
+            // @ts-ignore
+            physicalItems: lineItems.physicalItems.map((item) => ({


Should we handle digital items here as well?

Yes, not only digital items. We need to parse response and map it into a data regarding to Cart interface. I plan to make it after aligning the general functionality with Checkout team.

This looks fine, but we need to take care of all kinds of items in future, such as custom item.

serhii-tkachenko · 2024-12-02T12:57:50Z

packages/core/src/checkout-buttons/checkout-headless-button-initializer.ts

+import createCheckoutButtonSelectors from './create-checkout-button-selectors';
+
+@bind
+export default class CheckoutHeadlessButtonInitializer {


HeadlessCheckoutButtonInitializer looks better to me, since CheckoutButton is a type of a button (like user may process checkout flow through the button..)

Suggested change

export default class CheckoutHeadlessButtonInitializer {

export default class HeadlessCheckoutButtonInitializer {

I will keep that in mind

serhii-tkachenko · 2024-12-02T13:02:54Z

packages/core/src/checkout-buttons/create-checkout-headless-button-registry-v2.ts

There is no registry v1 for headless button, so we can update file name with create-headless-checkout-button-registry.ts

I will keep that in mind

serhii-tkachenko · 2024-12-02T13:39:54Z

packages/core/src/checkout-buttons/checkout-button-initializer-options.ts

@@ -1,4 +1,6 @@
 export default interface CheckoutButtonInitializerOptions {
    host?: string;
    locale?: string;
+    storefrontJwtToken?: string;
+    siteLink?: string;


Why siteLink should be created when we can use host instead of it? As far as I remember host is equal to site link

host is BC Control Panel
siteLink is the store url that we need to use making the right redirect on confirmation page

For production, we may create a new interface for the headless wallet buttons.

Do you mean host is the canonical URL, i.e.: https://store-{hash}.mybigcommerce.com, and siteUrl is the BC Checkout's site URL (not the headless storefront site URL)?

@davidchin yes, you are correct

@bc-peng do you mean create a file with the similar interface to this one and name it HeadlessWalletInitializerOptions?

Yeah, keep the existing checkout button unchanged, create a new one like HeadlessWalletInitializerOptions.

serhii-tkachenko · 2024-12-02T13:41:04Z

.../paypal-commerce-integration/src/paypal-commerce/paypal-commerce-headless-button-strategy.ts

+        }
+    }
+
+    private async onHostedCheckoutApprove(


This method should be available only in Phase 2 of this project

serhii-tkachenko · 2024-12-02T13:41:34Z

.../paypal-commerce-integration/src/paypal-commerce/paypal-commerce-headless-button-strategy.ts

+                this.onShippingOptionsChange(data),
+        };
+
+        const hostedCheckoutCallbacks = {


This can be removed

serhii-tkachenko · 2024-12-02T13:43:10Z

...ce-integration/src/paypal-commerce-credit/paypal-commerce-credit-headless-button-strategy.ts

+        const onShippingChangeCallbacks = {
+            onShippingAddressChange: (data: ShippingAddressChangeCallbackPayload) =>
+                this.onShippingAddressChange(data),
+            onShippingOptionsChange: (data: ShippingOptionChangeCallbackPayload) =>
+                this.onShippingOptionsChange(data),
+        };
+
+        const hostedCheckoutCallbacks = {
+            ...onShippingChangeCallbacks,
+            onApprove: (data: ApproveCallbackPayload, actions: ApproveCallbackActions) =>
+                this.onHostedCheckoutApprove(data, actions, methodId),
+        };


This part should be removed since it is outside of Headless WB Phase 1 scope

serhii-tkachenko · 2024-12-02T13:43:51Z

packages/paypal-commerce-integration/src/create-paypal-commerce-integration-service.ts


    return new PayPalCommerceIntegrationService(
-        createFormPoster(),
+        createFormPoster({ host: getSiteLink() }),


Can getHost be used here instead of getSiteLink?

#2742 (comment)

davidchin · 2024-12-05T23:33:23Z

packages/core/src/checkout-buttons/create-checkout-headless-button-registry-v2.ts

+    [key: string]: CheckoutButtonStrategyFactory<CheckoutButtonStrategy>;
+}
+
+export default function createCheckoutHeadlessButtonStrategyRegistry(


This function looks like a duplicate of createCheckoutButtonStrategyRegistry, except that the default value for checkoutButtonHeadlessStrategyFactories parameter is different. Instead of duplicating, could we just call createCheckoutButtonStrategyRegistry and pass it with defaultCheckoutHeadlessButtonStrategyFactories instead? It should work for both headless and non-headless because both implement the same interface.

bc-peng · 2024-12-05T23:24:38Z

packages/core/auto-export.config.json

+        {
+            "inputPath": "packages/*/src/index.ts",
+            "outputPath": "packages/core/src/generated/checkout-headless-button-strategies.ts",
+            "memberPattern": "^create.+HeadlessButtonStrategy$"


Maybe we can use HeadlessWalletStrategy here.

bc-peng · 2024-12-05T23:28:10Z

packages/core/src/cart/cart-request-sender.ts

+            ...response,
+            body: {
+                id: entityId,
+                // @ts-ignore


Could you please explain why do we have @ts-ignore here?

bc-peng · 2024-12-05T23:31:19Z

packages/core/src/cart/cart-action-creator.ts

+    constructor(private _cartRequestSender: CartRequestSender) {}
+
+    @cachableAction
+    loadCardEntity(


Is loadCardEntity the correct name? Or loadCart?

I will switch to your version. Thanks

bc-peng · 2024-12-05T23:35:56Z

packages/core/src/cart/cart-request-sender.ts

+
+        const mappedLineItems: LineItemMap = {
+            // @ts-ignore
+            physicalItems: lineItems.physicalItems.map((item) => ({


This looks fine, but we need to take care of all kinds of items in future, such as custom item.

bc-peng · 2024-12-05T23:37:16Z

packages/core/src/checkout-buttons/checkout-button-initializer-options.ts

@@ -1,4 +1,6 @@
 export default interface CheckoutButtonInitializerOptions {
    host?: string;
    locale?: string;
+    storefrontJwtToken?: string;
+    siteLink?: string;


For production, we may create a new interface for the headless wallet buttons.

bc-peng · 2024-12-05T23:38:53Z

packages/core/src/checkout-buttons/checkout-headless-button-initializer.ts

+     * @param options - Options for initializing the checkout button.
+     * @returns A promise that resolves to the current state.
+     */
+    initializeHeadlessButton(


Can you explain why we don't call this method, intialize?

What do you mean we do not call this method?

In other initializers, we refer to this method as initialize. I was wondering if there is a specific reason we didn't follow this pattern.

bc-peng · 2024-12-05T23:48:56Z

packages/core/src/payment-integration/default-payment-integration-service.ts

@@ -204,6 +205,17 @@ export default class DefaultPaymentIntegrationService implements PaymentIntegrat
        return buyNowCart;
    }

+    async loadCardEntity(


Suggested change

async loadCardEntity(

async loadCart(

davidchin · 2024-12-06T00:04:24Z

packages/core/src/cart/cart-request-sender.ts

+            },
+        };
+
+        return this._requestSender


It seems to me that we're making a cross-origin Ajax request from headless storefront to BC, which then returns a session token and set as a third party cookie. AFAIK, Safari blocks third party cookies. Could you test if the setup works for Safari?

Another point is, Catalyst creates carts on the server-side. Therefore, the browser does not have BC session cookie required to retrieve carts directly from the browser from BC. Could you also test if the setup works for Catalyst?

I believe the solution to both of these problems is to proxy GQL calls through Catalyst or a server-side middleware for non-Catalyst headless storefronts.

@davidchin we were aware about these kind of specific behaviour related cart creation process.
If cart was created by server-side we are not able to get any information by cart_id from browser, therefore customer have to make a cart creation request from browser in order to receive cookies. This point will be mentioned in documentation of headless wallet button.

For Safari's case we can avoid blocking of third party cookies by enabling/disabling the appropriate settings.
But Safari blocking it by default, we should think about a workaround

For Safari's case we can avoid blocking of third party cookies by enabling/disabling the appropriate settings.

Yes, but this is not a setting we have control over, as we can't force shoppers to relax their privacy setting. I think this issue is a blocker. If we can't make it work for Safari by default, we need to explore alternative options.

This point will be mentioned in documentation of headless wallet button.

I don't think documentation is sufficient as the solution won't be compatible with headless Catalyst, which creates carts on the server side.

It seems to me that to solve both of these problems, we shouldn't be calling the GQL API directly in the browser for headless storefronts. Instead, requests need to be routed through a server-side proxy, which in most cases will be the headless storefronts.

bc-nick · 2025-01-15T14:45:49Z

packages/core/src/cart/cart-request-sender.ts

+            .then(this.transformToCartResponse);
+    }
+
+    private transformToCartResponse(response: Response<LoadCartResponse>): Response<Cart> {


@davidchin @animesh1987 @bc-peng guys I would like to ask you to take a loot at this transformer much closer there are concerns I have encountered.

This transformer is going to be very large because here i am trying to transform response in an appropriate Cart interface to align with the current realisation of stored cart information.

There are a few problems from the current approach:

it is hard to support/maintain this code in the future

we do not have all required Cart fields information for properly transforming

double dependency with Cart interface

I would like to suggest creating a new Headless Cart reducer for avoiding bindings to Cart interface and all things above. What do you think?

Thanks for bringing this up, my suggestion is that we should not have this in the reducer since that's not the purpose of a reducer. I see this is to transform the response from the loadCart API to a cart here in request sender.

Maybe we can have something similar to this and all transform logic can be placed there.

Maybe you can also think of moving the transform method in the action creator and not in the request sender.

@animesh1987 Unfortunately we do not have all required information from response for properly transformation to Cart. For example we are not able to get coupons, customerId, email from GraphQL request but these fields are required in Cart. Can we just set default parameters for them in this case for properly transformation?

@animesh1987 Why I suggest creating a new reducer is because we can more easily manage this information. This reducer will only take the necessary information for Headless Wallet Buttons strategies

Hey @bc-nick what is the GQL endpoint we are calling here? Maybe we can call checkout GQL endpoint for the information you need once you have a cart.

bc-nick commented Nov 27, 2024

View reviewed changes

feat(payment): PAYPAL-4867 POC of headless wallet buttons

4f31e45

bc-nick force-pushed the PAYPAL-4867 branch from ce9e6e7 to 4f31e45 Compare November 27, 2024 20:56

serhii-tkachenko reviewed Dec 2, 2024

View reviewed changes

davidchin reviewed Dec 5, 2024

View reviewed changes

bc-peng reviewed Dec 5, 2024

View reviewed changes

davidchin reviewed Dec 6, 2024

View reviewed changes

feat(payment): PAYPAL-4867 refactoring, changes related to comments

df96d5d

bc-nick mentioned this pull request Dec 17, 2024

feat(payment): PAYPAL-4937 Update PaymentRequestSender with new GQL API #2754

Open

bc-nick commented Jan 15, 2025

View reviewed changes

	export default class CheckoutHeadlessButtonInitializer {
	export default class HeadlessCheckoutButtonInitializer {

feat(payment): PAYPAL-4867 POC of headless wallet buttons #2742

Are you sure you want to change the base?

feat(payment): PAYPAL-4867 POC of headless wallet buttons #2742

Conversation

bc-nick commented Nov 27, 2024 • edited Loading

What?

Why?

Testing / Proof

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bc-peng Dec 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bc-nick commented Nov 27, 2024 •

edited

Loading

bc-peng Dec 10, 2024 •

edited

Loading