# ES モジュール Stripe.js SDK
ウェブアプリケーションで ES モジュール Stripe.js クライアント側 SDK を設定します。
ES モジュール Stripe.js がどのように機能するかを確認したり、開発に参加するには、[GitHub のプロジェクト](https://github.com/stripe/stripe-js)をご覧ください。
この導入ガイドでは、スクリプトタグまたはパッケージマネージャーを使用して [ES モジュール Stripe.js](https://github.com/stripe/stripe-js) のクライアント側 SDK をインストールする方法を説明します。SDK には、Stripe .js スクリプトによって提供されるグローバルの `Stripe` 関数が ES モジュールとしてラップされています。Stripe の構築済み UI コンポーネントである [Elements](https://docs.stripe.com/payments/elements.md) を使用して、機密データを扱うことなく顧客のカード詳細を安全に収集できる決済フォームを作成できます。
## Before you begin
[支払い方法の設定](https://dashboard.stripe.com/settings/payment_methods)ページで、サポートする支払い方法を有効にします。
## Stripe.js スクリプトを手動で読み込む
### インストール
スクリプトを使用してインストールするには、[Stripe.js ES モジュール](https://github.com/stripe/stripe-js)を **HTML** の `` 要素にスクリプトとして追加します。これにより、新たに作成されたすべての [Stripe オブジェクト](https://docs.stripe.com/js.md#stripe-function)にコード内でグローバルにアクセスできるようになります。
```html
Checkout
```
### Stripe.js コンストラクター
次に、[API 公開可能キー](https://dashboard.stripe.com/test/apikeys)を設定し、Stripe が顧客情報を[トークン化](https://docs.stripe.com/api/tokens.md)して機密性の高い決済情報を収集できるようにします。以下に例を示します。
```javascript
var stripe = Stripe('<>');
```
## Stripe.js を ES モジュールとして読み込む
### インストール
パッケージマネージャーを使用してインストールする場合は、[npm のパブリックレジストリー](https://www.npmjs.com/)から [Stripe.js ES モジュール](https://github.com/stripe/stripe-js)をインストールします。
```javascript
npm install @stripe/stripe-js
```
### Stripe.js コンストラクター
次に、モジュールを **JavaScript** ファイルにインポートします。次の関数は、Stripe .js の読み込み後に、新しく作成された [Stripe オブジェクト](https://docs.stripe.com/js.md#stripe-function)によって解決される `Promise` を返します。
```javascript
import {loadStripe} from '@stripe/stripe-js';
const stripe = await loadStripe('<>');
```
## See also
これで、ES モジュール Stripe.js SDK を設定するための導入ガイドは終了です。システムの使用を開始するには、以下のリンクをご覧ください。
- [GitHub の Payment Element による決済の受け付け](https://github.com/stripe-samples/accept-a-payment/tree/main/payment-element)
- [Payment Element による決済の受け付けに関するドキュメント](https://docs.stripe.com/payments/accept-a-payment.md?ui=elements&client=html)
- [Custom 決済フロービルダー](https://docs.stripe.com/payments/quickstart-checkout-sessions.md)
- [Stripe.js リファレンス](https://docs.stripe.com/js.md)