diff --git a/modules/@shopify/checkout-sheet-kit/ios/RCTCheckoutWebView.swift b/modules/@shopify/checkout-sheet-kit/ios/RCTCheckoutWebView.swift index 6548cdb8..9bba636f 100644 --- a/modules/@shopify/checkout-sheet-kit/ios/RCTCheckoutWebView.swift +++ b/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 diff --git a/modules/@shopify/checkout-sheet-kit/src/components/Checkout.tsx b/modules/@shopify/checkout-sheet-kit/src/components/Checkout.tsx index ef23e98e..38516c7e 100644 --- a/modules/@shopify/checkout-sheet-kit/src/components/Checkout.tsx +++ b/modules/@shopify/checkout-sheet-kit/src/components/Checkout.tsx @@ -41,7 +41,7 @@ import type { CheckoutSubmitStart } from '../events'; -export interface CheckoutProps { +export interface ShopifyCheckoutProps { /** * The checkout URL to load in the webview */ @@ -104,14 +104,14 @@ export interface CheckoutProps { testID?: string; } -export interface CheckoutRef { +export interface ShopifyCheckoutRef { /** * Reload the current checkout page */ reload: () => void; } -interface NativeCheckoutWebViewProps { +interface NativeShopifyCheckoutWebViewProps { checkoutUrl: string; auth?: string; style?: ViewStyle; @@ -126,7 +126,7 @@ interface NativeCheckoutWebViewProps { } const RCTCheckoutWebView = - requireNativeComponent('RCTCheckoutWebView'); + requireNativeComponent('RCTCheckoutWebView'); /** * Checkout provides a native webview component for displaying @@ -137,9 +137,9 @@ const RCTCheckoutWebView = * including Shop Pay, Apple Pay, and other payment methods. * * @example Basic usage - * import {Checkout} from '@shopify/checkout-sheet-kit'; + * import {ShopifyCheckout} from '@shopify/checkout-sheet-kit'; * - * console.log('Checkout completed!', event.orderDetails)} * onError={(error) => console.error('Checkout failed:', error.message)} @@ -147,7 +147,7 @@ const RCTCheckoutWebView = * /> * * @example Passing an app authentication token to customize checkout and receive richer events - * console.log('Checkout completed!')} @@ -155,11 +155,11 @@ const RCTCheckoutWebView = * * @example Using with ref to reload on error * import {useRef} from 'react'; - * import {Checkout, CheckoutHandle} from '@shopify/checkout-sheet-kit'; + * import {ShopifyCheckout, CheckoutHandle} from '@shopify/checkout-sheet-kit'; * - * const checkoutRef = useRef(null); + * const checkoutRef = useRef(null); * - * */ -export const Checkout = forwardRef( +export const ShopifyCheckout = forwardRef( ( { checkoutUrl, @@ -201,7 +201,7 @@ export const Checkout = forwardRef( const handleStart = useCallback< - Required['onStart'] + Required['onStart'] >( (event: {nativeEvent: CheckoutStartEvent}) => { onStart?.(event.nativeEvent); @@ -210,7 +210,7 @@ export const Checkout = forwardRef( ); const handleError = useCallback< - Required['onError'] + Required['onError'] >( (event: {nativeEvent: CheckoutException}) => { onError?.(event.nativeEvent); @@ -219,7 +219,7 @@ export const Checkout = forwardRef( ); const handleComplete = useCallback< - Required['onComplete'] + Required['onComplete'] >( (event: {nativeEvent: CheckoutCompleteEvent}) => { onComplete?.(event.nativeEvent); @@ -228,13 +228,13 @@ export const Checkout = forwardRef( ); const handleCancel = useCallback< - Required['onCancel'] + Required['onCancel'] >(() => { onCancel?.(); }, [onCancel]); const handleLinkClick = useCallback< - Required['onLinkClick'] + Required['onLinkClick'] >( (event: {nativeEvent: {url: string}}) => { if (!event.nativeEvent.url) return; @@ -244,7 +244,7 @@ export const Checkout = forwardRef( ); const handleAddressChangeStart = useCallback< - Required['onAddressChangeStart'] + Required['onAddressChangeStart'] >( (event: {nativeEvent: CheckoutAddressChangeStart}) => { if (!event.nativeEvent) return; @@ -254,7 +254,7 @@ export const Checkout = forwardRef( ); const handleSubmitStart = useCallback< - Required['onSubmitStart'] + Required['onSubmitStart'] >( (event: {nativeEvent: CheckoutSubmitStart}) => { if (!event.nativeEvent) return; @@ -303,6 +303,6 @@ export const Checkout = forwardRef( }, ); -Checkout.displayName = 'Checkout'; +ShopifyCheckout.displayName = 'Checkout'; -export default Checkout; +export default ShopifyCheckout; diff --git a/modules/@shopify/checkout-sheet-kit/src/context.tsx b/modules/@shopify/checkout-sheet-kit/src/context.tsx index 8ef6bf22..76c1341e 100644 --- a/modules/@shopify/checkout-sheet-kit/src/context.tsx +++ b/modules/@shopify/checkout-sheet-kit/src/context.tsx @@ -31,6 +31,7 @@ import type { RemoveEventListeners, CheckoutEvent, Configuration, + CheckoutOptions, } from './index.d'; type Maybe = T | undefined; @@ -41,8 +42,8 @@ interface Context { getConfig: () => Promise; setConfig: (config: Configuration) => Promise; 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; @@ -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); } }, []); diff --git a/modules/@shopify/checkout-sheet-kit/src/index.ts b/modules/@shopify/checkout-sheet-kit/src/index.ts index 0e444dcc..76bdd8cf 100644 --- a/modules/@shopify/checkout-sheet-kit/src/index.ts +++ b/modules/@shopify/checkout-sheet-kit/src/index.ts @@ -523,7 +523,7 @@ export type { AcceleratedCheckoutButtonsProps, RenderStateChangeEvent, } from './components/AcceleratedCheckoutButtons'; -export type {CheckoutProps, CheckoutRef} from './components/Checkout'; +export type {ShopifyCheckoutProps as CheckoutProps, ShopifyCheckoutRef as CheckoutRef} from './components/Checkout'; export type {CheckoutEventProviderProps} from './CheckoutEventProvider'; // Components @@ -531,7 +531,7 @@ export { AcceleratedCheckoutButtons, RenderState, } from './components/AcceleratedCheckoutButtons'; -export {Checkout} from './components/Checkout'; +export {ShopifyCheckout} from './components/Checkout'; export { CheckoutEventProvider, useCheckoutEvents, diff --git a/modules/@shopify/checkout-sheet-kit/tests/CheckoutAddressChange.test.tsx b/modules/@shopify/checkout-sheet-kit/tests/CheckoutAddressChange.test.tsx index e4be9983..d1078ba8 100644 --- a/modules/@shopify/checkout-sheet-kit/tests/CheckoutAddressChange.test.tsx +++ b/modules/@shopify/checkout-sheet-kit/tests/CheckoutAddressChange.test.tsx @@ -22,7 +22,7 @@ jest.mock('react-native', () => { import React from 'react'; import {render, act} from '@testing-library/react-native'; -import {Checkout} from '../src/components/Checkout'; +import {ShopifyCheckout} from '../src/components/Checkout'; import {createTestCart} from './testFixtures'; describe('Checkout Component - Address Change Events', () => { @@ -32,7 +32,7 @@ describe('Checkout Component - Address Change Events', () => { const onAddressChangeStart = jest.fn(); const {getByTestId} = render( - { it('does not crash when onAddressChangeStart prop is not provided', () => { const {getByTestId} = render( - , + , ); const nativeComponent = getByTestId('checkout-webview'); @@ -88,7 +88,7 @@ describe('Checkout Component - Address Change Events', () => { const onAddressChangeStart = jest.fn(); const {getByTestId} = render( - { const onAddressChangeStart = jest.fn(); const {getByTestId} = render( - { import React from 'react'; import {render, act} from '@testing-library/react-native'; -import {Checkout} from '../src/components/Checkout'; +import {ShopifyCheckout} from '../src/components/Checkout'; import {createTestCart, createTestCheckout} from './testFixtures'; describe('Checkout Component - Submit Start Events', () => { @@ -32,7 +32,7 @@ describe('Checkout Component - Submit Start Events', () => { const onSubmitStart = jest.fn(); const {getByTestId} = render( - { it('does not crash when onSubmitStart prop is not provided', () => { const {getByTestId} = render( - , + , ); const nativeComponent = getByTestId('checkout-webview'); @@ -88,7 +88,7 @@ describe('Checkout Component - Submit Start Events', () => { const onSubmitStart = jest.fn(); const {getByTestId} = render( - (), // 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 ); } diff --git a/sample/android/app/src/test/java/com/shopify/checkoutkitreactnative/TestFixtures.java b/sample/android/app/src/test/java/com/shopify/checkoutkitreactnative/TestFixtures.java index 12001a41..30ce95fd 100644 --- a/sample/android/app/src/test/java/com/shopify/checkoutkitreactnative/TestFixtures.java +++ b/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 ); } diff --git a/sample/ios/ReactNativeTests/RCTCheckoutWebViewTests.swift b/sample/ios/ReactNativeTests/RCTCheckoutWebViewTests.swift index 41d30d2d..20929898 100644 --- a/sample/ios/ReactNativeTests/RCTCheckoutWebViewTests.swift +++ b/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: []) ) } diff --git a/sample/src/screens/BuyNow/CheckoutScreen.tsx b/sample/src/screens/BuyNow/CheckoutScreen.tsx index 3e02cd17..17f97cd7 100644 --- a/sample/src/screens/BuyNow/CheckoutScreen.tsx +++ b/sample/src/screens/BuyNow/CheckoutScreen.tsx @@ -21,7 +21,7 @@ import type {NavigationProp, RouteProp} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native'; import React, {useRef} from 'react'; import { - Checkout, + ShopifyCheckout, type CheckoutAddressChangeStart, type CheckoutCompleteEvent, type CheckoutRef, @@ -81,7 +81,7 @@ export default function CheckoutScreen(props: { }; return ( - { if (checkoutURL) { - ShopifyCheckout.present(checkoutURL); + const token = await fetchToken(); + + ShopifyCheckout.present(checkoutURL, { + authentication: token ? { token } : undefined, + }); } };