Onramp

# Install the Stripe Crypto SDK ES Module

Set up the Stripe crypto client-side SDK in your web application.

View the package on [npm](https://www.npmjs.com/@stripe/crypto) to learn how the Stripe Crypto SDK ES works.

This guide demonstrates how to install the [Stripe Crypto ES module](https://www.npmjs.com/@stripe/crypto) client-side SDK using a script tag or package manager. The SDK wraps the global `StripeOnramp` function provided by the Stripe crypto script as an ES module. It lets you use the [onramp](https://docs.stripe.com/crypto/onramp.md) widget to help your customers acquire crypto using fiat.

## Manually load the script 

Include the following scripts using script tags within the `<head>` element of your HTML. These scripts must always load directly from Stripe’s domains, *https://js.stripe.com* and *https://crypto-js.stripe.com*, for compatibility and *PCI compliance*. Don’t include the scripts in a bundle or host a copy yourself. If you do, your integration might break without warning.

```html
<head>
  <title>Onramp</title>
  <script src="https://js.stripe.com/v3/"></script>
  <script src="https://crypto-js.stripe.com/crypto-onramp-outer.js"></script>
</head>
```

### StripeOnramp constructor 

Set the [API publishable key](https://dashboard.stripe.com/test/apikeys) to allow Stripe to retrieve the `OnrampSession` object created by your back end. For example:

```javascript
const stripeOnramp = StripeOnramp('<<publishable key>>');
```

## Load the crypto SDK as an ES module 

To install the module through the package manager, first install the [Stripe.js ES module](https://github.com/stripe/stripe-js) and [Stripe crypto ES module](https://www.npmjs.com/package/@stripe/crypto) from the [npm public registry](https://www.npmjs.com/). The package includes Typescript type definitions.

```bash
npm install @stripe/stripe-js @stripe/crypto
```

### StripeOnramp constructor 

Import the module and set the [API publishable key](https://dashboard.stripe.com/test/apikeys) to allow Stripe to retrieve the `OnrampSession` object created by your back end. The function returns a `Promise` object that resolves with a newly created `StripeOnramp` object after the scripts load.

```javascript
import {loadStripeOnramp} from '@stripe/crypto';

const stripeOnramp = await loadStripeOnramp('<<publishable key>>');
```