About Promotional Messaging for Global Integrations UK

Démarrage rapide

Monthly payment messaging and educational modals show customers how they can use Affirm to finance their purchases. Our promotional messaging enables you to:

• Afficher dynamiquement les informations sur les prix avec paiements mensuels.
• Offer Pre-qualification.

Ce guide passera en revue les messages promotionnels d'Affirm et explique comment les ajouter à votre site. Une fois que vous avez déterminé l'endroit où vous souhaitez que le message de paiement au fil de l'eau Affirm apparaisse sur votre site Web, il y a trois étapes pour le rendre et s'assurer qu'il fonctionne correctement.

1. Ajouter Affirm.js

Our global integration features extended parameters to reach international customers, which consists of an exposed locale and country_code field in the Affirm config.

Inclure le script Affirm.js

Add the Affirm.js embed code to the head of your global page template, if you haven't already. This communicates with Affirm to help calculate the “From ￡_ per month” messaging based on the financing offerings on your website.

	_affirm_config = {
		public_api_key: "{YOUR_PUBLIC_API_KEY}",
		script: "https://cdn1.affirm.com/js/v2/affirm.js",
		locale: "en_GB",
		country_code: "GBR",
	};

(function(m,g,n,d,a,e,h,c){var b=m[n]||{},k=document.createElement(e),p=document.getElementsByTagName(e)[0],l=function(a,b,c){return function(){a[b]._.push([c,arguments])}};b[d]=l(b,d,"set");var f=b[d];b[a]={};b[a]._=[];f._=[];b._=[];b[a][h]=l(b,a,h);b[c]=function(){b._.push([h,arguments])};a=0;for(c="set add save post open empty reset on off trigger ready setProduct".split(" ");a<c.length;a++)f[c[a]]=l(b,d,c[a]);a=0;for(c=["get","token","url","items"];a<c.length;a++)f[c[a]]=function(){};k.async=
  !0;k.src=g[e];p.parentNode.insertBefore(k,p);delete g[e];f(g);m[n]=b})(window,_affirm_config,"affirm","checkout","ui","script","ready","jsReady");

Locale

The locale parameter allows Affirm to identify which locale you are serving your site in for any particular user. For example, let's say that you're rendering your site in British English; perhaps this occurred because the user's browser setting detected British English. You can provide Affirm with the user's language setting by passing it in the locale parameter. Affirm will then read the locale and translate the pages accordingly, thus, matching the language the user had seen on your site. However, we will not attempt to read the user's locale directly.

Country_code

The country_code parameter represents the country of legal incorporation of your store, which is shown to any given user. So, if you're showing your British website/store to a user and you have a legal presence in Great Britain, you would pass GBR into the country_code parameter. This allows us to determine which regulations to abide by and which banks to partner with for this transaction.

Additionally, Affirm expects an “Alpha 3” three-letter country code for this parameter. If nothing is sent, Affirm will assume USA.

Valeurs prises en charge

Affirm supports the following combinations for these arguments:

• country_code:USA
  • locale:en_US
• country_code:CAN
  • locale:en_CA
  • locale:fr_CA
• country_code: GBR
  • locale: en_GB

The following will occur when a locale and/or country_code is not provided:

• When a locale is not provided, the locale will default to en_US (English speaking US).
• When a country_code is not provided, the country_code will default to USA.

2. Create Promotional Messaging Components

Add the affirm-as-low-as HTML element where you want to display an Affirm promotional messaging component. This actually will render the “From ￡_ per month” messaging on the webpage. The element attributes such as data-page-type determine which component displays. We generally recommend adding promotional messaging to your category, product, cart, and payment pages. See the HTML Reference for more information.

3. Add Code to Handle Price Changes

Le prix affiché sur vos pages de produits ou de panier peut changer en raison des variantes de produits, des changements de quantité, etc. Si votre message promotionnel Affirm s'affiche avant la mise à jour des prix, le message sera inexact. Pour continuer à mettre à jour les messages, implémentez cette fonction d'actualisation dans votre fonction de rappel des changements de prix :

affirm.ui.refresh();

Page Reload

If the product’s price or the Affirm promotional messaging display after the page loads, or if you included the above refresh function statically on the page, wrap it in the affirm.ui.ready() callback function. Doing so ensures that the page does not call the refresh function before Affirm.js initializes.

affirm.ui.ready(function(){
    affirm.ui.refresh();
});

Price Update

Lorsque le prix est mis à jour sur votre page, appelez la fonction d'actualisation dans la même fonction de rappel qui gère l'événement de changement de prix. Ajoutez des ID d'élément aux composants de messages promotionnels pour faciliter l'accès et la modification de leurs attributs. Notez que nous utilisons des exemples d'ID ci-dessous.

//Add to an existing callback that fires when the price updates
priceUpdateEventHandler(){
    changePriceHandler(newPrice);
}
 
function updateAffirmPromos(newPrice){
    //Update the wrapper elements' attributes in the DOM
    document.getElementById('affirmProductModal').setAttribute('data-amount',newPrice);
    document.getElementById('affirmLearnMore').setAttribute('data-amount',newPrice);
   
    //Call affirm.ui.refresh to re-render the promotional messaging componenets
    affirm.ui.refresh();
}

Detect Modal Close

Lorsqu'un modal éducatif est fermé (non courant), vous pouvez détecter cet événement en utilisant le code suivant :

affirm.events.on('learnMore:close',function(){console.log('fired')});

📘

The above script didn't work for your merchant?

Use the same code, but replace 'learnMore' with 'prequal', as shown below.

affirm.events.on('prequal:close',function(){console.log('fired')});

Exemples

Affirm offers three variations of our As-Low-As (ALA) messaging in the UK, please see below for the variations:

Consultez les exemples suivants pour savoir comment ajouter des composants de messages promotionnels à votre site :

Pour ajouter des messages de paiement mensuel et une modale de produit à votre page de produit :

<p class="affirm-as-low-as" data-page-type="product" data-amount="your_price_variable"></p>

Use your page's price variable or price amount in USD cents (e.g., $100 = 10000) for data-amount.

Pour ajouter des messages de paiement mensuel et une modale de produit à votre page de panier :

<p class="affirm-as-low-as" data-page-type="cart" data-amount="your_price_variable"></p>

Use your page's price variable or price amount in USD cents (e.g., $100 = 10000) for data-amount.

Pour ajouter une modale de site à un lien textuel sur votre page d'accueil :

<a class="affirm-site-modal" data-page-type="homepage">Learn more</a>

To add a site modal to a banner link:

<a class="affirm-site-modal" data-page-type="banner"><img src="https://cdn-assets.affirm.com/images/banners/300x50.png"></a>

In each HTML element, be sure to include the data-page-type attribute corresponding to the page where that promotional messaging component is placed. The data-page-type attribute allows you to customize messaging in the future without development work. By default, promotional messaging on product pages have pre-qualification enabled, but you can work with your Client Success Manager to change this.