add apple and google wallet standard methods

.changeset/fair-eyes-smile.md

@@ -0,0 +1,5 @@
+---
+"@godaddy/react": patch
+---
+
+Add standard google pay and apple pay payment methods using GDP

examples/nextjs/app/globals.css

@@ -1,26 +1 @@
 @import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}

packages/react/src/components/checkout/payment/checkout-buttons/applePay/godaddy.tsx

@@ -0,0 +1,263 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useCheckoutContext } from '@/components/checkout/checkout';
+import { useDraftOrderTotals } from '@/components/checkout/order/use-draft-order';
+import type {
+  TokenizeJs,
+  WalletError,
+} from '@/components/checkout/payment/types';
+import { useBuildPaymentRequest } from '@/components/checkout/payment/utils/use-build-payment-request';
+import {
+  PaymentProvider,
+  useConfirmCheckout,
+} from '@/components/checkout/payment/utils/use-confirm-checkout';
+import { useIsPaymentDisabled } from '@/components/checkout/payment/utils/use-is-payment-disabled';
+import { useLoadPoyntCollect } from '@/components/checkout/payment/utils/use-load-poynt-collect';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useGoDaddyContext } from '@/godaddy-provider';
+import { GraphQLErrorWithCodes } from '@/lib/graphql-with-errors';
+import { eventIds } from '@/tracking/events';
+import { TrackingEventType, track } from '@/tracking/track';
+import { PaymentMethodType } from '@/types';
+
+export function GoDaddyApplePayCheckoutButton() {
+  const { session, setCheckoutErrors, isConfirmingCheckout } =
+    useCheckoutContext();
+  const isPaymentDisabled = useIsPaymentDisabled();
+  const form = useFormContext();
+  const { isPoyntLoaded } = useLoadPoyntCollect();
+  const { godaddyPaymentsConfig } = useCheckoutContext();
+  const { t } = useGoDaddyContext();
+  const [isCollectLoading, setIsCollectLoading] = useState(true);
+  const [error, setError] = useState('');
+  const { data: totals } = useDraftOrderTotals();
+  const { poyntStandardRequest } = useBuildPaymentRequest();
+
+  const currencyCode = totals?.total?.currencyCode || 'USD';
+  const countryCode = session?.shipping?.originAddress?.countryCode || 'US';
+
+  const confirmCheckout = useConfirmCheckout();
+  const collect = useRef<TokenizeJs | null>(null);
+  const hasMounted = useRef(false);
+
+  const isDisabled = isConfirmingCheckout || isPaymentDisabled;
+
+  // Use a ref so the SDK's stale onClick closure always calls the latest handler
+  const handleApplePayClickRef = useRef<() => Promise<void>>(
+    async () => undefined
+  );
+
+  const handleApplePayClick = useCallback(async () => {
+    if (!poyntStandardRequest || isDisabled) return;
+
+    const valid = await form.trigger();
+    if (!valid) {
+      const firstError = Object.keys(form.formState.errors)[0];
+      if (firstError) {
+        form.setFocus(firstError);
+      }
+      return;
+    }
+
+    setCheckoutErrors(undefined);
+
+    collect?.current?.startApplePaySession(poyntStandardRequest);
+
+    track({
+      eventId: eventIds.applePayClick,
+      type: TrackingEventType.CLICK,
+      properties: {
+        paymentType: PaymentMethodType.APPLE_PAY,
+      },
+    });
+  }, [poyntStandardRequest, setCheckoutErrors, form, isDisabled]);
+
+  // Keep ref in sync so the SDK's stale onClick closure always calls the latest handler
+  handleApplePayClickRef.current = handleApplePayClick;
+
+  // Initialize the TokenizeJs instance when the component mounts
+  useEffect(() => {
+    if (
+      !collect.current &&
+      godaddyPaymentsConfig &&
+      (godaddyPaymentsConfig?.businessId || session?.businessId) &&
+      isCollectLoading &&
+      isPoyntLoaded &&
+      !hasMounted.current
+    ) {
+      collect.current = new (window as any).TokenizeJs(
+        {
+          businessId: godaddyPaymentsConfig?.businessId || session?.businessId,
+          storeId: session?.storeId,
+          channelId: session?.channelId,
+          applicationId: godaddyPaymentsConfig?.appId,
+        },
+        {
+          country: countryCode,
+          currency: currencyCode,
+          merchantName: session?.storeName || '',
+          requireEmail: false,
+          requireShippingAddress: false,
+          supportCouponCode: false,
+        }
+      );
+    }
+  }, [
+    godaddyPaymentsConfig,
+    countryCode,
+    currencyCode,
+    session?.businessId,
+    session?.storeId,
+    session?.channelId,
+    isPoyntLoaded,
+    isCollectLoading,
+  ]);
+
+  // Mount the TokenizeJs instance
+  useEffect(() => {
+    if (
+      !isPoyntLoaded ||
+      !godaddyPaymentsConfig ||
+      (!godaddyPaymentsConfig?.businessId && !session?.businessId) ||
+      !isCollectLoading ||
+      !collect.current ||
+      hasMounted.current
+    )
+      return;
+
+    collect.current?.supportWalletPayments().then(supports => {
+      if (!hasMounted.current && supports.applePay) {
+        hasMounted.current = true;
+
+        collect?.current?.mount('apple-pay-element', document, {
+          paymentMethods: ['apple_pay'],
+          buttonsContainerOptions: {
+            className: 'gap-1 !flex-col sm:!flex-row place-items-center',
+          },
+          buttonOptions: {
+            type: 'plain',
+            margin: '0',
+            height: '50px',
+            width: '100%',
+            justifyContent: 'flex-start',
+            onClick: () => handleApplePayClickRef.current(),
+          },
+        });
+
+        setIsCollectLoading(false);
+
+        track({
+          eventId: eventIds.applePayImpression,
+          type: TrackingEventType.IMPRESSION,
+          properties: {
+            provider: 'poynt',
+          },
+        });
+      }
+    });
+  }, [
+    isPoyntLoaded,
+    godaddyPaymentsConfig,
+    isCollectLoading,
+    session?.businessId,
+  ]);
+
+  // Set up event listeners for TokenizeJs
+  useEffect(() => {
+    if (!collect.current || !isPoyntLoaded) return;
+
+    collect.current.on('close_wallet', () => {
+      setError('');
+    });
+
+    collect.current.on('payment_authorized', async event => {
+      const nonce = event?.nonce;
+
+      if (nonce) {
+        const checkoutBody = {
+          paymentToken: nonce,
+          paymentType: PaymentMethodType.CREDIT_CARD,
+          paymentProvider: PaymentProvider.POYNT,
+        };
+
+        try {
+          await confirmCheckout.mutateAsync(checkoutBody);
+          event.complete();
+        } catch (err: unknown) {
+          if (err instanceof GraphQLErrorWithCodes) {
+            const walletError: WalletError = {
+              code: 'invalid_payment_data',
+              message:
+                t.apiErrors?.[err.codes[0] as keyof typeof t.apiErrors] ||
+                t.errors.errorProcessingPayment,
+            };
+
+            setCheckoutErrors(err.codes);
+
+            track({
+              eventId: eventIds.checkoutError,
+              type: TrackingEventType.EVENT,
+              properties: {
+                paymentType: event.source,
+                provider: 'poynt',
+                errorCodes: err.codes.join(','),
+              },
+            });
+
+            event.complete({ error: walletError });
+          } else {
+            track({
+              eventId: eventIds.checkoutError,
+              type: TrackingEventType.EVENT,
+              properties: {
+                paymentType: event.source,
+                provider: 'poynt',
+                errorType: 'generic',
+              },
+            });
+
+            const walletError: WalletError = {
+              code: 'invalid_payment_data',
+              message: t.errors.errorProcessingPayment,
+            };
+            event.complete({ error: walletError });
+          }
+        }
+      } else {
+        track({
+          eventId: eventIds.checkoutError,
+          type: TrackingEventType.EVENT,
+          properties: {
+            paymentType: event.source,
+            provider: 'poynt',
+            errorCodes: 'no_nonce',
+          },
+        });
+        const walletError: WalletError = {
+          code: 'invalid_payment_data',
+          message: t.errors.errorProcessingPayment,
+        };
+        event.complete({ error: walletError });
+      }
+    });
+
+    collect.current.on('error', event => {
+      setError(event?.data?.error?.message || t.errors.errorProcessingPayment);
+    });
+  }, [isPoyntLoaded, confirmCheckout.mutateAsync, t, setCheckoutErrors]);
+
+  return (
+    <>
+      <div
+        id='apple-pay-element'
+        className={isDisabled ? 'opacity-50 pointer-events-none' : undefined}
+      />
+      {isCollectLoading ? (
+        <div className='grid gap-1 grid-cols-1'>
+          <Skeleton className='h-12 w-full mb-1' />
+        </div>
+      ) : null}
+      {error ? <p className='text-destructive py-1'>{error}</p> : null}
+    </>
+  );
+}