feat: expose checkout options on present / preload

Author: kieran-osgood-shopify

modules/@shopify/checkout-sheet-kit/src/context.tsx

@@ -31,6 +31,7 @@ import type {
   RemoveEventListeners,
   CheckoutEvent,
   Configuration,
+  CheckoutOptions,
 } from './index.d';
 
 type Maybe<T> = T | undefined;
@@ -41,8 +42,8 @@ interface Context {
   getConfig: () => Promise<Configuration | undefined>;
   setConfig: (config: Configuration) => Promise<void>;
   removeEventListeners: RemoveEventListeners;
-  preload: (checkoutUrl: string) => void;
-  present: (checkoutUrl: string) => void;
+  preload: (checkoutUrl: string, options?: CheckoutOptions) => void;
+  present: (checkoutUrl: string, options?: CheckoutOptions) => void;
   dismiss: () => void;
   invalidate: () => void;
   version: Maybe<string>;
@@ -95,15 +96,16 @@ export function ShopifyCheckoutSheetProvider({
     instance.current?.removeEventListeners(eventName);
   }, []);
 
-  const present = useCallback((checkoutUrl: string) => {
+  const present = useCallback((checkoutUrl: string, options?: CheckoutOptions) => {
     if (checkoutUrl) {
-      instance.current?.present(checkoutUrl);
+      instance.current?.present(checkoutUrl, options
+      );
     }
   }, []);
 
-  const preload = useCallback((checkoutUrl: string) => {
+  const preload = useCallback((checkoutUrl: string, options?: CheckoutOptions) => {
     if (checkoutUrl) {
-      instance.current?.preload(checkoutUrl);
+      instance.current?.preload(checkoutUrl, options);
     }
   }, []);
 

sample/src/screens/CartScreen.tsx

@@ -32,6 +32,7 @@ import {
   ActivityIndicator,
   Pressable,
   RefreshControl,
+  Alert,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Entypo';
 
@@ -48,6 +49,7 @@ import {useTheme} from '../context/Theme';
 import {useCart} from '../context/Cart';
 import {currency} from '../utils';
 import {useShopifyEventHandlers} from '../hooks/useCheckoutEventHandlers';
+import { fetchToken } from '../services/TokenClient';
 
 function CartScreen(): React.JSX.Element {
   const ShopifyCheckout = useShopifyCheckoutSheet();
@@ -85,7 +87,15 @@ function CartScreen(): React.JSX.Element {
 
   const presentCheckout = async () => {
     if (checkoutURL) {
-      ShopifyCheckout.present(checkoutURL);
+      const auth = await fetchToken();
+      if (!auth) {
+        Alert.alert('Error', 'Failed to authenticate');
+        return;
+      }
+
+      ShopifyCheckout.present(checkoutURL, {
+        authentication: { token: auth },
+      });
     }
   };