feat: expose checkout options on present / preload (#400)

* feat: expose checkout options on present / preload

* fix: make auth optional for present

* fix: compilation errors on native level

* fix: swift tests

Author: kieran-osgood-shopify

modules/@shopify/checkout-sheet-kit/ios/RCTCheckoutWebView.swift

@@ -305,27 +305,6 @@ extension RCTCheckoutWebView: CheckoutDelegate {
     ])
   }
 
-  func checkoutDidRequestCardChange(event: CheckoutCardChangeRequested) {
-    guard let id = event.id else { return }
-
-    self.events.set(key: id, event: event)
-
-    var eventData: [String: Any] = [
-      "id": event.id,
-      "type": "paymentChangeIntent",
-    ]
-
-    // Include current card info if available
-    if let currentCard = event.params.currentCard {
-      eventData["currentCard"] = [
-        "last4": currentCard.last4,
-        "brand": currentCard.brand,
-      ]
-    }
-
-    onPaymentChangeIntent?(eventData)
-  }
-
   /// Called when the buyer attempts to submit the checkout.
   ///
   /// This event is only emitted when native payment delegation is configured

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/android/app/src/test/java/com/shopify/checkoutkitreactnative/ShopifyCheckoutSheetKitModuleTest.java

@@ -3,6 +3,8 @@
 import static com.shopify.checkoutkitreactnative.TestFixtures.createTestCart;
 
 import androidx.activity.ComponentActivity;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
 
 import com.facebook.react.bridge.JavaOnlyMap;
 import com.facebook.react.bridge.ReactApplicationContext;
@@ -14,6 +16,7 @@
 import com.shopify.checkoutsheetkit.Preloading;
 import com.shopify.checkoutsheetkit.ColorScheme;
 import com.shopify.checkoutsheetkit.Authentication;
+import com.shopify.checkoutsheetkit.lifecycleevents.CartPaymentInstrument;
 import com.shopify.checkoutsheetkit.lifecycleevents.CheckoutCompleteEvent;
 import com.shopify.checkoutsheetkit.lifecycleevents.CheckoutStartEvent;
 import com.shopify.checkoutsheetkit.lifecycleevents.Cart;
@@ -44,6 +47,11 @@
 import android.content.Context;
 
 import java.util.ArrayList;
+import java.util.Collection;
+import java.util.Collections;
+import java.util.Iterator;
+import java.util.List;
+import java.util.ListIterator;
 
 @RunWith(MockitoJUnitRunner.class)
 public class ShopifyCheckoutSheetKitModuleTest {
@@ -543,18 +551,19 @@ public void testCompleteConfigurationAndEventFlow() {
 
   private Cart buildMinimalCart(String cartId, String amount, String currencyCode) {
     return new Cart(
-        cartId,
-        new ArrayList<>(), // lines
-        new CartCost(
-            new Money(amount, currencyCode),
-            new Money(amount, currencyCode)
-        ),
-        new CartBuyerIdentity(null, null, null, null),
-        new ArrayList<>(), // deliveryGroups
-        new ArrayList<>(), // discountCodes
-        new ArrayList<>(), // appliedGiftCards
-        new ArrayList<>(), // discountAllocations
-        new CartDelivery(new ArrayList<>())
+      cartId,
+      new ArrayList<>(), // lines
+      new CartCost(
+        new Money(amount, currencyCode),
+        new Money(amount, currencyCode)
+      ),
+      new CartBuyerIdentity(null, null, null, null),
+      new ArrayList<>(), // deliveryGroups
+      new ArrayList<>(), // discountCodes
+      new ArrayList<>(), // appliedGiftCards
+      new ArrayList<>(), // discountAllocations
+      new CartDelivery(new ArrayList<>()),
+      new ArrayList<>() { } // paymentInstruments
     );
   }
 

sample/android/app/src/test/java/com/shopify/checkoutkitreactnative/TestFixtures.java

@@ -76,7 +76,8 @@ public static Cart createTestCart(
         Collections.emptyList(), // discountCodes
         Collections.emptyList(), // appliedGiftCards
         Collections.emptyList(), // discountAllocations
-        delivery
+        delivery,
+        Collections.emptyList() // paymentInstruments
     );
   }
 

sample/ios/ReactNativeTests/RCTCheckoutWebViewTests.swift

@@ -313,7 +313,8 @@ class RCTCheckoutWebViewTests: XCTestCase {
             discountCodes: [],
             appliedGiftCards: [],
             discountAllocations: [],
-            delivery: CartDelivery(addresses: [])
+            delivery: CartDelivery(addresses: []),
+            payment: .init(instruments: [])
         )
         let event = CheckoutStartEvent(cart: cart)
 
@@ -347,7 +348,8 @@ private func createTestCart(
         discountCodes: [],
         appliedGiftCards: [],
         discountAllocations: [],
-        delivery: .init(addresses: [])
+        delivery: .init(addresses: []),
+        payment: .init(instruments: [])
     )
 }
 

sample/src/screens/CartScreen.tsx

@@ -48,6 +48,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 +86,11 @@ function CartScreen(): React.JSX.Element {
 
   const presentCheckout = async () => {
     if (checkoutURL) {
-      ShopifyCheckout.present(checkoutURL);
+      const token = await fetchToken();
+
+      ShopifyCheckout.present(checkoutURL, {
+        authentication: token ? { token } : undefined,
+      });
     }
   };