Afterpay または Clearpay のメッセージを表示する非推奨

サイトに Afterpay メッセージ Element を含めて、Afterpay による支払いを受け付けていることを顧客に知らせましょう。メッセージ Element を、商品、カート、支払いの各ページに追加することをお勧めします。afterpayClearpayMessage Element は以下の処理を行います。

• 分割払いの金額を計算して表示する
• Afterpay 情報モーダルを表示する
• テキストと通貨をローカライズする

Element を追加する

<script src="https://js.stripe.com/basil/stripe.js"></script>

<div id="afterpay-clearpay-message"></div>

// 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: 1000, // $10.00 USD
  currency: 'USD'
};

const afterpayClearpayMessageElement =
  elements.create('afterpayClearpayMessage', options);

afterpayClearpayMessageElement.mount('#afterpay-clearpay-message');

メッセージをカスタマイズする

メッセージ Element の外観とコンテンツをカスタマイズするための、さまざまなオプションが用意されています。オプションの一覧については、API リファレンスをご覧ください。

バッジロゴ

logoType を 'badge' に設定し、badgeTheme オプションを使用して、次のスタイルから選択します。

ロックアップロゴ

logoType を 'lockup' に設定し、lockupTheme オプションを使用して、次のスタイルから選択します。

CSS によるスタイル設定

設定オプションに加えて、CSS を使用してサイトのデザインに合うようにメッセージのスタイル設定を行います。メッセージの font-family、font-size、color をカスタマイズできます。

.AfterpayMessage {
  font-family: monospace;
  font-size: 14px;
  color: blue;
}

width と height を設定して、ロゴのサイズをコントロールすることもできます。

.AfterpayMessage-logoSvg {
  width: 80px;
  height: auto;
}

対象外のアイテムを処理する

特定の禁止業種カテゴリーでは Afterpay を使用できません。これらの禁止カテゴリーに該当するアイテムを販売している場合でも、Afterpay を利用できないことを明確に示すメッセージ Element を表示することはできます。

isEligible または isCartEligible オプションを使用して、現在の商品またはカートが対象外であることを示します。

Afterpay には、国ごとにデフォルトの取引限度額も設定されています。指定した amount がこれらの限度額を超えると、対象外の価格帯であることを示すメッセージが Element によって自動的に表示されます。このメッセージをカスタマイズするには、showLowerLimit および showUpperLimit を使用して下限や上限を非表示にします。

ロケールと通貨

Afterpay と Clearpay は、次のロケールと通貨をサポートしています。

サポート対象のロケール: en-US、en-CA、en-AU、en-NZ、en-GB

サポート対象の通貨: USD、CAD、AUD、NZD、GBP

Afterpay はユーザーのロケールと国に基づき、支払い可能な適切な分割回数をいつでもメッセージに表示します。詳細については、支払いの回収をご覧ください。

const elements = stripe.elements({
  locale: 'en-GB'
});

const options = {
  amount: 1000, // £10.00
  currency: 'GBP'
};

const afterpayClearpayMessageElement =
  elements.create('afterpayClearpayMessage', options);

afterpayClearpayMessageElement.mount('#afterpay-clearpay-message');