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

# Installation de cartouches Controllers & Pipelines

# Aperçu

Cette page décrit les modifications à apporter au site pour les vitrines SiteGenesis. Les modifications personnalisées de votre cartouche principale décrites dans ce guide peuvent être séparées en quatre parties : modèles, JavaScript côté client, contrôleurs (version SiteGenesis Controllers) et pipelines (version SiteGenesis Pipelines).

## Modèles

### 1. cartridge/templates/default/components/header/htmlhead.isml

Collez le code suivant après la « fonctionnalité de vérification Google » comme indiqué sur la capture d'écran ci-dessous.

```html
<isinclude template="affirmer/affirmerheader" />
```

\\

### 4. cartouche/modèles/par défaut/produit/composants/options.isml

Ajoutez la propriété « data-affirm-name » au composant `select`.

```html
<select id="${Option.htmlName}" name="${Option.htmlName} » data-affirm-name="${Option.ID} » class="product-option input-select">
```

![](https://files.readme.io/2898719-cp_4_options.png "cp_4_options.png")

### 5. cartridge/templates/default/product/productcontent.isml

Coller après « composant de tarification » :

```html
<isinclude template="util/affirmmodule"/><isaffirmpromo context="pdp" fpname="${require('int_affirm/cartridge/scripts/wiggle/affirmUtils').getFinancingProgramByProduct(pdict.Product, true)}" />
```

<Image title="cp_5_productcontent.png" width="100%" src="https://files.readme.io/7249b7e-cp_5_productcontent.png" />

### 6. cartouche/templates/default/checkout/billing/paymentmethods.isml

Trouvez le code suivant :

![](https://files.readme.io/6b05cec-cp_6_paymentmethods-1.png "cp_6_paymentmethods-1.png")

Remplacez-le par le code ci-dessous :

![](https://files.readme.io/ee237f1-cp_6_paymentmethods-2.png "cp_6_paymentmethods-2.png")

Insérez la balise suivante après la balise de commentaire Processeur" personnalisé" :

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

![](https://files.readme.io/cff0e2e-cp_6_paymentmethods-3.png "cp_6_paymentmethods-3.png")

### 7. cartridge/templates/default/checkout/summary/summary.isml

Collez le code suivant après le formulaire `COSummary-Submit` :

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

![](https://files.readme.io/60d0716-cp_7_summary.png "cp_7_summary.png")

### 8. cartouche/templates/default/product/producttile.isml

Collez le code ci-dessous après le bloc `échantillons de produits` :

```html
<isinclude template="util/affirmmodule"/><isaffirmpromo context="plp" fpname="${require('int_affirm/cartridge/scripts/wiggle/affirmUtils').getFPNameForPLP(pdict.CurrentHwiggleParameterMap.cgid.value, Produit)} » price="${prices}"/>
```

![](https://files.readme.io/94dad46-cp_8_producttile.png "cp_8_producttile.png")

### 9. cartouche/modèles/par défaut/produit/producttopcontentPS.isml

Collez le code suivant après div avec la classe `product-number` :

```html
<isinclude template="util/affirmmodule"/><isaffirmpromo context="pdp" fpname="${require('int_affirm/cartridge/scripts/wiggle/affirmUtils').getFinancingProgramByProduct(pdict.Product, true)}" />
```

![](https://files.readme.io/9a04331-cp_9_producttopcontentPS.png "cp_9_producttopcontentPS.png")

### 10. cartridge/templates/default/util/modules.isml

Collez les éléments suivants après l'importation du module de ressources de contenu :

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

![](https://files.readme.io/80957ea-cp_10_modules.png "cp_10_modules.png")

### 11. cartridge/templates/default/components/order/orderdetails.isml

Remplacez le div par la classe `payment-type` et la balise `isminicreditcard` par le code ci-dessous :

```html
<isif condition="${!paymentInstr.custom.affirmed}"> 
<div class="payment-type"><isprint value="${dw.order.PaymentMgr.getPaymentMethod(paymentInstr.paymentMethod).name}" /> </div> 
 <isminicreditcard card="${paymentInstr}" show_expiration="${false}"/> 
 <iselse/> 
 <isaffirmpaymenttype email="${false}"/ > 
 </isif>
```

![](https://files.readme.io/fc107e0-cp_11_orderdetails.png "cp_11_orderdetails.png")

### 12. cartridge/templates/default/components/order/orderdetailsemail.isml

Remplacez les lignes au-dessus de la balise `isminicreditcard` (lignes 46 à 50) par le code ci-dessous :

```html
<isif condition="${!paymentInstr.custom.affirmed}"> 
<div><isprint value="${dw.order.PaymentMgr.getPaymentMethod(paymentInstr.paymentMethod).name}" /></div> 
 <isif condition="${dw.order.PaymentInstrument.METHOD_GIFT_CERTIFICATE.equals(paymentInstr.paymentMethod)}"> 
 <isprint value="${paymentInstr.maskedGiftCertificateCode}"/> <br /> 
 </isif> 
 <isminicreditcard card="${paymentInstr}" show_expiration="${false}"/> 
 <iselse/> 
 <isaffirmpaymenttype email="${true}" /> 
 </isif>
```

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

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

Collez le code suivant après la balise de fermeture du div avec la classe `message de confirmation` pour inclure le modèle de script de suivi :

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

![](https://files.readme.io/5308771-cp_13_confirmation.png "cp_13_confirmation.png")

### 14. int\_affirm\_controllers/cartridge/templates/resources/affirm.properties

Trouvez la propriété `affirm.controllers.cartridge`. Définissez-le comme nom de la cartouche de vos contrôleurs (avec les fichiers de script app.js, guard.js), par exemple :

```text
affirm.controllers.cartridge=app_storefront_controllers
```

***

## JavaScript côté client

### 1. cartridge/js/pages/product/variant.js

Mettez à jour le fichier `ajax.load` dans la méthode `updateContent` avec l'extrait suivant :

```javascript
if (typeof affirm !== "undefined"){ 
 affirm.ui.refresh(); 
 }
```

![](https://files.readme.io/4c25c4d-cp_js_1_variant.png "cp_js_1_variant.png")

### 2. cartridge/js/pages/search.js

Dans le fichier `$('#man').load` Le rappel jQuery inclut l'extrait ci-dessous :

```javascript
if (typeof affirm !== "undefined"){ 
 affirm.ui.refresh(); 
 }
```

![](https://files.readme.io/aa7df5d-cp_js_2_search.png "cp_js_2_search.png")

### 3. cartridge/js/pages/product/productSet.js

Mettez à jour `on('click')` de l'action d'événement avec `$productSetList` avec le code étendu :

```javascript
var updateAffirmItems = function($container, oldSKU) { 
 var affirmItem = affirmItems.find(function (article) {            return item.sku === oldSKU;        });         affirmItem.sku = $container.find('input[name=pid]').first().val();    } var updateBuyWithAffirmButton = function () {        if ($productSetList.find('.add-to-cart[disabled]').length > 0) {            $('#js-affirm-checkout-now').hide();        } else {            $('#js-affirm-checkout-now').show();            document.dispatchEvent(nouveau CustomEvent('affirm-checkout-button-rendered'));         }            };     // cliquez sur Échantillon pour l'ensemble de produits    $productSetList.on('click', '.product-set-item .swatchanchor', function(e) {        e.preventDefault();        if ($(this).parents('li').hasClass('unelectable')) {retour ;}
 var url = URLS.GetSetItem + this.search ;
 var $container = $ (this) .closest (« .product-set-item ») ;
        varqty = $container.find('form input[name="Quantity"]').first().val();
 
        var oldSKU = $container.find('input[name=pid]').first().val();        ajax.load({
            url: util.appendParamToURL(url, 'Quantité', isNaN(qty) ? '1' : qté),            target: $container,            callback: function () {                updateAddToCartButtons();                updateAffirmItems($container, oldSKU);                updateBuyWithAffirmButton();                tooltip.init();            } 
 }); 
 });
```

> 📘 Important
>
> Pour afficher correctement « affirm-as-low » sur PDP, PLP et Cart, à la fin de la poignée, les fonctions qui influencent le prix du panier (variation du prix du produit ajax, variation de prix basée sur la quantité, pagination, recherche, modification du prix des modules complémentaires, etc.) doivent appeler la fonction `affirm.ui.refresh`.

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

***

## Contrôleurs (Contrôleurs SiteGenesis)

### 1. cartridge/controllers/COBilling.js

Réassignez `applicablePaymentMethods` dans la fonction `initCreditCardList` avec le code suivant :

```javascript
applicablePaymentMethods = require('*/cartridge/controllers/Affirm').Init(cart, applicablePaymentMethods);
```

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

Dans le même fichier, recherchez la fonction `publicStart` et remplacez l'affectation `applicablePaymentMethods` par la suivante :

```javascript
var applicablePaymentMethods = require('*/cartridge/controllers/Affirm').Init(cart, creditCardList.ApplicablePaymentMethods);
```

![](https://files.readme.io/3d87682-controllers_1_COBilling-2.png "controllers_1_COBilling-2.png")

Remplacez l'affectation `status` dans la fonction `resetPaymentForms` par le bloc de code suivant :

```javascript
var status = Transaction.wrap(fonction () {        si (app.getForm('billing').object.paymentMethods.selectedPaymentMethodID.value.equals('PayPal')) {            app.getForm('billing').object.paymentMethods.creditCard.clearFormElement();            app.getForm('billing').object.paymentMethods.bml.clearFormElement();            cart.removePaymentInstruments(cart.getPaymentInstruments(PaymentInstrument.METHOD_CREDIT_CARD));            cart.removePaymentInstruments(cart.getPaymentInstruments(PaymentInstrument.METHOD_BML));            cart.removePaymentInstruments(cart.getPaymentInstruments('Affirm'));        } else if (app.getForm('billing').object.paymentMethods.selectedPaymentMethodID.value.equals(PaymentInstrument.METHOD_CREDIT_CARD)) {            app.getForm('billing').object.paymentMethods.bml.clearFormElement();            CART.REMOVEPAYMENTINSTRUMENTS(CART.GETPAYMENTINSTRUMENTS(PAYMENTINSTRUMENT.METHOD_BML));            CART.REMOVEPAYMENTINSTRUMENTS(CART.GETPAYMENTINSTRUMENTS('PAYPAL'));            cart.removePaymentInstruments(cart.getPaymentInstruments('Affirm'));        } else if (app.getForm('billing').object.paymentMethods.selectedPaymentMethodID.value.equals(PaymentInstrument.METHOD_BML)) {            app.getForm('billing').object.paymentMethods.creditCard.clearFormElement();            if (!app.getForm('billing').object.paymentMethods.bml.ssn.valide) {                return false;            }            cart.removePaymentInstruments(cart.getPaymentInstruments(PaymentInstrument.METHOD_CREDIT_CARD));            cart.removePaymentInstruments(cart.getPaymentInstruments('PayPal'));            cart.removePaymentInstruments(cart.getPaymentInstruments('Affirm'));        } else if (app.getForm('billing').object.paymentMethods.selectedPaymentMethodID.value.equals('Affirm')) {        CART.REMOVEPAYMENTINSTRUMENTS(CART.GETPAYMENTINSTRUMENTS(PAYMENTINSTRUMENT.METHOD_CREDIT_CARD));            CART.REMOVEPAYMENTINSTRUMENTS(CART.GETPAYMENTINSTRUMENTS(PAYMENTINSTRUMENT.METHOD_BML));            CART.REMOVEPAYMENTINSTRUMENTS(CART.GETPAYMENTINSTRUMENTS('PAYPAL'));        }
 return true ;
 }) ;

 return status ;
```

![](https://files.readme.io/6f4c829-controllers_1_COBilling-3.png "controllers_1_COBilling-3.png")

### 2. cartridge/controllers/COPlaceOrder.js

Sous la variable `saveCCResult` et son contrôle conditionnel, incluez `affirmController` pour obtenir le statut Affirm avec l'extrait ci-dessous :

```javascript
var affirmController = require('int_affirm_controllers/cartridge/controllers/Affirm');var affirmCheck = affirmController.CheckCart(cart);if (affirmCheck.status.error) {return {error: true,PlaceOrderError: affirmCheck.status};}
```

### 3. cartridge/controllers/COSummary.js

Accédez à la fonction d'`envoi`. Ajoutez les éléments suivants au début de la fonction :

```javascript
var redirected = require('int_affirm_controllers/cartouche/controllers/Affirm').Redirect() ;
if (redirected) {
return ;
}
```

![](https://files.readme.io/6315f17-controllers_3_COSummary.png "controllers_3_COSummary.png")

***

## Pipelines (Pipelines SiteGenesis)

### 1. cartouche/pipelines/COBilling.xml

Trouvez le noeud de départ `InitCreditCardList` et ajoutez le noeud d'appel (Affirm-Init, int\_affirm\_pipelines) après le deuxième noeud Assign :

<Image title="pipelines_1_COBilling_1.png" alt={529} width="smart" src="https://files.readme.io/34ccde1-pipelines_1_COBilling_1.png">
  pipelines\_1\_COBilling\_1\_Affirm-Init
</Image>

Recherchez le nœud `ResetPaymentForms` de démarrage et ajoutez des nœuds Pipelet comme indiqué ci-dessous :

<Image title="pipelines_1_COBilling_2.png" alt={722} src="https://files.readme.io/b0ff01a-pipelines_1_COBilling_2.png">
  pipelines\_1\_COBilling\_2\_ResetPaymentForms
</Image>

Dans le même pipeline, créez une branche supplémentaire :\
a. Nœud de décision – Clé de décision : `!CurrentForms.billing.paymentMethods.selectedPaymentMethodID.value.equals('Affirm')`\
b. Pipelet ClearFormElement – FormElement : `CurrentForms.billing.paymentMethods.creditCard`\
c. Pipelet ClearFormElement – FormElement : `CurrentForms.billing.paymentMethods.bml`\
d. `Pipelet RemoveBasketPaymentInstrument` – PaymentInstruments : `Basket.getPaymentInstruments(dw.order.PaymentInstrument.METHOD_CREDIT_CARD)`\
e. `Pipelet RemoveBasketPaymentInstrument` – PaymentInstruments : `Basket.getPaymentInstruments( dw.order.PaymentInstrument.METHOD_BML)`

<Image title="pipelines_1_COBilling_4.png" alt={745} src="https://files.readme.io/dfce965-pipelines_1_COBilling_4.png">
  pipelines\_1\_COBilling\_4\_ResetPaymentForms\_additional\_branch
</Image>

***

# Sibling pages

* [Installation](https://docs.affirm.com/developers/v1.0-Global-Integration/docs/sfcc-installation-fr-ca.md)
* [Installation de la cartouche SFRA](https://docs.affirm.com/developers/v1.0-Global-Integration/docs/installation-de-la-cartouche-sfra.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)