コンテンツにスキップ
アカウント作成/サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments を使用する
Elements を使用したカスタム統合の構築
対面決済
決済手段
決済シナリオ
決済以外の機能

メモ

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

Express Checkout Element で決済を受け付ける

単一の導入を使用して、ワンクリックの支払いボタンで決済を受け付けます。

Express Checkout Element

Express Checkout Element は、ワンクリックの決済手段ボタンによる決済を受け付けるための導入です。サポートされている決済手段は、Link、Apple Pay、Google Pay、PayPal、Klarna、Amazon Pay などです。

顧客に表示される決済ボタンは、デバイスとブラウザーによって異なります。互換性のあるデバイスでは、Google Pay と Link に自動的に対応します。Apple Pay と PayPal に対応するには、追加の手順を実行する必要があります。

デモを試す

デモでは、構築済みのオプションを切り替えて、背景色、レイアウト、サイズ、配送先住所回収を変更できます。このデモでは、Google Pay と Apple Pay が利用可能なプラットフォームでのみ表示されています。決済手段ボタンは、サポート対象国でのみ表示されます。

デモが表示されない場合は、このページを サポート対象のブラウザー で表示してみてください。

オプション説明
加盟店の所在国Stripe.js の初期化に使用する公開可能キーを使用して設定します。国を変更するには、Express Checkout Element のマウントを解除し、公開可能キーを更新してから、Express Checkout Element を再マウントする必要があります。
背景色Elements Appearance API を使用して色を設定します。ボタンテーマは Appearance API から継承されますが、Element の作成時に直接定義することもできます。
デスクトップとモバイルのサイズドロップダウンを使用して、Express Checkout Element がマウントされる親エレメントの最大ピクセル幅を設定します。750px (デスクトップ) または 320px (モバイル) を設定できます。
最大列数と最大行数これらの値を設定するには、Express Checkout Element を作成するときに、layout パラメーターを使用します。
オーバーフローメニューこれを設定するには、Express Checkout Element を作成するときに、layout パラメーターを使用します。
配送先住所を収集する配送先情報を収集するには、Express Checkout Element の作成時にオプションを渡す必要があります。顧客の詳細情報の収集と項目の表示の詳細をご覧ください。

はじめに

  1. ブラウザーに支払い方法を追加します。たとえば、カードを Google Pay アカウントや Safari のウォレットに追加できます。
  2. アプリケーションは HTTPS 経由で提供します。これは、開発環境と本番環境で必須です。ngrok などのサービスを利用できます。
  3. サンドボックスと本番環境の両方でドメインを登録します。

Stripe を設定する
サーバ側

まず、Stripe アカウントを作成するかサインインします。

アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

支払い方法を有効にする

デフォルトでは、Stripe は決済手段設定を使用して、Express Checkout Element で表示される決済手段を決定します。payment_method_types 属性を使用して、Checkout Session で特定の決済手段を設定することもできます。

サポートされている決済手段

card 決済手段タイプを使用すると、Apple Pay と Google Pay が自動的に有効になります。Link を使用する場合は、card 決済手段タイプも渡す必要があります。

決済手段決済手段の種類
Amazon Payamazon_pay
Apple Paycard
Google Paycard
Linklink、card
PayPalpaypal

Checkout Session を作成
サーバー側

サーバーで Checkout Session を作成して決済フローを制御します。Checkout Session は、項目、配送オプション、決済のその他の設定を定義します。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  -d mode=payment \
  -d ui_mode=custom \
  -d return_url={{RETURN_URL}}

ui_mode を custom に設定して Express Checkout Element に統合します。返される Checkout Session には Client Secret が含まれ、クライアントはこれを使用して Checkout インターフェイスを安全に表示します。

Checkout Session で追加オプションを設定できます。

Stripe Elements を設定する
クライアント側

Express Checkout Element は Stripe.js の機能として自動的に使用できるようになります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの head にこれを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></script>
</head>

サーバーから Client Secret を取得します。

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

サーバーから Client Secret を取得する fetchClientSecret 関数を作成します。

checkout.js
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

Checkout インスタンスを作成します。

checkout.js
const checkout = stripe.initCheckout({
  clientSecret
});

Express Checkout Element を作成してマウントする
クライアント側

Express Checkout Element には、HTTPS 接続を介して決済情報を Stripe に安全に送信する iframe が含まれています。導入を機能させるには、決済ページのアドレスの先頭を https://, ではなく http://, にする必要があります。

決済ページに Express Checkout Element を配置する場所が必要です。支払いフォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。

checkout.html
<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>

フォームが読み込まれたら、Express Checkout Element のインスタンスを作成し、コンテナーの DOM ノードにマウントします。

checkout.js
// Create and mount the Express Checkout Element
const expressCheckoutElement = checkout.createExpressCheckoutElement();
expressCheckoutElement.mount('#express-checkout-element');

顧客の詳細情報を収集してラインアイテムを表示する
クライアント側

サーバーで作成した Checkout Session によって、項目、合計金額、利用可能な決済手段が自動的に決定されます。Express Checkout Element はこの情報を使用して、適切なインターフェイスを表示します。

決済確定の処理

顧客が決済を確定したときに confirm event をリッスンします。

checkout.js
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  expressCheckoutElement.on('confirm', (event) => {
    loadActionsResult.actions.confirm({expressCheckoutConfirmEvent: event});
  });
}

動的な更新を処理する

顧客の選択 (配送先住所や配送料金の変更など) に基づいて Checkout Session を更新する必要がある場合は、イベントをリッスンしてセッションを更新できます。

checkout.js
expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/update-session-shipping', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingAddress: event.address
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});

expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/update-session-shipping-rate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingRateId: event.shippingRate.id
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});

オプションready イベントをリッスンする
クライアント側

マウント後、しばらくの間は Express Checkout Element にボタンが表示されません。ボタンを表示するときに Element をアニメーション表示するには、ready イベントをリッスンし、availablePaymentMethods の値を調べて、Express Checkout Element に表示するボタン (ある場合) を決定します。

checkout.js
// Optional: If you're doing custom animations, hide the Element
const expressCheckoutDiv = document.getElementById('express-checkout-element');
expressCheckoutDiv.style.visibility = 'hidden';

expressCheckoutElement.on('ready', ({availablePaymentMethods}) => {
  if (!availablePaymentMethods) {
    // No buttons will show
  } else {
    // Optional: Animate in the Element
    expressCheckoutDiv.style.visibility = 'initial';
  }
});

オプションボタンのスタイルを設定する
クライアント側

決済手段ボタンごとに異なるスタイルを設定し、Express Checkout Element の全体的な外観を制御できます。

checkout.js
const expressCheckoutElement = checkout.createExpressCheckoutElement({
  // Specify a type per payment method
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out',
    paypal: 'buynow',
  },
  // Specify a theme per payment method
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
});

実装をテストする

本番環境に移行する前に、各支払い方法の組み込みをテストします。支払い方法のブラウザーとの互換性を判断するには、サポートされるブラウザーをご覧ください。iframe で Express Checkout Element を使用している場合、iframe で allow 属性を payment * に設定する必要があります。

注意

サンドボックスの Link アカウントには実際のユーザーデータを保存しないでください。これらのテストアカウントは公開可能キーに関連付けられているため、公開されるものとして扱ってください。

Link は現在、クレジットカード、デビットカード、および資格要件を満たしたアメリカの銀行口座からの購入にのみ対応しています。Link では、ドメインの登録が必要です。

有効なメールアドレスを使用して、Link のサンドボックスアカウントを作成できます。次の表は、Stripe がサンドボックスアカウントの認証に使用できる共通のワンタイムパスコードの値を示しています。

値結果
以下に記載されていない任意の 6 桁の数字成功
000001エラー: コードが無効です
000002エラー: コードの有効期限が切れています
000003エラー: 最大試行回数を超えました

オプションStripe Connect で Express Checkout Element を使用する

Connect プラットフォームは、Express Checkout Element with Checkout Sessions をセッションに含めることで使用できます。

  1. サーバーで Checkout Session を作成する際は、連結アカウントを含めます。

    Command Line
    curl https://api.stripe.com/v1/checkout/sessions \
  -u sk_test_...: \
  -d "line_items[0][price]"="price_..." \
  -d "line_items[0][quantity]"=1 \
  -d "mode"="payment" \
  -d "ui_mode"="custom" \
  -d "return_url"="https://example.com/return" \
  -H "Stripe-Account: 
    {{CONNECTED_ACCOUNT_ID}}
    "

  2. Express Checkout Element を表示する予定のすべてのドメインを登録します。

顧客に Stripe を開示する

Stripe は顧客の Elements とのやり取りに関する情報を収集して、サービスを提供し、不正利用を防止し、サービスを向上します。これには、Cookie と IP アドレスを使用して、1 つの決済フローセッションで顧客に表示する Elements を特定することが含まれます。Stripe がこのような方法でデータを使用するために必要なすべての権利と同意について開示し、これらを取得することはお客様の責任です。詳細については、プライバシーセンターをご覧ください。

参照情報