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

# Web installation

<Note>
  If you're looking for information on how to integrate the SDK, check out our

  [Universal Checkout](/checkout/overview) integration guide.
</Note>

<Note>
  Please review the <a href="/checkout/advanced/content-security-policy">
  Content Security Policy (CSP) </a>
  recommendations before installing!
</Note>

## With npm (recommended)

Our Web SDK is available on npm under the name `@primer-io/checkout-web`.

This package includes TypeScript definitions.

```bash BASH theme={"dark"}
# with yarn
yarn add @primer-io/checkout-web

# with npm
npm i @primer-io/checkout-web
```

Then import `Primer` in your application

```ts TS theme={"dark"}
import { Primer } from "@primer-io/checkout-web";

// for example
Primer.showUniversalCheckout(clientToken, {
  /* options */
});
```

## With our CDN

Include the `Primer.min.js` script on the page where you want the checkout to be rendered. Ensure that you're providing the desired version in the script tag. For example, using `v2.54.0`:

```html HTML theme={"dark"}
<link rel="stylesheet" href="https://sdk.primer.io/web/v2.64.6/Checkout.css" />

<script
  src="https://sdk.primer.io/web/v2.64.6/Primer.min.js"
  integrity="sha384-uHhZVkvTCX4hgjpQWd8pQEdRJlGGDx7S0Bb4dpzJGVXdYMyRUHnK5waT4rjhtEsT"
  crossorigin="anonymous"
></script>
```

### Version pinning

The CDN URL includes a specific version number (e.g. `v2.64.4`). Each version is locked with an integrity hash, so the script loaded in production is always exactly the one you tested with. This means no unexpected changes between deployments.

To upgrade, update the version number and integrity hash in your script tag. You can find the latest version and release notes in the [Web SDK changelog](/changelogs/web-sdk).

`Primer.min.js` will add the `Primer` object to the global scope.

```ts TS theme={"dark"}
const { Primer } = window;

// for example
Primer.showUniversalCheckout(clientToken, {
  /* options */
});
```