Express Checkout Element

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

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

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

デモを試す

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

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

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

決済手段

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

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

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

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

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

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

レイアウト

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

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

テキスト

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

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

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

デザイン

支払い方法のそれぞれにロゴとブランドカラーがあるため、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 が表示されないようにするには、paymentMethods.applePay または paymentMethods.googlePay に never を設定します。
• Apple Pay または Google Pay が設定されていない場合でもこれらの支払い方法が表示されるようにするには、paymentMethods.applePay または paymentMethods.googlePay に always を指定します。ただし、サポートされていないプラットフォームや、対応していない通貨での支払いに、これらの支払い方法が強制的に表示されることはありません。

利用可能な決済手段を確認する

ready イベントをリッスンして、Express Checkout Element で表示可能なウォレットを確認します。利用可能なウォレットがない場合、顧客に別の決済オプションを提示します。

() => {
  const [eceActive, setEceActive] = useState(false);

  return (
    <div>
      <ExpressCheckoutElement
        onReady={({ availablePaymentMethods }) => {
          if (availablePaymentMethods) {
            setEceActive(true);

または、要素に表示するメソッドがあることがわかるまで、Express Checkout Element 全体を非表示にしてください。

() => {
  const [eceActive, setEceActive] = useState(false);

  return (
    <div>
      <OneClickCheckoutContainer hidden={!eceActive}>
        <ExpressCheckoutElement
          onReady={({ availablePaymentMethods }) => {
            if (availablePaymentMethods) {

React なしで作成された場合、Element オブジェクトでも同じイベントを使用できます。

const expressCheckoutElement = elements.create("expressCheckout", { ... });

expressCheckoutElement.on("ready", ({ availablePaymentMethods }) => {
  console.log(availablePaymentMethods);
});

expressCheckoutElement.mount("#express-checkout-element");