ES モジュール Stripe.js SDK

ウェブアプリケーションで ES モジュール Stripe.js クライアント側 SDK を設定します。

この導入ガイドでは、スクリプトタグまたはパッケージマネージャーを使用して ES モジュール Stripe.js のクライアント側 SDK をインストールする方法を説明します。SDK には、Stripe .js スクリプトによって提供されるグローバルの Stripe 関数が ES モジュールとしてラップされています。Stripe の構築済み UI コンポーネントである Elements を使用して、機密データを扱うことなく顧客のカード詳細を安全に収集できる決済フォームを作成できます。

はじめに

支払い方法の設定ページで、サポートする支払い方法を有効にします。

Stripe.js スクリプトを手動で読み込む

インストール

スクリプトを使用してインストールするには、Stripe.js ES モジュールを HTML の <head> 要素にスクリプトとして追加します。これにより、新たに作成されたすべての Stripe オブジェクトにコード内でグローバルにアクセスできるようになります。

<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/" async></script>
</head>

Stripe.js コンストラクター

次に、API 公開可能キーを設定し、Stripe が顧客情報をトークン化して機密性の高い決済情報を収集できるようにします。以下に例を示します。

var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Stripe.js を ES モジュールとして読み込む

インストール

パッケージマネージャーを使用してインストールする場合は、npm のパブリックレジストリーから Stripe.js ES モジュールをインストールします。

npm install @stripe/stripe-js

Stripe.js コンストラクター

次に、モジュールを JavaScript ファイルにインポートします。次の関数は、Stripe .js の読み込み後に、新しく作成された Stripe オブジェクトによって解決される Promise を返します。

import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

参照情報

これで、ES モジュール Stripe.js SDK を設定するための導入ガイドは終了です。システムの使用を開始するには、以下のリンクをご覧ください。