Afficher les messages Afterpay ou ClearpayObsolète

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

• le calcul et l’affichage du montant des versements ;
• l’affichage du modal d’information Afterpay ;
• la localisation du texte et des devises.

Inclure le composant Element

<script src="https://js.stripe.com/clover/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');

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.

Logo en badge

Définissez logoType sur 'badge' et utilisez l’option badgeTheme pour choisir entre les styles suivants :

Bloc-marque

Définissez logoType sur 'lockup' et utilisez l’option lockupTheme pour choisir entre les styles suivants :

Styliser avec CSS

En complément des options de configuration, utilisez CSS pour styliser le message aux couleurs de votre site. Vous pouvez personnaliser le font-family, la font-size et la color du message :

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

Vous pouvez également gérer la taille du logo en définissant ses valeurs width et height :

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

Gérer les éléments inéligibles

Vous ne pouvez pas utiliser Afterpay avec certaines activités prohibées. Si vous vendez des éléments appartenant à ces catégories, vous pouvez quand même afficher le composant Element de messagerie pour indiquer qu’Afterpay n’est pas disponible.

Utilisez les options isEligible ou isCartEligible pour indiquer que le produit ou panier actuel n’est pas éligible :

Afterpay prévoit également des limites de transaction par défaut propres à chaque pays. Lorsque la valeur amount dépasse ces limites, l’Element affiche automatiquement un message avertissant que la gamme de prix n’est pas éligible. Vous pouvez personnaliser ce message en masquant la limite inférieure ou supérieure à l’aide de showLowerLimit et showUpperLimit.

Région et devise

Afterpay et Clearpay prennent en charge les langues et devises suivantes :

Langues prises en charge : en-US, en-CA, en-AU, en-NZ, en-GB

Devises prises en charge : USD, CAD, AUD, NZD, GBP

Les messages Afterpay indiquent toujours le nombre approprié de versements qu’un utilisateur peut payer en fonction de sa langue et de son pays. Pour en savoir plus, consultez la section consacrée à la collecte des paiements.

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