> ## Documentation Index
> Fetch the complete documentation index at: https://swish.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# SwishProvider

> Reference for the SwishProvider component - loads the Swish SDK and provides it to hooks via React context.

`SwishProvider` loads the Swish SDK script, initializes it with your configuration, and provides the SDK instance to all child hooks via React context.

```tsx theme={null}
import { SwishProvider } from "@swishapp/react";

function App() {
  return (
    <SwishProvider
      options={{
        storefront: {
          storeDomain: process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN!,
          accessToken: process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_TOKEN!,
        },
        context: {
          customer: {
            id: customerId,
            email: customerEmail,
            firstName: customerFirstName,
            lastName: customerLastName,
          },
          localization: { country: "US", language: "EN", market: "us" },
          myshopifyDomain: process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN!,
          shopName: "My Store",
          newCustomerAccounts: true,
          routes: { accountUrl: "/account" },
        },
      }}
    >
      {/* Your app */}
    </SwishProvider>
  );
}
```

> [!NOTE]
>
> Both `storefront` and `context` are required. You need a Shopify Storefront API access token for `storefront.accessToken` - see the [configuration reference](https://swish.app/docs/references/sdk/configuration.md#storefront) for how to create one.

## Props

| Prop | Type | Required | Description |
| - | - | - | - |
| `children` | `ReactNode` | Yes | Child components that can use Swish hooks. |
| `options` | `SwishOptions` | Yes | SDK configuration. See below. |
| `swishSdkUrl` | `string` | No | Overrides the CDN URL for the Swish SDK script. Passed inside `options`. |

### `options`

The `options` prop accepts all [`createSwish()` configuration options](https://swish.app/docs/references/sdk/configuration), plus an optional `swishSdkUrl` string that overrides the default CDN URL used to load the Swish SDK script. This is useful for self-hosting the SDK or pinning a specific version.

## How it works

1. On mount, the provider dynamically imports the SDK script from the CDN (or a custom `swishSdkUrl`).
2. It calls `createSwish()` with your options to initialize the SDK.
3. The resulting `SwishApp` instance is stored in React context.
4. Hooks like `useSwish` read from this context to access the SDK.

## Client-only initialization

The SDK intentionally runs client-side only to have no effect on initial render performance. All Swish state loads in the browser after mount.

You can render `SwishProvider` in SSR and React Server Component contexts - the SDK simply skips initialization on the server and waits until the component hydrates on the client.

Hooks return `null` or loading states until initialization completes:

```tsx theme={null}
function SaveButton({ productId }: { productId: string }) {
  const { saved, loading, toggle } = useSwishItem({ productId });

  if (loading) return null;

  return <button type="button" onClick={toggle}>{saved ? "Saved" : "Save"}</button>;
}
```

## Error handling

If SDK initialization fails, the error is available through `SwishProvider`'s internal context. Hooks that depend on the SDK gracefully return `null` or empty states rather than throwing.

The provider also logs the error to the console for debugging:

```
Failed to initialize Swish [Error details]
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.