Payment Method Messaging Element

後払いオプションを自動的に説明します。

Payment Method Messaging Element は、利用可能な後払いプランについて顧客に伝える UI コンポーネントです。利用可能なプランと条件を自動的に特定し、各地域に合わせて説明を生成し、それをフォームのテーマで表示します。

The Making of Prince of Persia: Journals 1985-1993

Jordan Mechner

$99.00

Payment Method Messaging Element を作成およびマウントする

Stripe Elements を使用して、サイトに Payment Method Messaging Element を含めます。

Stripe.js スクリプトをページに追加するには、このスクリプトを HTML ファイルの head に追加します。
```
<script src="https://js.stripe.com/v3/"></script>
```
Payment Method Messaging Element をマウントするページに、プレースホルダーエレメントを作成します。
```
<div id="payment-method-messaging-element"></div>
```

商品、カート、決済の各ページに次のコードを含めて、Stripe.js (ロケールを指定) のインスタンスを作成し、Payment Method Messaging Element をマウントします。

// Set your publishable key. Remember to change this to your live publishable key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();
const options = {
  amount: 9900, // $99.00 USD
  currency: 'USD',
  // (optional) the country that the end-buyer is in
  countryCode: 'US',
};
const PaymentMessageElement =
  elements.create('paymentMethodMessaging', options);
PaymentMessageElement.mount('#payment-method-messaging-element');

注意

貴社で構築済みの Stripe システムで支払い方法を手動で一覧表示する必要がある場合は、支払い方法をカスタマイズする方法をご覧ください。

オプションStripe Connect とともに使用する

動的な表示

Element は顧客が資格を持つ決済プランを動的に表示します。プランは顧客の場所と通貨によって変わり、またこの例のように支払い金額によっても変わります。

$0.99	$99	$1200

一部の決済手段では、「後払い」プランおよび「今すぐ支払う」プランが提供されます。利用できるのが「今すぐ支払う」オプションのみである場合は、何も表示されません。

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

動的な支払い方法を使用する場合、Payment Method Messaging Element では、Stripe ダッシュボードから支払い方法の設定が自動的にプルされ、最も関連性が高い支払い方法が顧客に動的に表示されます。あるいは、paymentMethodTypes を使用して、支払い方法を手動で一覧表示することができます。Payment Method Messaging Element では、引き続き、顧客の場所、通貨、支払い金額に基づいて顧客に利用する資格があるプランのみが表示されます。

// Set your publishable key. Remember to change this to your live publishable key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();
const options = {
  amount: 9900, // $99.00 USD
  currency: 'USD',
  paymentMethodTypes: ['klarna', 'afterpay_clearpay', 'affirm'],
  // (optional) the country that the end-buyer is in
  countryCode: 'US',
};
const PaymentMessageElement =
  elements.create('paymentMethodMessaging', options);
PaymentMessageElement.mount('#payment-method-messaging-element');

デフォルトでは、Payment Element は動的な順序を使用して、各ユーザーに表示する支払い方法を最適化します。希望の注文を設定するには、paymentMethodOrder オプションを使用します。

顧客がインフォメーションアイコン (ⓘ) を選択すると、Payment Method Messaging Element は、後払いプランの詳細を記したモーダルを表示します。

情報モーダルのプレビュー

モーダルには以下が含まれます。

後払い支払い方法の使用方法に関する段階的な概要
各支払いプランの規約概要
各支払いプランの規約全文へのリンク

サポートされているプラン

Payment Method Messaging Element は、次の支払いプランをサポートしています。

注意

渡された 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',
  },
  rules: {
    '.PaymentMethodMessaging': {
        textAlign: 'right',
    }
  }
};

顧客に Stripe を開示する

Stripe は顧客の Elements とのやり取りに関する情報を収集して、サービスを提供し、不正利用を防止し、サービスを向上します。これには、Cookie と IP アドレスを使用して、1 つの決済フローセッションで顧客に表示する Elements を特定することが含まれます。Stripe がこのような方法でデータを使用するために必要なすべての権利と同意について開示し、これらを取得することはお客様の責任です。詳細については、プライバシーセンターをご覧ください。

Payment Method Messaging Element は、顧客にさまざまな後払いオプションを提供できるようにするツールです。後払いオプションのプロモーションに関して適用される法律、規則、規制に準拠する責任はお客様にあります。