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,128 @@ 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 createWalletButtonsInitOptions = async (
+  walletButtons: string[],
+  cart: {
+    entityId: string;
+    currencyCode: string;
+  },
+) => {
+  const currencyData = await getCurrencyData(cart.currencyCode);
+
+  return Promise.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,
+        },
+      };
+    }),
+  );
+};
+
 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

@@ -10,7 +10,12 @@ 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 {
+  createWalletButtonsInitOptions,
+  getCart,
+  getPaymentWallets,
+  getShippingCountries,
+} from './page-data';
 
 interface Props {
   params: Promise<{ locale: string }>;
@@ -61,6 +66,14 @@ export default async function Cart({ params }: Props) {
     );
   }
 
+  const walletButtons = await getPaymentWallets({
+    filters: {
+      cartEntityId: cartId,
+    },
+  });
+
+  const walletButtonsInitOptions = await createWalletButtonsInitOptions(walletButtons, cart);
+
   const lineItems = [...cart.lineItems.physicalItems, ...cart.lineItems.digitalItems];
 
   const formattedLineItems = lineItems.map((item) => ({
@@ -249,6 +262,7 @@ export default async function Cart({ params }: Props) {
         }}
         summaryTitle={t('CheckoutSummary.title')}
         title={t('title')}
+        walletButtonsInitOptions={walletButtonsInitOptions}
       />
       <CartViewed
         currencyCode={cart.currencyCode}

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

@@ -0,0 +1,41 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import { WalletButtonsInitializer } from '~/lib/wallet-buttons';
+import { InitializeButtonProps } from '~/lib/wallet-buttons/types';
+
+export const ClientWalletButtons = ({
+  walletButtonsInitOptions,
+  cartId,
+}: {
+  walletButtonsInitOptions: InitializeButtonProps[];
+  cartId: string;
+}) => {
+  const isMountedRef = useRef(false);
+  const [buttons, setButtons] = useState<InitializeButtonProps[]>([]);
+
+  useEffect(() => {
+    if (!isMountedRef.current) {
+      isMountedRef.current = true;
+
+      const initWalletButtons = async () => {
+        const initializedButtons = await new WalletButtonsInitializer().initialize(
+          walletButtonsInitOptions,
+        );
+
+        setButtons(initializedButtons);
+      };
+
+      void initWalletButtons();
+    }
+  }, [cartId, walletButtonsInitOptions]);
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'end', flexDirection: 'column' }}>
+      {buttons.map((button) =>
+        button.containerId ? <div id={button.containerId} key={button.containerId} /> : null,
+      )}
+    </div>
+  );
+};

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,51 @@
+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.initializeHeadlessButton(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('headless-checkout-wallet');
+
+    return checkoutButtonModule.createHeadlessCheckoutWalletInitializer();
+  }
+}

core/lib/wallet-buttons/types.ts

@@ -0,0 +1,104 @@
+declare global {
+  interface Window {
+    checkoutKitLoader?: CheckoutKitLoader;
+  }
+}
+
+interface CheckoutKitLoader {
+  load(moduleName: string): Promise<CheckoutKitModule>;
+}
+
+interface CheckoutKitModule {
+  createHeadlessCheckoutWalletInitializer(props?: {
+    host?: string;
+  }): CheckoutHeadlessButtonInitializer;
+}
+
+interface CheckoutHeadlessButtonInitializer {
+  initializeHeadlessButton(option: InitializeButtonProps): void;
+}
+
+export interface InitializeButtonProps {
+  [key: string]: unknown;
+  containerId: string;
+  methodId: string;
+}
+
+export interface WalletInitializationData {
+  initializationData: null | string;
+  clientToken: null | string;
+}
+
+/**
+ *
+ * PayPal Commerce Style options
+ *
+ */
+
+export enum StyleButtonLabel {
+  paypal = 'paypal',
+  checkout = 'checkout',
+  buynow = 'buynow',
+  pay = 'pay',
+  installment = 'installment',
+}
+
+export enum StyleButtonColor {
+  gold = 'gold',
+  blue = 'blue',
+  silver = 'silver',
+  black = 'black',
+  white = 'white',
+}
+
+export enum StyleButtonShape {
+  pill = 'pill',
+  rect = 'rect',
+}
+
+export interface PayPalButtonStyleOptions {
+  color?: StyleButtonColor;
+  shape?: StyleButtonShape;
+  height?: number;
+  label?: StyleButtonLabel;
+}
+
+/**
+ *
+ * PayPal Commerce Funding sources
+ *
+ */
+export type FundingType = string[];
+export type EnableFundingType = FundingType | string;
+
+/**
+ *
+ * PayPal Commerce Initialization Data
+ *
+ */
+export interface PayPalCommerceInitializationData {
+  attributionId?: string;
+  availableAlternativePaymentMethods: FundingType;
+  buttonStyle?: PayPalButtonStyleOptions;
+  buyerCountry?: string;
+  clientId: string;
+  clientToken?: string;
+  enabledAlternativePaymentMethods: FundingType;
+  isDeveloperModeApplicable?: boolean;
+  intent?: PayPalCommerceIntent;
+  isAcceleratedCheckoutEnabled?: boolean;
+  isHostedCheckoutEnabled?: boolean;
+  isPayPalCreditAvailable?: boolean;
+  isVenmoEnabled?: boolean;
+  isGooglePayEnabled?: boolean;
+  merchantId?: string;
+  orderId?: string;
+  shouldRenderFields?: boolean;
+  shouldRunAcceleratedCheckout?: boolean;
+  paymentButtonStyles?: Record<string, PayPalButtonStyleOptions>;
+}
+
+export enum PayPalCommerceIntent {
+  AUTHORIZE = 'authorize',
+  CAPTURE = 'capture',
+}