Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ updates:
- "version-update:semver-major"
- "version-update:semver-minor"

# React Native — Checkout Sheet Kit module
# React Native — Checkout Kit module
- package-ecosystem: npm
directory: "/platforms/react-native/modules/@shopify/checkout-sheet-kit"
directory: "/platforms/react-native/modules/@shopify/checkout-kit-react-native"
schedule:
interval: daily
cooldown:
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/rn-test-ios.yml
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ jobs:
uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
with:
path: platforms/react-native/sample/ios/Pods
key: ${{ runner.os }}-cocoapods-${{ hashFiles('platforms/react-native/sample/ios/Podfile.lock', 'platforms/react-native/sample/Gemfile.lock', 'platforms/react-native/sample/Gemfile', 'platforms/react-native/package.json', 'platforms/react-native/sample/package.json', 'platforms/react-native/modules/@shopify/checkout-sheet-kit/package.json', 'platforms/react-native/pnpm-lock.yaml') }}
key: ${{ runner.os }}-cocoapods-${{ hashFiles('platforms/react-native/sample/ios/Podfile.lock', 'platforms/react-native/sample/Gemfile.lock', 'platforms/react-native/sample/Gemfile', 'platforms/react-native/package.json', 'platforms/react-native/sample/package.json', 'platforms/react-native/modules/@shopify/checkout-kit-react-native/package.json', 'platforms/react-native/pnpm-lock.yaml') }}

- name: Install cocoapods
working-directory: platforms/react-native/sample
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/rn-test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ jobs:
working-directory: platforms/react-native

- name: Run tests with coverage
run: pnpm test --coverage --testPathPatterns="modules/@shopify/checkout-sheet-kit/tests" --coverageReporters=json-summary
run: pnpm test --coverage --testPathPatterns="modules/@shopify/checkout-kit-react-native/tests" --coverageReporters=json-summary

- name: Coverage comment
if: github.event_name == 'pull_request'
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Checkout Kit is a monorepo containing all the platforms Checkout Kit supports to
| ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------- | ------------------------------------------ |
| [`ShopifyCheckoutKit` `ShopifyAcceleratedCheckouts`](platforms/swift/) | [![GitHub tag](https://img.shields.io/github/v/tag/Shopify/checkout-kit?label=SPM)](https://github.com/Shopify/checkout-kit/tags) [![CocoaPods](https://img.shields.io/cocoapods/v/ShopifyCheckoutKit.svg?label=CocoaPods)](https://cocoapods.org/pods/ShopifyCheckoutKit) | Swift Package Manager, CocoaPods | iOS checkout presentation and accelerated checkout libraries. | [Readme](platforms/swift/README.md) |
| [`com.shopify:checkout-kit`](platforms/android/) | [![Maven Central](https://img.shields.io/maven-central/v/com.shopify/checkout-kit.svg?label=Maven%20Central)](https://central.sonatype.com/artifact/com.shopify/checkout-kit) | Maven Central | Android checkout presentation and accelerated checkout support. | [Readme](platforms/android/README.md) |
| [`@shopify/checkout-kit`](platforms/react-native/) | [![npm latest](https://img.shields.io/npm/v/@shopify/checkout-kit/latest.svg?label=npm)](https://www.npmjs.com/package/@shopify/checkout-kit) | npm | React Native wrapper for Checkout Kit. | [Readme](platforms/react-native/README.md) |
| [`@shopify/checkout-kit-react-native`](platforms/react-native/) | [![npm latest](https://img.shields.io/npm/v/@shopify/checkout-kit-react-native/latest.svg?label=npm)](https://www.npmjs.com/package/@shopify/checkout-kit-react-native) | npm | React Native wrapper for Checkout Kit. | [Readme](platforms/react-native/README.md) |

## Versioning

Expand Down
8 changes: 4 additions & 4 deletions platforms/react-native/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,10 @@ dist
.turbo

# Module
modules/@shopify/checkout-sheet-kit/android/gradle/wrapper/gradle-wrapper.jar
modules/@shopify/checkout-sheet-kit/android/gradle/wrapper/gradle-wrapper.properties
modules/@shopify/checkout-sheet-kit/android/gradlew
modules/@shopify/checkout-sheet-kit/android/gradlew.bat
modules/@shopify/checkout-kit-react-native/android/gradle/wrapper/gradle-wrapper.jar
modules/@shopify/checkout-kit-react-native/android/gradle/wrapper/gradle-wrapper.properties
modules/@shopify/checkout-kit-react-native/android/gradlew
modules/@shopify/checkout-kit-react-native/android/gradlew.bat

# Sample bundle
**/index.android.bundle
Expand Down
8 changes: 4 additions & 4 deletions platforms/react-native/CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ see [guidelines and instructions](.github/CONTRIBUTING.md).

This repo is subdivided into 3 parts using pnpm workspaces:

- The base repo (workspace name = `checkout-sheet-kit-react-native`)
- The `@shopify/checkout-sheet-kit` Native Module (workspace name = `module`)
- The base repo (workspace name = `checkout-kit-react-native`)
- The `@shopify/checkout-kit-react-native` Native Module (workspace name = `module`)
- The sample application (workspace name = `sample`)

Each of the workspaces contains a separate `package.json` to manage tasks
Expand Down Expand Up @@ -75,7 +75,7 @@ SCCACHE=false pnpm sample android
## Making changes to the Native Module

If your intentions are to modify the TS code for the Native Module under
`modules/@shopify/checkout-sheet-kit`, note that you will not need to rebuild to
`modules/@shopify/checkout-kit-react-native`, note that you will not need to rebuild to
observe your changes in the sample app. This is because the sample app is
importing the TS files directly from the module directory (through symlinking).

Expand Down Expand Up @@ -118,7 +118,7 @@ There are 3 types of tests in this repo: Typescript, Swift and Java - each for
testing the Native Module.

```sh
# Run Jest tests for "modules/@shopify/checkout-sheet-kit/src/**/*.tsx"
# Run Jest tests for "modules/@shopify/checkout-kit-react-native/src/**/*.tsx"
pnpm test

# Run swift tests for the Native Module
Expand Down
89 changes: 43 additions & 46 deletions platforms/react-native/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# Shopify Checkout Kit - React Native

[![GitHub license](https://img.shields.io/badge/license-MIT-lightgrey.svg?style=flat)](https://github.com/Shopify/checkout-sheet-kit-react-native/blob/main/LICENSE)
[![GitHub Release](https://img.shields.io/github/release/shopify/checkout-sheet-kit-react-native.svg?style=flat)]()
[![GitHub license](https://img.shields.io/badge/license-MIT-lightgrey.svg?style=flat)](https://github.com/Shopify/checkout-kit/blob/main/LICENSE)

<img width="3200" height="800" alt="gradients" src="https://github.com/user-attachments/assets/156492b7-5a64-43d2-b574-2e8f29ed8780" />

Expand All @@ -13,8 +12,6 @@ branding, and more. It also provides platform idiomatic defaults such as support
for light and dark mode, and convenient developer APIs to embed, customize, and
follow the lifecycle of the checkout experience.

Note: We're in the process of renaming "Checkout Sheet Kit" to "Checkout Kit." The dev docs and README already use the new name, while the package itself will be updated in an upcoming version.

Check out our blog to
[learn how and why we built the Shopify Checkout Kit](https://www.shopify.com/partners/blog/mobile-checkout-sdks-for-ios-and-android).

Expand Down Expand Up @@ -71,7 +68,7 @@ experiences.

## Version Compatibility

Starting with **v4.0.0**, `@shopify/checkout-sheet-kit` requires the React Native
Starting with **v4.0.0**, `@shopify/checkout-kit-react-native` requires the React Native
**New Architecture** (TurboModules + Fabric). Apps on the old architecture must
stay on the `v3.x` line until they migrate.

Expand All @@ -95,13 +92,13 @@ application:
Install the Shopify Checkout Kit package dependency:

```sh
pnpm add @shopify/checkout-sheet-kit
pnpm add @shopify/checkout-kit-react-native

# or using yarn
yarn add @shopify/checkout-sheet-kit
yarn add @shopify/checkout-kit-react-native

# or using npm
npm install @shopify/checkout-sheet-kit
npm install @shopify/checkout-kit-react-native
```

### 2. Minimum Android requirements
Expand Down Expand Up @@ -141,13 +138,13 @@ requirements have been checked, you can begin by importing the library in your
application code:

```tsx
import {ShopifyCheckoutSheetProvider} from '@shopify/checkout-sheet-kit';
import {ShopifyCheckoutProvider} from '@shopify/checkout-kit-react-native';

function AppWithContext() {
return (
<ShopifyCheckoutSheetProvider>
<ShopifyCheckoutProvider>
<App />
</ShopifyCheckoutSheetProvider>
</ShopifyCheckoutProvider>
);
}
```
Expand All @@ -156,10 +153,10 @@ Doing so will now allow you to access the Native Module anywhere in your
application using React hooks:

```tsx
import {useShopifyCheckoutSheet} from '@shopify/checkout-sheet-kit';
import {useShopifyCheckout} from '@shopify/checkout-kit-react-native';

function App() {
const shopifyCheckout = useShopifyCheckoutSheet();
const shopifyCheckout = useShopifyCheckout();

// Present the checkout
shopifyCheckout.present(checkoutUrl);
Expand All @@ -171,22 +168,22 @@ to obtain a checkout URL to pass to the kit.

> [!NOTE]
> The recommended usage of the library is through a
> `ShopifyCheckoutSheetProvider` Context provider, but see
> `ShopifyCheckoutProvider` Context provider, but see
> [Programmatic usage](#programamatic-usage) below for details on how to use the
> library without React context.

## Programmatic Usage

To use the library without React context, import the `ShopifyCheckoutSheet`
To use the library without React context, import the `ShopifyCheckout`
class from the package and instantiate it. We recommend to instantiating the
class at a relatively high level in your application, and exporting it for use
throughout your app.

```tsx
// shopify.ts
import {ShopifyCheckoutSheet} from '@shopify/checkout-sheet-kit';
import {ShopifyCheckout} from '@shopify/checkout-kit-react-native';

export const shopifyCheckout = new ShopifyCheckoutSheet({
export const shopifyCheckout = new ShopifyCheckout({
// optional configuration
});
```
Expand Down Expand Up @@ -281,7 +278,7 @@ browser. To present a native checkout sheet in your application, provide the

```tsx
function App() {
const shopifyCheckout = useShopifyCheckoutSheet()
const shopifyCheckout = useShopifyCheckout()
const checkoutUrl = useRef<string>(null)
const [createCart] = useMutation(createCartMutation)
const [addToCart] = useMutation(addToCartMutation)
Expand Down Expand Up @@ -330,7 +327,7 @@ function App() {

The SDK provides a way to customize the presented checkout experience through a
`configuration` object in the Context Provider or a `setConfig` method on an
instance of the `ShopifyCheckoutSheet` class.
instance of the `ShopifyCheckout` class.

| Name | Required | Default | Description |
| ------------- | -------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand All @@ -346,8 +343,8 @@ import {
ColorScheme,
Configuration,
LogLevel,
ShopifyCheckoutSheetProvider,
} from '@shopify/checkout-sheet-kit';
ShopifyCheckoutProvider,
} from '@shopify/checkout-kit-react-native';

const config: Configuration = {
colorScheme: ColorScheme.web,
Expand All @@ -370,14 +367,14 @@ const config: Configuration = {
// If using React Context
function AppWithContext() {
return (
<ShopifyCheckoutSheetProvider configuration={config}>
<ShopifyCheckoutProvider configuration={config}>
<App />
</ShopifyCheckoutSheetProvider>
</ShopifyCheckoutProvider>
);
}

// If using ShopifyCheckoutSheet directly
const shopifyCheckout = new ShopifyCheckoutSheet(config);
// If using ShopifyCheckout directly
const shopifyCheckout = new ShopifyCheckout(config);
```

### Colors
Expand Down Expand Up @@ -424,8 +421,8 @@ slightly different, as you can specify different overrides for `light` and
import {
ColorScheme,
Configuration,
ShopifyCheckoutSheetProvider,
} from '@shopify/checkout-sheet-kit';
ShopifyCheckoutProvider,
} from '@shopify/checkout-kit-react-native';

const config: Configuration = {
colorScheme: ColorScheme.automatic,
Expand All @@ -452,9 +449,9 @@ const config: Configuration = {

function AppWithContext() {
return (
<ShopifyCheckoutSheetProvider configuration={config}>
<ShopifyCheckoutProvider configuration={config}>
<App />
</ShopifyCheckoutSheetProvider>
</ShopifyCheckoutProvider>
);
}
```
Expand Down Expand Up @@ -552,11 +549,11 @@ Once enabled, preloading a checkout is as simple as calling

```tsx
// using hooks
const shopifyCheckout = useShopifyCheckoutSheet();
const shopifyCheckout = useShopifyCheckout();
ShopifyCheckout.preload(checkoutUrl);

// using a class instance
const shopifyCheckout = new ShopifyCheckoutSheet();
const shopifyCheckout = new ShopifyCheckout();
shopifyCheckout.preload(checkoutUrl);
```

Expand Down Expand Up @@ -590,7 +587,7 @@ Instead, a better approach is to call `preload()` when you have a strong enough

### Cache invalidation

Should you wish to manually clear the preload cache, there is a `ShopifyCheckoutSheetKit.invalidate()` helper function to do so.
Should you wish to manually clear the preload cache, there is a `ShopifyCheckoutKit.invalidate()` helper function to do so.

## Checkout lifecycle

Expand All @@ -613,7 +610,7 @@ an event listener in a React `useEffect`, ensuring to remove it on unmount.

```tsx
// Using hooks
const shopifyCheckout = useShopifyCheckoutSheet();
const shopifyCheckout = useShopifyCheckout();

useEffect(() => {
const close = shopifyCheckout.addEventListener('close', () => {
Expand Down Expand Up @@ -751,7 +748,7 @@ is completed.
### Universal Links - iOS

See the
[Universal Links guide](https://github.com/Shopify/checkout-sheet-kit-react-native/blob/main/documentation/universal_links_ios.md)
[Universal Links guide](https://github.com/Shopify/checkout-kit/blob/main/documentation/universal_links_ios.md)
for information on how to get started with adding support for Offsite Payments
in your app.

Expand Down Expand Up @@ -812,20 +809,20 @@ The geolocation request flow follows this sequence:
> This section is only applicable for Android.

In order to opt-out of the default permission handling, you can set `features.handleGeolocationRequests` to `false`
when you instantiate the `ShopifyCheckoutSheet` class.
when you instantiate the `ShopifyCheckout` class.

If you're using the sheet programmatically, you can do so by specifying a `features` object as the second argument:

```tsx
const checkoutSheetKit = new ShopifyCheckoutSheet(config, {handleGeolocationRequests: false});
const shopifyCheckout = new ShopifyCheckout(config, {handleGeolocationRequests: false});
```

If you're using the context provider, you can pass the same `features` object as a prop to the `ShopifyCheckoutSheetProvider` component:
If you're using the context provider, you can pass the same `features` object as a prop to the `ShopifyCheckoutProvider` component:

```tsx
<ShopifyCheckoutSheetProvider configuration={config} features={{handleGeolocationRequests: false}}>
<ShopifyCheckoutProvider configuration={config} features={{handleGeolocationRequests: false}}>
{children}
</ShopifyCheckoutSheetProvider>
</ShopifyCheckoutProvider>
```

When opting out, you'll need to implement your own permission handling logic and communicate the result back to the checkout sheet. This can be useful if you want to:
Expand Down Expand Up @@ -872,10 +869,10 @@ Accelerated checkout buttons surface Apple Pay and Shop Pay options earlier in t

### Configure the integration

Pass an `acceleratedCheckouts` configuration when setting up the provider or `ShopifyCheckoutSheet` instance. This connects the accelerated checkout buttons to your storefront.
Pass an `acceleratedCheckouts` configuration when setting up the provider or `ShopifyCheckout` instance. This connects the accelerated checkout buttons to your storefront.

```tsx
import {ShopifyCheckoutSheetProvider} from '@shopify/checkout-sheet-kit';
import {ShopifyCheckoutProvider} from '@shopify/checkout-kit-react-native';

const config = {
acceleratedCheckouts: {
Expand All @@ -901,9 +898,9 @@ const config = {

function App() {
return (
<ShopifyCheckoutSheetProvider configuration={config}>
<ShopifyCheckoutProvider configuration={config}>
<YourApp />
</ShopifyCheckoutSheetProvider>
</ShopifyCheckoutProvider>
);
}
```
Expand All @@ -919,7 +916,7 @@ Use `AcceleratedCheckoutButtons` to attach accelerated checkout calls-to-action
import {
AcceleratedCheckoutButtons,
AcceleratedCheckoutWallet,
} from '@shopify/checkout-sheet-kit';
} from '@shopify/checkout-kit-react-native';

function CartFooter({cartId}: {cartId: string}) {
return (
Expand Down Expand Up @@ -964,7 +961,7 @@ Accelerated checkout buttons display every available wallet by default. Use `wal
Use `applePayLabel` to map to the native `PayWithApplePayButtonLabel` values. The default is `plain`.

```tsx
import {ApplePayLabel} from '@shopify/checkout-sheet-kit';
import {ApplePayLabel} from '@shopify/checkout-kit-react-native';

<AcceleratedCheckoutButtons
cartId={cartId}
Expand All @@ -977,7 +974,7 @@ import {ApplePayLabel} from '@shopify/checkout-sheet-kit';
Use `applePayStyle` to set the color style of the Apple Pay button. The default is `automatic`, which adapts to the current appearance (light/dark mode).

```tsx
import {ApplePayStyle} from '@shopify/checkout-sheet-kit';
import {ApplePayStyle} from '@shopify/checkout-kit-react-native';

<AcceleratedCheckoutButtons
cartId={cartId}
Expand Down
Loading
Loading