---
updatedAt: 2025-11-13T14:38:30.000Z
agentTools:
  siteIndex: https://docs.affirm.com/llms.txt
  projectIndex: https://docs.affirm.com/developers/v1.0-Global-Integration/llms.txt
---

# Installation de la cartouche SFRA

## Aperçu

Cette page décrit les modifications qui doivent être apportées au site pour les vitrines SFRA. Toutes les modifications sont stockées dans la structure de cartouche en miroir dans `int_affirm_sfra_cartridge` pour une architecture de référence de vitrine par défaut afin que vous puissiez trouver le code exact à cet endroit.

Les modifications personnalisées de votre cartouche principale décrites dans ce guide peuvent être séparées en trois parties : modèles, contrôleurs et JavaScript côté client.

***

## Modèles (SFRA)

### Étape 1 : cartouche/modèles/par défaut/common/htmlHead.isml

Incluez la balise de script d'en-tête Affirm après la balise Google Verification (ou après toute autre balise pertinente et avant le crochet `htmlHead` ). Cette balise remplira l’objet de configuration et les méthodes à placer dans l’en-tête html.

```html
<isinclude template="affirm/affirmHeaderMF" />
```

![](https://files.readme.io/1dc6ed3-sfra_1_htmlHead.png "sfra_1_htmlHead.png")

***

### Étape 2 : cartouche/modèles/par défaut/common/scripts.isml

Incluez `vcn.js` en tant que fichier statique au bas du fichier.

```html
<isif condition="${dw.system.Site.getCurrent().getCustomPreferenceValue('AffirmOnline')}">   <script defer type="text/javascript" src="${URLUtils.staticURL('/js/vcn.js')}"></script></isif>
```

![](https://files.readme.io/f129223-sfra_2_scripts.png "sfra_2_scripts.png")

***

### Étape 3 : cartouche/modèles/par défaut/composants/modules.isml

Incluez le modèle affirmModule après la dernière ligne.

```html
<isinclude template="util/affirmModule" />
```

![](https://files.readme.io/ca5f3fe-sfra_3_modules.png "sfra_3_modules.png")

***

### Étape 4 : cartouche/templates/default/cart/cart.isml

Placez le message promotionnel en dessous où le total du panier est affiché.

```html
<issets name="Basket" value="${require('dw/order/BasketMgr').getCurrentBasket()}" scope="page" /><isinclude template="util/affirmModule"/><isaffirmpromo context="cart" fpname="${require('int_affirm/cartridge/scripts/prior/affirmUtils').getFPNameByBasket(Basket)}" />
```

![](https://files.readme.io/8640b0a-sfra_4_cart.png "sfra_4_cart.png")

***

### Étape 5 : cartouche/modèles/par défaut/produit/

Il existe un ensemble d'extraits récurrents qui doivent être placés pour que le message promotionnel d'Affirm s'affiche sur les différentes pages relatives aux produits. La liste des modèles qui correspondent aux pages inclut `setDetails`, `productDetails`, `bundleDetails`, `quickView` et `setQuickView` dans le dossier du produit.

Placez des messages de promotion aux endroits pertinents où le prix est affiché.

#### setDetails.isml

```html
<isinclude template="util/affirmModule" />
 < isaffirmpromo context="pdp" fpname="${require('*/cartridge/scripts/utils/affirmUtils').getFPNameForPDP(product)}" >
```

![](https://files.readme.io/b19c280-sfra_5_product-setDetails.png "sfra_5_product-setDetails.png")

#### bundleDetails.isml

```html
<isinclude template="util/affirmModule" />
 < isaffirmpromo context="pdp" fpname="${require('*/cartridge/scripts/utils/affirmUtils').getFPNameForPDP(product)}" >
```

![](https://files.readme.io/7e5543d-sfra_5_product-bundleDetails.png "sfra_5_product-bundleDetails.png")

#### productDetails.isml

```html
<isinclude template="util/affirmModule" />
 < isaffirmpromo context="pdp" fpname="${require('*/cartridge/scripts/utils/affirmUtils').getFPNameForPDP(product)}" >
```

![](https://files.readme.io/6874cc9-sfra_5_product-productDetails.png "sfra_5_product-productDetails.png")

#### quickView\.isml & setQuickView\.isml

```html
<isinclude template="util/affirmModule" />
 < isaffirmpromo context="pdp" fpname="${require('*/cartridge/scripts/utils/affirmUtils').getFPNameForPDP(product)}" >
```

![](https://files.readme.io/f854d15-sfra_5_product-quickView.png "sfra_5_product-quickView.png")

***

### Étape 6 : product/productTile.isml

Collez le code suivant à l'endroit où le message promotionnel Affirm doit apparaître sur la page de liste du produit.

```html
<isinclude template="util/affirmModule"/><isaffirmpromo context="plp" fpname="${require('int_affirm/cartridge/scripts/prior/affirmUtils').getFPNameForPLP(product)}" prix="${price}"/>
```

![](https://files.readme.io/f3617cd-sfra_6_product-productTile.png "sfra_6_product-productTile.png")

***

### Étape 7 : cartridge/forms/default/billing.xml

Dans Storefront Reference Architecture où le formulaire de carte de crédit est codé en dur dans les modèles, vous devez modifier manuellement ces modèles pour activer le paiement Affirm. Assurez-vous que le champ courriel est inclus dans le formulaire de facturation.

```xml
<field formid="email" label="profile.email" type="string" required="true" binding="email" max-length="254" missing-error="error.card.info.missing.email " />
```

![](https://files.readme.io/bfdb512-sfra_7_billing-xml.png "sfra_7_billing-xml.png")

> 🚧 Important
>
> * Vérifiez que le champ de courriel correspondant est inclus dans `default/checkout/billing/billing.isml`
> * Les anciennes versions de SFRA peuvent inclure un champ de courriel dans `forms/default/creditCard.xml` ainsi que dans le modèle `checkout/billing/creditCardForm.isml` , auquel cas le champ `creditCard.xml` de courriel `creditCardForm.isml` redondant doit être supprimé.

***

### Étape 8 : cartouche/modèles/par défaut/paiement final

Modifiez les modèles suivants pour intégrer le paiement Affirm dans le flux de paiement.

#### cartridge/templates/default/checkout/billing/billingSummary.isml

Incluez une balise `div` avec des données vcn.

```html
<isset name="CurrentBasket" value="${require('dw/order/BasketMgr').getCurrentBasket()}" scope="page" />
 < isif condition="${CurrentBasket}"> 
 < isset name="basketCheck" value="${CurrentBasket.getAllProductLineItems().isEmpty()}" scope="page" />
 < isif condition="${!basketCheck}"> 
 < div 
 data-vcndata='<isprint value="${affirm.basket.getCheckout(CurrentBasket, 1)}" encoding="htmlsinglequote" />'
 data-enabled='<isprint value="${affirm.data.getAffirmVCNStatus() == 'on'}" encoding="htmlsinglequote" />'
 data-affirmselected='<isprint value="${true}" encoding="on" />'
 data-errormessages='<isprint value="${affirm.data.getErrorMessages()}" encoding="htmlsinglequote" />'
 data-updateurl='<isprint value="${dw.web.URLUtils.https("Affirm-Update")}" encoding="htmlsinglequote" />'
 data-errorurl='<isprint value="${dw.web.URLUtils.https("Checkout-Begin")}" encoding="htmlsinglequote" />'
 data-csrfname='<isprint value="${dw.web.CSRFProtection.getTokenName()}" encoding="htmlsinglequote" />'
 data-csrftoken='<isprint value="${dw.web.CSRFProtection.generateToken()}" encoding="htmlsinglequote" />'
 id="vcn-data"> < /div>
 < /isif>
 < /isif>
```

![](https://files.readme.io/c8e9f7f-sfra_8_checkout-billingSummary.png "sfra_8_checkout-billingSummary.png")

#### cartridge/templates/default/checkout/billing/paymentOptions.isml

Ajoutez un attribut de condition dans la div `payment-information` pour changer de méthode de paiement si Affirm est applicable.

```html
data-payment-method-id="<isif condition="${require('int_affirm/cartridge/scripts/prior/affirmHelper').IsAffirmApplicable()}">Affirm<iselse>CREDIT_CARD</isif>"
```

![](https://files.readme.io/8ee0462-sfra_8_checkout-paymentOptions.png "sfra_8_checkout-paymentOptions.png")

#### cartridge/templates/default/checkout/billing/paymentOptionsTabs.isml

Ajoutez le modèle `affirmpaymethodli`.

```html
<isif condition="${paymentOption.ID === 'Affirm' && require('*/cartridge/scripts/wiggle/affirmHelper').IsAffirmApplicable()}"><isinclude template="affirm/affirmpaymetodli" /></isif>
```

![](https://files.readme.io/6a85e90-sfra_8_checkout-paymentOptionsTabs.png "sfra_8_checkout-paymentOptionsTabs.png")

#### cartridge/templates/default/checkout/billing/paymentOptionsContent.isml

Incluez le modèle de saisie du mode de paiement dans les options de paiement `isloop`.

```html
<isif condition="${paymentOption.ID === 'Affirm' && require('*/cartridge/scripts/prior/affirmHelper').IsAffirmApplicable()}">    <isinclude template="affirm/paymentMethodInputMF" /></isif>
```

![](https://files.readme.io/32d5b7d-sfra_8_checkout-paymentOptionsContent.png "sfra_8_checkout-paymentOptionsContent.png")

#### cartridge/templates/default/checkout/billing/paymentOptionsSummary.isml

Incluez l'option de paiement Affirm dans le résumé.

```html
<isif condition="${payment.paymentMethod ==== 'Affirm'}">  ${Resource.msg('payment.name', 'affirm', null)}
< /isif>
```

![](https://files.readme.io/78e4f5d-sfra_8_checkout-paymentOptionsSummary.png "sfra_8_checkout-paymentOptionsSummary.png")

#### cartridge/templates/default/checkout/confirmation/confirmation.isml

Les lieux confirment le script de suivi en bas de la page de confirmation de commande avant la dernière  étiquette.

```html
<isinclude url="${URLUtils.http('Affirm-Tracking', 'orderId', pdict.order.orderNumber)}" >
```

![](https://files.readme.io/c351c32-sfra_8_checkout-confirmation.png "sfra_8_checkout-confirmation.png")

***

## Contrôleurs (SFRA)

> 📘 Contrôleurs CheckoutServices
>
> Les points de terminaison de paiement dans `CheckoutServices.js` ont été remplacés pour gérer les paiements par carte d’assurance et de crédit, qui se trouvent dans `int_affirm_sfra/cartridge/controllers/`.

Aucun code personnalisé n'est requis dans les contrôleurs à l'exception du fichier `CheckoutServices.js` inclus dans `int_affirm_sfra`.

***

## Contrôleurs (SFRA)

> 📘 Contrôleurs CheckoutServices
>
> Les points de terminaison de paiement dans `CheckoutServices.js` ont été remplacés pour gérer les paiements par carte d’assurance et de crédit, qui se trouvent dans `int_affirm_sfra/cartridge/controllers/`.

Aucun code personnalisé n'est requis dans les contrôleurs à l'exception du fichier `CheckoutServices.js` inclus dans `int_affirm_sfra`.

***

## JavaScript côté client (SFRA)

> 👍 Exécution de scripts de build
>
> Le code JavaScript et CSS côté client devront être compilés avant le déploiement. Mettez à jour package.json à la racine pour vous assurer que la valeur des chemins fait référence à la cartouche de base. En outre, assur-vous que le paquet [Scripts SGMF](https://www.npmjs.com/package/sgmf-scripts) est installé et exécutez la commande suivante après avoir effectué des modifications :
>
> `sgmf-scripts --compile js`
>
> Plus d’informations sur les commandes de génération peuvent être [trouvées ici](https://documentation.b2c.commercecloud.salesforce.com/DOC3/topic/com.demandware.dochelp/SFRA/BuildingSFRA.html).

### Étape 1 : cartouche/client/default/js/checkout/billing.js

Remplacez l'instruction if dans la fonction `updatePaymentInformation` par ce qui suit :

```javascript
if (order.billing.payment && order.billing.payment.selectedPaymentInstruments
       &&Order.Billing.Payment.Instruments de paiement sélectionnés.Longueur> 0&& ($ ('.payment- information') .data ('identifiant de la méthode de paiement') === 'CREDIT_CARD')) {
 HtmlToAppend += «< span> » + Order.Resources.CardType + « »
 + Order.Billing.Payment.Instruments de paiement sélectionnés [0] .type
           + '</span><div>'           + ordder.billing.payment.selectedPaymentInstruments[0].maskedCreditCardNumber           + '</div>< div>< span>'
 + Order.Resources.CardEnding + ''
 + Order.Billing.Payment.Instruments de paiement sélectionnés [0] .ExpirationMonth
           + '/' + ordder.billing.payment.selectedPaymentInstruments[0].expirationYear           + '</span></div>';   } else {       htmlToAppend += '<span><div>Accepter</div></span>';   }
```

![](https://files.readme.io/f5d52a3-sfra_js_1_billing-1.png "sfra_js_1_billing-1.png")

> 🚧 Important
>
> Assurez-vous que le fichier `billing.js` comprend un code de sécurité de compensation forcée et un numéro de carte de crédit dans la fonction `updateBillingAddressFormValues`, que SFRA doit inclure par défaut.

![](https://files.readme.io/4057cbf-sfra_js_1_billing-2.png "sfra_js_1_billing-2.png")

***

### Étape 2 : cartouche/client/default/js/checkout/checkout.js

Ajoutez une instruction if basée sur l'étape de paiement dans la fonction `updateUrl`.

```javascript
if (checkoutStages[currentStage] === 'payment') {if ($('#affirm-config').data('affirm enabled')) {$('.affirm-payment-tab').trigger('click');}} else if (checkoutStages[currentStage] === 'passeOrder') {var url = $('#affirm-config').data('affirupdateurl');$.spinner().start() ;
$.ajax({url: url,method: 'GET',success: function (data) {$('#vcn-data').data('vcndata', JSON.parse(data.vcndata));
			$.spinner().stop() ;
}
	});
}
```

![](https://files.readme.io/d36da71-sfra_js_2_checkout-1.png "sfra_js_2_checkout-1.png")

Modifiez le bloc exécuté lorsque stage est `placeOrder` comme indiqué ci-dessous :

```javascript
else if (stage === 'passeOrder') {if (($('.payment-summary .js-affirm-payment-description').length <= 0)    // lorsque affirm n'est pas utilisé|| ($('#affirm-config').data('vcnenabled') && $('#vcn-data').data('vcncomplete'))) {  // ou vcn est activé mais complet$.ajax({url: $('.place-order').data('action'),méthode : 'POST',success: function (data) {// activer le bouton placeOrder ici$('body').trigger('checkout:enableButton', « .next-step-button button »);if (data.error) {if (data.cartError) {
						window.location.href = data.redirectUrl;
						defer.reject();
					} else {// go to appropriate stage and display error messagedefer.reject(data);}} other {var continueUrl = data.continueUrl;var urlParams = {ID: data.orderID,token: data.orderToken};continueUrl += (continueUrl.indexOf('?') !== -1 ? &' : '?') +Object.keys(urlParams).map(function (key) {return key + '=' + encodeURIComponent(urlParams[key]);}).join('&');window.location.href =ContineUrl;defer.resolve(data);}},error: function () {// activer le bouton placeOrder ici$('body').trigger('checkout:enableButton', $('.next-step-button button'));}});}return differ;}
```

![](https://files.readme.io/16e4ea0-sfra_js_2_checkout-2.png "sfra_js_2_checkout-2.png")

***

### Étape 3 : js/cart/cart.js

Ajouter un nouveau calcul pour le prix Affirm Modal Promo lors du nouveau rendu des totaux de la commande.

```javascript
var totalCalculated = data.totals.grandTotal.substr(1).replace(/,/g, '');$('.affirm-as-lowas').attr('data-amount', (totalCalculated * 100).toFixed());var isWithinAffirmLimit = (parseFloat(totalCalculated) >= parseFloat(affirmLimits.min) && pareFloat(totalCalculated) <= parseFloat(affirmLimits.max))if (isWithinAffirmLimit) {$('#js-affirm-checkout-now').show();} else {$('#js-affirm-checkout-now').hide();  $('.affirm-as-lowas').attr('data-amount', NaN);}affirm.ui.refresh();
```

![](https://files.readme.io/f1e168b-sfra_js_3_cart.png "sfra_js_3_cart.png")

***

### Étape 4 : js/search/search.js

Mettez à jour la méthode `showMore` pour inclure `affirm.ui.refresh` comme rappel réussi, comme indiqué ci-dessous.

```javascript
showMore: function () { // Afficher plus de produits  $('.container').on('click', 'bouton .show-more', fonction (e) {
 e. Arrêter la propagation () ;
 var showMoreURL = $ (this) .data (« url ») ;

      e.preventDefault(); 

 $.spinner().start();
      $(this).trigger('search:showMore', e) ;
 $.ajax({
 url : showMoreUrl,
 data : { selectedUrl : showMoreUrl },
 method : 'GET',
 success : function (response) {
 $('.grid-footer').replaceWith(response) ;
              updateSortOptions(response) ;
 affirm.ui.refresh()
 $.spinner().stop() ;
          },
 error : function () {
 $.spinner().stop() ;
          }
     }) ;
 }) ;
},
```

> 👍
>
> Assurez-vous de reconstruire le JS client après avoir apporté des modifications.

# Sibling pages

* [Installation](https://docs.affirm.com/developers/v1.0-Global-Integration/docs/sfcc-installation-fr-ca.md)
* [Installation de cartouches Controllers & Pipelines](https://docs.affirm.com/developers/v1.0-Global-Integration/docs/installation-de-cartouches-controllers-pipelines.md)
* [Configuration d'Affirm pour SFCC](https://docs.affirm.com/developers/v1.0-Global-Integration/docs/configuration-daffirm-pour-sfcc.md)
* [Gestion des transactions avec Jobs](https://docs.affirm.com/developers/v1.0-Global-Integration/docs/gestion-des-transactions-avec-jobs.md)
* [FAQ SUR LA SFCC](https://docs.affirm.com/developers/v1.0-Global-Integration/docs/faq-sur-la-sfcc.md)