Affirm メッセージの表示非推奨

決済の前に Affirm を提案することを顧客に伝えて、コンバージョン率を向上させましょう。

注意

This doc refers to a Legacy feature that’s no longer available in the latest version of Stripe.js. We recommend you use the Payment Method Messaging Element to dynamically show your customers relevant buy now, pay later payment options for their purchase.

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

分割払いの金額を計算して表示する
Affirm 情報モーダルを表示する

The Making of Prince of Persia: Journals 1985-1993

Jordan Mechner

$50

Element を追加する

注意

Affirm の最小取引額は 50 USD または 50 CAD です。金額パラメーターを 50 USD または 50 CAD 未満に設定すると、プロモーションメッセージが表示されません。

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

Stripe.js スクリプトを HTML ファイルの head に追加することで、このスクリプトをページに含めます (まだ含めていない場合)。

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

メッセージ Element をマウントするページ上の位置に、プレースホルダーエレメントを作成します。

<div id="affirm-message"></div>

商品、カート、支払いの各ページに次のコードを含めて、Stripe.js のインスタンスを作成し、メッセージ 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: 5000, // $50.00 USD
  currency: 'USD'
};

const affirmMessageElement =
  elements.create('affirmMessage', options);

affirmMessageElement.mount('#affirm-message');

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

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

ロゴの色

logoColor オプションを使用して、次のスタイルから選択します。

primary	black	white

CSS によるスタイル設定

追加の設定オプションでは、CSS を使用してサイトのデザインに合うようにメッセージのスタイルを設定できます。メッセージの fontColor、fontSize、textAlign をカスタマイズできます。

Code Example

const options = {
  amount: 5000,
  currency: 'USD',
  fontColor: '#5B63FF',
  logoColor: 'black',
  fontSize: '16px',
  textAlign: 'center',
};

const affirmMessageElement = elements.create('affirmMessage', options);