SwishProvider - Swish Docs

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

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>
  );
}

Both storefront and context are required. You need a Shopify Storefront API access token for storefront.accessToken - see the configuration reference 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, 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

On mount, the provider dynamically imports the SDK script from the CDN (or a custom swishSdkUrl).
It calls createSwish() with your options to initialize the SDK.
The resulting SwishApp instance is stored in React context.
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:

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]

​Props

​options

​How it works

​Client-only initialization

​Error handling

Props

`options`

How it works

Client-only initialization

Error handling