Express Checkout Element
Express Checkout Element を使用すると、一度の導入で、ワンクリックの支払いボタンによる決済を受け付けることができます。対応可能な決済手段には、Link、Apple Pay、Google Pay、PayPal、Amazon Pay などがあります。
この導入によって、以下が可能になります。
- 顧客の場所に基づいて支払いボタンを動的に並べ替える
- フロントエンドを変更することなく支払いボタンを追加する
- 既存の Elements インスタンスを再使用して Elements をシームレスに実装することで、時間を節約する
デモを見る
以下のデモでは、構築済みのオプションを切り替えて、支払いインターフェイスの背景の色、レイアウト、サイズ、配送先住所収集を変更できます。このデモでは、Google Pay と Apple Pay が利用可能なプラットフォームでのみ表示されています。決済手段ボタンは、サポート対象国でのみ表示されます。
デモが表示されない場合は、このページをサポート対象のブラウザーで表示してみてください。
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 は、有効で、サポート対象で、設定済みのワンクリックの決済手段を表示します。
- 一部の決済手段は、ダッシュボードで有効化する必要があります。
- 決済手段は、顧客が対応しているブラウザーを使用し、対応している通貨で支払う場合にのみ利用可能になります。
- 一部の決済手段には顧客による設定操作が必要です。たとえば、顧客が Google Pay を設定していない場合、Google Pay ボタンは表示されません。
Element は顧客への関連性に基づいて決済手段を並べ替えます。
これらの動作をコントロールするには、決済手段をカスタマイズします。
サポートされるブラウザー
決済手段の中には、特定のブラウザーでのみ機能するものもあります。
Apple Pay | Google Pay | Link | PayPal | Amazon Pay | |
---|---|---|---|---|---|
Chrome1 | |||||
Edge | |||||
Firefox | |||||
Opera | |||||
Safari | 2 | ||||
iOS 16 以降の Chrome および Firefox | |||||
iOS 16 以降の Edge |
1その他の Chromium ブラウザーがサポートされている場合があります。詳細については、サポート対象のブラウザーをご覧ください。2iframe を使用する場合は、そのオリジンがトップレベルのオリジンと一致している必要があります (Safari 17 で allow="payment"
属性を指定する場合を除く)。プロトコル、ホスト (フルドメイン名)、ポート (指定されている場合) が 2 つのページで同一である場合、そのオリジンは同一です。
レイアウト
デフォルトでは、Express Checkout Element は複数のボタンを表示する際、利用できるスペースに応じてボタンをグリッドに配置し、必要に応じてオーバーフローメニューを表示します。
このデフォルト設定を上書きし、レイアウトオプションを使用して、自身でグリッドレイアウトを指定できます。
テキスト
buttonType を選択して、ボタンのテキストをコントロールできます。ウォレットごとに固有のタイプが提供されます。
このサンプルコードには、対応するボタンに「購入」や「今すぐ購入」の行動喚起が含まれています。次に、ドイツ語で同じように表示するために de
のロケールを指定しています。
const expressCheckoutOptions = { buttonType: { applePay: 'buy', googlePay: 'buy', paypal: 'buynow' } } const elements = stripe.elements({ locale: 'de', mode: 'payment',
デザイン
決済手段のそれぞれにロゴとブランドカラーがあるため、Express Checkout Element ボタンの見た目を完全にカスタマイズすることはできません。以下のオプションをカスタマイズできます。
- ボタンの高さ
- Appearance API と変数を使用した境界半径
- ボタンのテーマ
このサンプルコードでは、薄い色のテーマと 36px の境界半径で Elements グループを設定し、ボタンの高さを 50px とし、白い輪郭線バージョンの Apple Pay ボタンを使用するようにテーマを上書きします。
const appearance = { theme: 'stripe', variables: { borderRadius: '36px', } } const expressCheckoutOptions = { buttonHeight: '50', buttonTheme: {
以下のようなテーマをサポートしています。
決済手段をカスタマイズする
表示する決済手段を指定することはできません。たとえば、顧客のデバイスが Google Pay をサポートしていない場合に Google Pay ボタンを表示することはできません。
ただし、決済手段の動作は次のような方法でカスタマイズできます。
- ダッシュボードで決済手段を有効または無効にできます。
- Stripe のデフォルトのロジックは関連性によって決済手段を並べ替えますが、これを上書きできます。自分の希望の順序を設定するには、paymentMethodOrder オプションを使用します。
- レイアウトにスペースが足りない場合は、関連性の低い決済手段がオーバーフローメニューに表示される可能性があります。レイアウトオプションを使用することで、メニューが表示されるタイミングをカスタマイズできます。
- Apple Pay または Google Pay が表示されないようにするには、wallets.applePay または wallets.googlePay に
never
を設定します。 - Apple Pay または Google Pay が設定されていない場合でもこれらの決済手段が表示されるようにするには、wallets.applePay または wallets.googlePay に
always
を指定します。ただし、サポートされていないプラットフォームや、対応していない通貨での支払いに、これらの決済手段が強制的に表示されることはありません。