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

Payment Element は、多くの決済手段に対応しています。有効にした決済手段が表示され、現在の取引で機能しない決済手段は非表示になり、最適な購入完了率が得られるように動的に並べ替えられます。

動作は次のようにカスタマイズできます。

• さまざまな支払い方法を有効にします。
• デフォルト以外の方法で支払い方法を並べ替えます。
• 決済手段の数を制限するが表示されます。

さまざまな決済手段を有効にする

動的な決済手段を指定し、ダッシュボードでさまざまな決済手段を選択して有効にできます。Stripe は最新バージョンの API で、この機能をデフォルトで有効にしています。

これにより、Stripe はダッシュボードから決済手段の設定を取得し、利用者に最も関連性の高い決済手段を動的に表示できます。または、決済手段タイプを使用して手動で決済手段を表示することもできます。

Payment Element によって選択内容が上書きされる状況が 1 つあります。Payment Element は現在の支払いに対応していない支払い方法を非表示にします。たとえば、10 JPY の継続支払いでは、Payment Element は JPY または継続支払いに対応していない支払い方法を非表示にします。

決済手段を並べ替える

デフォルトでは、Payment Element は動的な順序を使用して、各ユーザーに表示する支払い方法を最適化します。paymentMethodOrder パラメーターを使用すると、Payment Element での支払い方法のデフォルト順序を上書きできます。これには、Apple Pay と Google Pay も含まれます。

paymentMethodOrder で指定した支払い方法が最初に表示され、次に他の支払い方法が表示されます。Stripe が表示しない支払い方法のタイプを指定した場合、それらは無視されます。

elements.create('payment', {
  paymentMethodOrder: ['apple_pay', 'google_pay', 'card', 'klarna']
});

決済手段の順序を設定するときに、決済手段のタイプの一覧に加えて、Apple Pay (apple_pay) と Google Pay (google_pay) を含めることができます。並べ替えを指定すると、Stripe は利用可能な残りの決済手段に動的な順序を適用します。

決済手段の数を制限する

アコーディオンレイアウトを使用する場合、Payment Element にはデフォルトで最大 5 つの決済手段が表示され、残りは その他 ボタンの背後に隠されます。

表示する決済手段の数を調整するには、layout.visibleAccordionItemsCount プロパティを設定します。

elements.create('payment', {
  layout: {
    type: 'accordion',
    // Set a different default, or set to 0 to disable the
    // "More" button and render all available Payment Methods
    visibleAccordionItemsCount: 3
  }
});