refactor: remove intent from event naming

Author: kieran-osgood-shopify

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

@@ -84,7 +84,7 @@ class RCTCheckoutWebView: UIView {
   @objc var onCancel: RCTBubblingEventBlock?
   @objc var onLinkClick: RCTBubblingEventBlock?
   @objc var onAddressChangeStart: RCTBubblingEventBlock?
-  @objc var onPaymentChangeIntent: RCTBubblingEventBlock?
+  @objc var onPaymentMethodChangeStart: RCTBubblingEventBlock?
 
   override init(frame: CGRect) {
     super.init(frame: frame)
@@ -304,24 +304,29 @@ extension RCTCheckoutWebView: CheckoutDelegate {
     ])
   }
 
-  func checkoutDidRequestCardChange(event: CheckoutCardChangeRequested) {
+  func checkoutDidStartPaymentMethodChange(event: CheckoutPaymentMethodChangeStart) {
     guard let id = event.id else { return }
 
     self.events.set(key: id, event: event)
 
     var eventData: [String: Any] = [
       "id": event.id,
-      "type": "paymentChangeIntent",
+      "type": "paymentMethodChangeStart",
     ]
 
-    // Include current card info if available
-    if let currentCard = event.params.currentCard {
-      eventData["currentCard"] = [
-        "last4": currentCard.last4,
-        "brand": currentCard.brand,
-      ]
+    // Include cart payment instruments if available
+    if let paymentInstruments = event.params.cart?.paymentInstruments {
+      var instruments: [[String: Any]] = []
+      for instrument in paymentInstruments {
+        var instrumentData: [String: Any] = ["type": instrument.type]
+        if let details = instrument.details {
+          instrumentData["details"] = details
+        }
+        instruments.append(instrumentData)
+      }
+      eventData["cart"] = ["paymentInstruments": instruments]
     }
 
-    onPaymentChangeIntent?(eventData)
+    onPaymentMethodChangeStart?(eventData)
   }
 }

modules/@shopify/checkout-sheet-kit/ios/ShopifyCheckoutSheetKit.mm

@@ -126,7 +126,7 @@ @interface RCT_EXTERN_MODULE (RCTCheckoutWebViewManager, RCTViewManager)
     /**
      * Emitted when checkout is moving to payment selection screen
      */
-    RCT_EXPORT_VIEW_PROPERTY(onPaymentChangeIntent, RCTBubblingEventBlock)
+    RCT_EXPORT_VIEW_PROPERTY(onPaymentMethodChangeStart, RCTBubblingEventBlock)
 
     /**
      * Emitted when a link is clicked

modules/@shopify/checkout-sheet-kit/src/components/Checkout.tsx

@@ -24,18 +24,15 @@ import React, {
   forwardRef,
   useEffect,
 } from 'react';
-import {
-  requireNativeComponent,
-  UIManager,
-  findNodeHandle,
-} from 'react-native';
+import {requireNativeComponent, UIManager, findNodeHandle} from 'react-native';
 import type {ViewStyle} from 'react-native';
 import type {
+  CheckoutAddressChangeStart,
   CheckoutCompleteEvent,
   CheckoutException,
+  CheckoutStartEvent,
 } from '..';
 import {useCheckoutEvents} from '../CheckoutEventProvider';
-import type {CheckoutAddressChangeStart, CheckoutStartEvent} from '../events';
 
 export interface CheckoutProps {
   /**
@@ -81,6 +78,13 @@ export interface CheckoutProps {
    */
   onAddressChangeStart?: (event: CheckoutAddressChangeStart) => void;
 
+  /**
+   * Called when checkout requests a payment method change (e.g., for native payment selector)
+   */
+  onPaymentMethodChangeStart?: (
+    event: CheckoutPaymentMethodChangeStart,
+  ) => void;
+
   /**
    * Style for the webview container
    */
@@ -109,7 +113,19 @@ interface NativeCheckoutWebViewProps {
   onComplete?: (event: {nativeEvent: CheckoutCompleteEvent}) => void;
   onCancel?: () => void;
   onLinkClick?: (event: {nativeEvent: {url: string}}) => void;
-  onAddressChangeStart?: (event: {nativeEvent: CheckoutAddressChangeStart}) => void;
+  onAddressChangeStart?: (event: {
+    nativeEvent: CheckoutAddressChangeStart;
+  }) => void;
+  onPaymentMethodChangeStart?: (event: {
+    nativeEvent: {
+      id: string;
+      type: string;
+      currentCard?: {
+        last4: string;
+        brand: string;
+      };
+    };
+  }) => void;
 }
 
 const RCTCheckoutWebView =
@@ -167,6 +183,7 @@ export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
       onCancel,
       onLinkClick,
       onAddressChangeStart,
+      onPaymentMethodChangeStart,
       style,
       testID,
     },
@@ -185,7 +202,6 @@ export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
       return () => eventContext.unregisterWebView();
     }, [eventContext]);
 
-
     const handleStart = useCallback<
       Required<NativeCheckoutWebViewProps>['onStart']
     >(
@@ -239,6 +255,22 @@ export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
       [onAddressChangeStart],
     );
 
+    const handlePaymentMethodChangeStart = useCallback<
+      Required<NativeCheckoutWebViewProps>['onPaymentMethodChangeStart']
+    >(
+      (event: {
+        nativeEvent: {
+          id: string;
+          type: string;
+          currentCard?: {last4: string; brand: string};
+        };
+      }) => {
+        if (!event.nativeEvent) return;
+        onPaymentMethodChangeStart?.(event.nativeEvent);
+      },
+      [onPaymentMethodChangeStart],
+    );
+
     const reload = useCallback(() => {
       if (!webViewRef.current) {
         return;
@@ -251,11 +283,7 @@ export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
       const viewConfig = UIManager.getViewManagerConfig('RCTCheckoutWebView');
       const commandId = viewConfig?.Commands?.reload ?? 'reload';
 
-      UIManager.dispatchViewManagerCommand(
-        handle,
-        commandId,
-        [],
-      );
+      UIManager.dispatchViewManagerCommand(handle, commandId, []);
     }, []);
 
     useImperativeHandle(ref, () => ({reload}), [reload]);
@@ -273,6 +301,7 @@ export const Checkout = forwardRef<CheckoutRef, CheckoutProps>(
         onCancel={handleCancel}
         onLinkClick={handleLinkClick}
         onAddressChangeStart={handleAddressChangeStart}
+        onPaymentMethodChangeStart={handlePaymentMethodChangeStart}
       />
     );
   },

modules/@shopify/checkout-sheet-kit/src/events.d.ts

@@ -354,7 +354,6 @@ export interface CheckoutStartEvent {
   cart: Cart;
 }
 
-
 /**
  * Error object returned in checkout event responses.
  * Used to communicate validation or processing errors back to checkout.
@@ -535,16 +534,15 @@ export interface CheckoutAddressChangeStartResponse {
 /**
  * Event emitted when the buyer intends to change their payment method.
  */
-export interface CheckoutPaymentChangeIntent {
-  /** Unique identifier for this event instance */
+/** Unique identifier for this event instance */
+export interface CheckoutPaymentMethodChangeStart {
   id: string;
   /** Type of payment change event */
   type: string;
-  /** Current payment card information, if available */
-  currentCard?: {
-    /** Last 4 digits of the card number */
-    last4: string;
-    /** Card brand (e.g., "Visa", "Mastercard") */
-    brand: string;
+  cart?: {
+    paymentInstruments?: Array<{
+      type: string;
+      details?: any;
+    }>;
   };
 }

sample/src/screens/BuyNow/CheckoutScreen.tsx

@@ -47,8 +47,7 @@ export default function CheckoutScreen(props: {
     navigation.navigate('Address', {id: event.id});
   };
 
-  const onPaymentChangeIntent = (event: {id: string}) => {
-    console.log('<CheckoutScreen /> onPaymentChangeIntent: ', event);
+  const onPaymentMethodChangeStart = (event: {id: string}) => {
     navigation.navigate('Payment', {id: event.id});
   };
 
@@ -75,7 +74,7 @@ export default function CheckoutScreen(props: {
       style={styles.container}
       onStart={onCheckoutStart}
       onAddressChangeStart={onAddressChangeStart}
-      onPaymentChangeIntent={onPaymentChangeIntent}
+      onPaymentMethodChangeStart={onPaymentMethodChangeStart}
       onCancel={onCancel}
       onError={onError}
       onComplete={onComplete}