Express Checkout Element

1 つのコンポーネントで複数のワンクリックの支払いボタンを表示します。

Express Checkout Element を使用すると、ワンクリックの決済ボタンで決済を受け付ける単一の実装システムを実現できます。サポートされる決済手段には、Link、Apple Pay、Google Pay、PayPal、Amazon Pay などがあります。

この導入によって、以下が可能になります。

顧客の場所に基づいて支払いボタンを動的に並べ替える
フロントエンドを変更することなく支払いボタンを追加する
既存の Elements インスタンスを再使用して Elements をシームレスに実装することで、時間を節約する

Klarna on the Express Checkout Element

Klarna on the Express Checkout Element is currently in private preview with limited availability. Reach out here to request access.

デモを試す

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

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

オプション	説明
加盟店の所在国	Set this using the publishable key that you use to initialize Stripe.js. To change the country, you must unmount the Express Checkout Element, update the publishable key, then re-mount the Express Checkout Element.
Background color	Set colors using the Elements Appearance API. Button themes are inherited from the Appearance API but you can also define them directly when you create the Element.
Desktop and mobile size	Use the dropdown to set the max pixel width of the parent element that the Express Checkout Element is mounted to. You can set it to 750px (Desktop) or 320px (Mobile).
Max columns and max rows	Set these values using the layout parameter when you Create the Express Checkout Element.
Overflow menu	Set this using the layout parameter when you Create the Express Checkout Element.
Collect shipping address	To collect shipping information, you must pass options when creating the Express Checkout Element. Learn more about collecting customer details and displaying line items.

ガイドを見ながら始めましょう

決済ページにワンクリックウォレットを追加する

Checkout Sessions API を使用して、Express Checkout Element との導入を構築します。

高度な導入でワンクリックウォレットを使用

Payment Intents API を使用して、Express Checkout Element との導入を構築します。

Express Checkout Element に移行する

Payment Request Button Element からウェブの Express Checkout Element に移行します。

Stripe.js リファレンスを表示する

Express Checkout Element を作成する

このコードは、Express Checkout Element を含む Elements グループを作成して、DOM にマウントします。

const appearance = { /* appearance */ }
const options = { /* options */ }
const elements = stripe.elements({
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  appearance,
})
const expressCheckoutElement = elements.create('expressCheckout', options)
expressCheckoutElement.mount('#express-checkout-element')

注

Express Checkout Element は、利用可能なスペースを確保するために支払い方法ボタンのサイズを動的に変更しますが、支払い方法に応じて個々のボタンの最小幅が異なる場合があります。特に Express Checkout Element を短いコンテナーにマウントする場合は、必ずさまざまな画面サイズでテストしてください。

支払い方法

Express Checkout Element は、有効で、サポート対象で、設定済みのワンクリックの支払い方法を表示します。

一部の決済手段では、ダッシュボードでの有効化が必要です。
支払い方法は、顧客が対応しているブラウザーを使用し、対応している通貨で支払う場合にのみ利用可能になります。
一部の支払い方法には顧客による設定操作が必要です。たとえば、顧客が Google Pay を設定していない場合、Google Pay ボタンは表示されません。

Element は顧客への関連性に基づいて支払い方法を並べ替えます。

これらの動作をコントロールするには、支払い方法をカスタマイズします。

サポートされるブラウザー

支払い方法の中には、特定のブラウザーでのみ機能するものもあります。

	Apple Pay	Google Pay	Link	PayPal	Amazon Pay
Chrome¹
Edge
Firefox
Opera
Safari	²
iOS 16 以降の Chrome
iOS 16 以降の Firefox
iOS 16 以降の Edge

¹その他の Chromium ブラウザーがサポートされている場合があります。詳細については、サポート対象のブラウザーをご覧ください。

²iframe を使用する場合は、そのオリジンが上位のオリジンと一致している必要があります (Safari 17 以降で allow="payment" 属性を指定する場合を除く)。プロトコル、ホスト (フルドメイン名)、ポート (指定されている場合) が 2 つのページで同一である場合、そのオリジンは同一です。

レイアウト

デフォルトでは、Express Checkout Element は複数のボタンを表示する際、利用できるスペースに応じてボタンをグリッドに配置し、必要に応じてオーバーフローメニューを表示します。

このデフォルト設定を上書きし、レイアウトオプションを使用して、自身でグリッドレイアウトを指定できます。

テキスト

buttonType を選択して、ボタンのテキストをコントロールできます。ウォレットごとに固有のタイプが提供されます。

Link で提供できるボタンタイプは 1 種類のみで、「Pay with Link」の行動喚起と Link のロゴが表示されます。

Stripe は顧客のロケールを検出し、それを使用してボタンのテキストを地域に合わせられるようにします。ロケールを指定することもできます。

このサンプルコードには、対応するボタンに「購入」や「今すぐ購入」の行動喚起が含まれています。次に、ドイツ語で同じように表示するために de のロケールを指定しています。

const expressCheckoutOptions = {
  buttonType: {
    applePay: 'buy',
    googlePay: 'buy',
    paypal: 'buynow',
    klarna: 'pay',
  }
}
const elements = stripe.elements({
  locale: 'de',

デザイン

支払い方法のそれぞれにロゴとブランドカラーがあるため、Express Checkout Element ボタンの見た目を完全にカスタマイズすることはできません。以下のオプションをカスタマイズできます。

ボタンの高さ
Appearance API と変数を使用した境界半径
ボタンのテーマ

注

境界線の範囲が一定のしきい値を超えると、Apple Pay ボタンのサイズは自動的に変更されます。デフォルトの境界線の範囲を変更する場合は、すべての有効な決済手段でテストしてください。

このサンプルコードでは、薄い色のテーマと 36px の境界半径で Elements グループを設定し、ボタンの高さを 50px とし、白い輪郭線バージョンの Apple Pay ボタンを使用するようにテーマを上書きします。

const appearance = {
  theme: 'stripe',
  variables: {
    borderRadius: '36px',
  }
}
const expressCheckoutOptions = {
  buttonHeight: 50,
  buttonTheme: {

以下のようなテーマをサポートしています。

Link には、薄い色と濃い色のどちらの背景でも読むことができる 1 つのボタンテーマが用意されています。

支払い方法をカスタマイズする

表示する支払い方法を指定することはできません。たとえば、顧客のデバイスが Google Pay をサポートしていない場合に Google Pay ボタンを表示することはできません。

ただし、支払い方法の動作は次のような方法でカスタマイズできます。

ダッシュボードで支払い方法を有効または無効にできます。
Stripe のデフォルトのロジックは関連性によって支払い方法を並べ替えますが、これを上書きできます。自分の希望の順序を設定するには、paymentMethodOrder オプションを使用します。
レイアウトにスペースが足りない場合は、関連性の低い支払い方法がオーバーフローメニューに表示される可能性があります。レイアウトオプションを使用することで、メニューが表示されるタイミングをカスタマイズできます。
Apple Pay または Google Pay が表示されないようにするには、paymentMethods.applePay または paymentMethods.googlePay に never を設定します。
Apple Pay または Google Pay が設定されていない場合でもこれらの支払い方法が表示されるようにするには、paymentMethods.applePay または paymentMethods.googlePay に always を指定します。ただし、サポートされていないプラットフォームや、対応していない通貨での支払いに、これらの支払い方法が強制的に表示されることはありません。

地域的な考慮事項
フィンランド
スウェーデン

フィンランドおよびスウェーデンの規制は、これらの国での決済時に口座引き落としによる支払い方法をクレジットの支払い方法より前に提示することを義務付けています。

注