# Install FramePay
This topic describes how to install FramePay in your project using a package manager, or a CDN script.
The latest version of FramePay is served live from the Rebilly CDN. You can choose to include this script directly in your project or use a package manager load it.
## Installation methods
- [Using a package manager](#using-a-package-manager)
- [Using a CDN script](#using-a-cdn-script)
## Using a package manager
For modern web applications, installing the `@rebilly/framepay` npm package offers more flexibility and features, including TypeScript support.
### Steps
1. Install the FramePay npm package:
```bash
npm install @rebilly/framepay
```
```bash
yarn add @rebilly/framepay
```
2. Load and initialize FramePay in your JavaScript or TypeScript project:
```js
import { loadFramepay } from '@rebilly/framepay';
try {
const framepay = await loadFramepay();
framepay.initialize({
publishableKey: 'your-publishable-key',
// Additional configuration parameters
});
framepay.on('error', function (error) {
console.error('FramePay error:', error);
});
framepay.on('ready', function () {
// Your page should have a DOM element with the id "card-element"
framepay.card.mount('#card-element');
});
} catch (error) {
console.error('Failed to load Framepay: ', error);
}
```
For more information, see the [@rebilly/framepay](https://www.npmjs.com/package/@rebilly/framepay) npm package.
## Using a CDN script
This method is suitable for static websites or projects that do not use a package manager.
### Steps
1. Include the required styles and scripts in your HTML file:
```html
```
2. Initialize FramePay in your JavaScript code:
```js
// When the script loads, FramePay is available as a global variable
document.addEventListener('DOMContentLoaded', function () {
Framepay.initialize({
publishableKey: 'your-publishable-key',
// Additional configuration parameters
});
Framepay.on('error', function (error) {
console.error('FramePay error:', error);
});
Framepay.on('ready', function () {
// Your page should have a DOM element with the id "card-element"
Framepay.card.mount('#card-element');
});
});
```
When using the CDN script, ensure your application code runs after the FramePay script has loaded. You can achieve this by either:
- Placing your code at the end of the `` tag
- Using the `defer` attribute on the script tag
- Wrapping your code in a `DOMContentLoaded` or `load` event listener