Display Affirm messagingVeraltet

Let your customers know you accept payments with Affirm by including the Affirm messaging Element on your site. We suggest adding the messaging Element to your product, cart, and payment pages. The Affirm messaging Element takes care of:

• Calculating and displaying the installments amount
• Displaying the Affirm information modal

Include the Element

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

<div id="affirm-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: 5000, // $50.00 USD
  currency: 'USD'
};

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

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

Customize the message

There are many options available to customize the appearance and contents of the messaging Element. See the API reference for the full list of options.

Logo color

Use the logoColor option to choose between the following styles:

primary	black	white

Style with CSS

Additional configuration options allow you to use CSS to style the messaging to better fit the look and feel of your site. You can customize the fontColor, fontSize, and textAlign of the messaging:

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

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