feat(payment): PAYPAL-0 POC

Author: bc-nick

core/app/[locale]/(default)/cart/page-data.ts

@@ -1,8 +1,11 @@
+import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
+
 import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { FragmentOf, graphql, VariablesOf } from '~/client/graphql';
 import { getShippingZones } from '~/client/management/get-shipping-zones';
 import { TAGS } from '~/client/tags';
+import { getPreferredCurrencyCode } from '~/lib/currency';
 
 export const PhysicalItemFragment = graphql(`
   fragment PhysicalItemFragment on CartPhysicalItem {
@@ -262,6 +265,98 @@ export const getCart = async (variables: Variables) => {
   return data;
 };
 
+const PaymentWalletsQuery = graphql(`
+  query PaymentWalletsQuery($filters: PaymentWalletsFilterInput) {
+    site {
+      paymentWallets(filter: $filters) {
+        edges {
+          node {
+            entityId
+          }
+        }
+      }
+    }
+  }
+`);
+
+type PaymentWalletsVariables = VariablesOf<typeof PaymentWalletsQuery>;
+
+export const getPaymentWallets = async (variables: PaymentWalletsVariables) => {
+  const customerAccessToken = await getSessionCustomerAccessToken();
+
+  const { data } = await client.fetch({
+    document: PaymentWalletsQuery,
+    customerAccessToken,
+    fetchOptions: { cache: 'no-store' },
+    variables,
+  });
+
+  return removeEdgesAndNodes(data.site.paymentWallets).map(({ entityId }) => entityId);
+};
+
+const PaymentWalletWithInitializationDataQuery = graphql(`
+  query PaymentWalletWithInitializationDataQuery($entityId: String!, $cartId: String!) {
+    site {
+      paymentWalletWithInitializationData(
+        filter: { paymentWalletEntityId: $entityId, cartEntityId: $cartId }
+      ) {
+        clientToken
+        initializationData
+      }
+    }
+  }
+`);
+
+export const getPaymentWalletWithInitializationData = async (entityId: string, cartId: string) => {
+  const { data } = await client.fetch({
+    document: PaymentWalletWithInitializationDataQuery,
+    variables: {
+      entityId,
+      cartId,
+    },
+    customerAccessToken: await getSessionCustomerAccessToken(),
+    fetchOptions: { cache: 'no-store' },
+  });
+
+  return data.site.paymentWalletWithInitializationData;
+};
+
+const CurrencyQuery = graphql(`
+  query Currency($currencyCode: currencyCode!) {
+    site {
+      currency(currencyCode: $currencyCode) {
+        display {
+          decimalPlaces
+          symbol
+        }
+        name
+        code
+      }
+    }
+  }
+`);
+
+export const getCurrencyData = async (currencyCode?: string) => {
+  const code = await getPreferredCurrencyCode(currencyCode);
+
+  if (!code) {
+    throw new Error('Could not get currency code');
+  }
+
+  const customerAccessToken = await getSessionCustomerAccessToken();
+
+  const { data } = await client.fetch({
+    document: CurrencyQuery,
+    fetchOptions: { cache: 'no-store' },
+    variables: {
+      currencyCode: code,
+    },
+    customerAccessToken,
+  });
+
+  return data.site.currency;
+};
+
 export const getShippingCountries = async (geography: FragmentOf<typeof GeographyFragment>) => {
   const hasAccessToken = Boolean(process.env.BIGCOMMERCE_ACCESS_TOKEN);
   const shippingZones = hasAccessToken ? await getShippingZones() : [];

core/app/[locale]/(default)/cart/page.tsx

@@ -1,6 +1,7 @@
 import { Metadata } from 'next';
 import { getFormatter, getTranslations, setRequestLocale } from 'next-intl/server';
 
+import { Streamable } from '@/vibes/soul/lib/streamable';
 import { Cart as CartComponent, CartEmptyState } from '@/vibes/soul/sections/cart';
 import { getCartId } from '~/lib/cart';
 import { exists } from '~/lib/utils';
@@ -10,7 +11,13 @@ import { updateCouponCode } from './_actions/update-coupon-code';
 import { updateLineItem } from './_actions/update-line-item';
 import { updateShippingInfo } from './_actions/update-shipping-info';
 import { CartViewed } from './_components/cart-viewed';
-import { getCart, getShippingCountries } from './page-data';
+import {
+  getCart,
+  getCurrencyData,
+  getPaymentWallets,
+  getPaymentWalletWithInitializationData,
+  getShippingCountries,
+} from './page-data';
 
 interface Props {
   params: Promise<{ locale: string }>;
@@ -26,6 +33,36 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
+const createWalletButtonsInitOptions = async (
+  walletButtons: string[],
+  cart: {
+    entityId: string;
+    currencyCode: string;
+  },
+) => {
+  const currencyData = await getCurrencyData(cart.currencyCode);
+
+  return Streamable.all(
+    walletButtons.map(async (entityId) => {
+      const initData = await getPaymentWalletWithInitializationData(entityId, cart.entityId);
+      const methodId = entityId.split('.').join('');
+
+      return {
+        methodId,
+        containerId: `${methodId}-button`,
+        [methodId]: {
+          cartId: cart.entityId,
+          currency: {
+            code: currencyData?.code,
+            decimalPlaces: currencyData?.display.decimalPlaces,
+          },
+          ...initData,
+        },
+      };
+    }),
+  );
+};
+
 // eslint-disable-next-line complexity
 export default async function Cart({ params }: Props) {
   const { locale } = await params;
@@ -61,6 +98,16 @@ export default async function Cart({ params }: Props) {
     );
   }
 
+  const walletButtons = await getPaymentWallets({
+    filters: {
+      cartEntityId: cartId,
+    },
+  });
+
+  const walletButtonsInitOptions = Streamable.from(() =>
+    createWalletButtonsInitOptions(walletButtons, cart),
+  );
+
   const lineItems = [...cart.lineItems.physicalItems, ...cart.lineItems.digitalItems];
 
   const formattedLineItems = lineItems.map((item) => ({
@@ -249,6 +296,7 @@ export default async function Cart({ params }: Props) {
         }}
         summaryTitle={t('CheckoutSummary.title')}
         title={t('title')}
+        walletButtonsInitOptions={walletButtonsInitOptions}
       />
       <CartViewed
         currencyCode={cart.currencyCode}

core/app/api/wallets/graphql/route.ts

@@ -29,6 +29,33 @@ const ENABLE_LIST = [
       },
     },
   },
+  {
+    name: 'CheckoutRedirectMutation',
+    type: 'mutation',
+    allowedFields: {
+      cart: {
+        createCartRedirectUrls: true,
+      },
+    },
+  },
+  {
+    name: 'AddCheckoutBillingAddressMutation',
+    type: 'mutation',
+    allowedFields: {
+      checkout: {
+        billingAddress: true,
+      },
+    },
+  },
+  {
+    name: 'UpdateCheckoutBillingAddressMutation',
+    type: 'mutation',
+    allowedFields: {
+      checkout: {
+        billingAddress: true,
+      },
+    },
+  },
 ];
 
 export const POST = async (request: NextRequest) => {
@@ -66,7 +93,7 @@ export const POST = async (request: NextRequest) => {
     errorPolicy: 'ignore',
   });
 
-  return new Response(JSON.stringify(response.data), {
+  return new Response(JSON.stringify(response), {
     status: 200,
     headers: { 'Content-Type': 'application/json' },
   });

core/components/wallet-buttons/_components/client-wallet-buttons/index.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+import { Stream, Streamable, useStreamable } from '@/vibes/soul/lib/streamable';
+import { WalletButtonsInitializer } from '~/lib/wallet-buttons';
+import { InitializeButtonProps } from '~/lib/wallet-buttons/types';
+
+export const ClientWalletButtons = ({
+  walletButtonsInitOptions,
+  cartId,
+}: {
+  walletButtonsInitOptions: Streamable<InitializeButtonProps[]>;
+  cartId: string;
+}) => {
+  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]);
+
+  return (
+    <Stream fallback={null} value={walletButtonsInitOptions}>
+      {(buttonOptions) => (
+        <div style={{ display: 'flex', alignItems: 'end', flexDirection: 'column' }}>
+          {buttonOptions.map((button) =>
+            button.containerId ? <div id={button.containerId} key={button.containerId} /> : null,
+          )}
+        </div>
+      )}
+    </Stream>
+  );
+};

core/lib/currency.ts

@@ -5,9 +5,9 @@ import { cookies } from 'next/headers';
 import type { CurrencyCode } from '~/components/header/fragment';
 import { CurrencyCodeSchema } from '~/components/header/schema';
 
-export async function getPreferredCurrencyCode(): Promise<CurrencyCode | undefined> {
+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;
 
   if (!currencyCode) {
     return undefined;

core/lib/wallet-buttons/error.ts

@@ -0,0 +1,9 @@
+export class InitializationError extends Error {
+  constructor() {
+    super(
+      'Unable to initialize the checkout button because the required script has not been loaded yet.',
+    );
+
+    this.name = 'InitializationError';
+  }
+}

core/lib/wallet-buttons/index.ts

@@ -0,0 +1,53 @@
+import { InitializationError } from './error';
+import { InitializeButtonProps } from './types';
+
+export class WalletButtonsInitializer {
+  private origin = window.location.origin;
+  private checkoutSdkUrl = `${this.origin}/v1/loader.js`;
+
+  async initialize(
+    walletButtonsInitOptions: InitializeButtonProps[],
+  ): Promise<InitializeButtonProps[]> {
+    await this.initializeCheckoutKitLoader();
+
+    const checkoutButtonInitializer = await this.initCheckoutButtonInitializer();
+
+    return walletButtonsInitOptions.map((buttonOption) => {
+      checkoutButtonInitializer.initializeWalletButton(buttonOption);
+
+      return buttonOption;
+    });
+  }
+
+  private async initializeCheckoutKitLoader(): Promise<void> {
+    if (window.checkoutKitLoader) {
+      return;
+    }
+
+    await new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+
+      script.type = 'text/javascript';
+      script.defer = true;
+      script.src = this.checkoutSdkUrl;
+
+      script.onload = resolve;
+      script.onerror = reject;
+      script.onabort = reject;
+
+      document.body.append(script);
+    });
+  }
+
+  private async initCheckoutButtonInitializer() {
+    if (!window.checkoutKitLoader) {
+      throw new InitializationError();
+    }
+
+    const checkoutButtonModule = await window.checkoutKitLoader.load('wallet-button');
+
+    return checkoutButtonModule.createWalletButtonInitializer({
+      graphQLEndpoint: 'api/wallets/graphql',
+    });
+  }
+}

core/lib/wallet-buttons/types.ts

@@ -0,0 +1,25 @@
+declare global {
+  interface Window {
+    checkoutKitLoader?: CheckoutKitLoader;
+  }
+}
+
+interface CheckoutKitLoader {
+  load(moduleName: string): Promise<CheckoutKitModule>;
+}
+
+interface CheckoutKitModule {
+  createWalletButtonInitializer(options: {
+    graphQLEndpoint: string;
+  }): CheckoutHeadlessButtonInitializer;
+}
+
+interface CheckoutHeadlessButtonInitializer {
+  initializeWalletButton(option: InitializeButtonProps): void;
+}
+
+export interface InitializeButtonProps {
+  [key: string]: unknown;
+  containerId: string;
+  methodId: string;
+}