Payment Method Messaging Element
Payment Method Messaging Element は、利用可能な後払いプランについて顧客に伝える UI コンポーネントです。利用可能なプランと条件を自動的に特定し、各地域に合わせて説明を生成し、それをフォームのテーマで表示します。
注意
現在、イギリスの Payment Method Messaging Element for Klarna は、イギリスの金融プロモーションルールに準拠するように更新しているため、無効化されています。
注
Apple Pay Later は、Apple のデバイスとブラウザでご利用いただけます。
Payment Method Messaging Element を作成およびマウントする
注意
貴社で構築済みの Stripe システムで決済手段を手動で一覧表示する必要がある場合は、決済手段をカスタマイズする方法をご覧ください。
動的な表示
Element は顧客が資格を持つ決済プランを動的に表示します。プランは顧客の場所と通貨によって変わり、またこの例のように支払い金額によっても変わります。
$0 | $99 | $1200 |
利用できる場合、x 回払いプランとは別の行に、有利息のローン支払いプランが表示され、これによりエレメントに必要な領域が増える場合があります。
決済手段をカスタマイズする
動的な決済手段を使用する場合、Payment Method Messaging Element では、Stripe ダッシュボードから決済手段の設定が自動的にプルされ、最も関連性が高い決済手段が顧客に動的に表示されます。あるいは、paymentMethodTypes
を使用して、決済手段を手動で一覧表示することができます。Payment Method Messaging Element では、引き続き、顧客の場所、通貨、支払い金額に基づいて顧客に利用する資格があるプランのみが表示されます。
情報モーダル
顧客が情報アイコン (ⓘ) を選択すると、Payment Method Messaging Element は、後払いプランの詳細を示すモーダルを表示します。
情報モーダルのプレビュー
モーダルには以下が含まれます。
- 後払い決済手段の使用方法に関する段階的な概要
- 利用可能な各支払いプランの規約のサマリー
- 利用可能な各支払いプランの全規約へのリンク
サポートされているプラン
Payment Method Messaging Element は以下の決済手段と決済プランに対応しています。
Klarna | Afterpay | Affirm | Apple Pay Later |
---|---|---|---|
|
|
|
|
countryCode
には次の値をサポートしています: US, CA, AU, NZ, GB, IE, FR, ES, DE, AT, BE, DK, FI, IT, NL, NO, SE
。
currency
には次の値をサポートしています: USD, GBP, EUR, DKK, NOK, SEK, CAD, AUD
。
注意
渡された countryCode
と currency
の組み合わせに利用可能な支払いプランがない場合には、メッセージは表示されません。
デザイン
Appearance API を使用して、メッセージのフォントとロゴをカスタマイズします。以下の例のように、テーマも選択できます。
Flat | |
Night | |
Stripe |
変数を使用して、さらにカスタム設定できます。
const appearance = { variables: { colorText: 'rgb(84, 51, 255)', colorTextSecondary: 'rgb(28, 198, 255)', // info icon color fontSizeBase: '16px', spacingUnit: '10px', fontWeightMedium: 'bolder', fontFamily: 'Ideal Sans, system-ui, sans-serif', } };
Payment Method Messaging Element は、顧客にさまざまな後払いオプションを提供できるようにするツールです。後払いオプションのプロモーションに関して適用される法律、規則、規制に準拠する責任はお客様にあります。