> ## 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.3/Checkout.css" />

<script
  src="https://sdk.primer.io/web/v2.64.3/Primer.min.js"
  integrity="sha384-zdbRT5goWX6sktVz/AXVltaFt+GfyrKkWVuJTcCwZUWV0E2sYTeO3LUsZOQT3R0w"
  crossorigin="anonymous"
></script>
```

`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 */
});
```