Afficher les messages AffirmObsolète

Augmentez le taux de conversion en indiquant aux clients que vous proposez Affirm avant le paiement.

Mise en garde

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.

Prévenez vos clients que vous acceptez les paiements avec Affirm en intégrant le composant Element Affirm messaging sur votre site. Nous vous conseillons d’ajouter l’Element de message à vos pages produit, panier et paiement. Le composant Element Affirm messaging prend en charge les éléments suivants :

Calcul et affichage du montant des versements échelonnés
Affichage du modal d’information Affirm

The Making of Prince of Persia: Journals 1985-1993

Jordan Mechner

$50

Inclure le composant Element

Mise en garde

Le montant minimal de transaction Affirm est de 50 USD ou 50 CAD. Le message promotionnel ne s’affiche pas si la valeur du paramètre du montant est inférieure à 50 USD ou 50 CAD.

Utilisez Stripe Elements pour inclure le composant Element affirmMessage sur votre site.

Si ce n’est pas déjà fait, intégrez le script Stripe.js à votre page en l’ajoutant entre les balises head de votre fichier HTML :

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

Créez un élément substituable sur votre page là où vous souhaitez monter le composant Element de messagerie :

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

Sur vos pages produit, panier et paiement, intégrez le code suivant pour créer une instance de Stripe.js et monter le composant Element de messagerie :

// 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');

Personnaliser le message

De nombreuses options sont disponibles pour personnaliser l’apparence et les contenus du composant Element de messagerie. Vous pouvez consulter la documentation de l’API pour obtenir la liste complète des options.

Couleur de logo

Utilisez l’option logoColor pour choisir entre les styles suivants :

primary	black	white

Styliser avec CSS

Des options de configuration supplémentaires permettent d’utiliser CSS pour styliser le message aux couleurs de votre site. Vous pouvez personnaliser la fontColor, la fontSize et le textAlign du message :

Code Example

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

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