HomePaymentsPlatformsGlobal Integration
DocsRecipesAPI referenceChangelog
HomePaymentsPlatformsGlobal IntegrationLog In

## Installing Affirm

Installing Affirm on Salesforce Commerce Cloud (SFCC) requires the following:

  • Importing the Affirm cartridge.

  • Importing the required XML files.

  • Enabling Affirm as a payment processor.



## Step 1: Import the Affirm cartridge

  1. [Download the cartridge](🔗).

  2. In the Salesforce UX Studio menu, click **File > Import**.

  3. Click to expand **General** and click **Existing Projects into Workspace**.

  4. Click **Next**.



  1. Click **Browse** and navigate to the directory where you downloaded the Affirm cartridge.

1052


  1. After the window loads the project, click **Select All**.

  2. Click **Finish**.

  3. Right-click the project and click **Properties**.

  4. Click **Project References** and check all the Affirm references.

  5. Click **OK**.

  6. After Salesforce UX Studio builds the workspace, sign in to **Business Manager** and go to **Site > Manage Sites**.

  7. Select your site and click **Settings**.

  8. At the end of the cartridge path field, add the following options based on the Commerce Cloud Type:

  • Pipelines: `int_affirm_controllers:int_affirm`

  • JavaScript controllers: `int_affirm_controllers:int_affirm`

  • SFRA: `int_affirm_sfra:int_affirm`



## Step 2: Import the XML files

Next, import the XML files from the Metadata directory of the downloaded cartridge

  1. In the **Business Manager** go to **Administration > Site Development > Site Import & Export**.

  2. In the **Import** section, click **Choose File** and select `affirm.zip` from the metadata folder.



  1. Click **Upload**.

  2. Once the upload is complete, select `affirm.zip` from the archive list and click **Import**.

Note

You should configure your library ID in library.xml file in metadata folder. Currently there is default 'RefArchSharedLibrary'.

  • For Pipelines and Controllers put 'SiteGenesisSharedLibrary'

  • For SFRA put 'RefArchSharedLibrary'

  1. Verify that Site Preferences group was created with ID - AFFIRM_PAYMENT and name – Affirm.

  2. Verify that Payment Method was created with ID - Affirm and name – Affirm. Enable the Affirm payment method.

  3. You can add an image or text for your payment method by updating content asset `affirm-payment-method`.





Note

SFCC has required AppExchange partners to remove any dynamically loaded Javascript files from content delivery networks (CDNs). As such, `Affirm.js`, which is a browser-side Javascript library served via CDN is replaced by a static copy. To prevent `Affirm.js` from going out of date and ensure that `Affirm.js` receives critical updates, we recommend that our merchants use the CDN route to embed the script into the storefront pages by following the instructions found on [this page](🔗).

## Step 3: Enable the Affirm payment processor

  1. In the **Business Manager** go to **Merchant Tools > Ordering > Payment Processors**.

  2. Click **NEW**.

  3. Verify that **Site Preferences** group was created with ID - `AFFIRM_PAYMENT` and name -- `Affirm`.

  4. Verify **Site Preferences Group** exists with: 

  • ID: AFFIRM_PAYMENT

  • Name: Affirm

  1. **Merchant Tools > Ordering > Payment Methods** to verify payment method exists with:

  • ID: Affirm

  • Name: Affirm

  1. Click **Enable**. 

  2. You can optionally add an image or text for the payment method by updating the asset `affirm-payment-method`.



## Custom code

You'll need to update your site's template files to add promotional messaging and optimize checkout functionalities. We've included detailed instructions for these custom enchantments below:

(Script tags will be stripped)

Additionally, click **Credit/Debit Cards** to verify that Visa is enabled.
## Configure the Virtual Card for processing
  1. Sign in to **Business Manager **and go to **Merchant Tools > Site Preferences > Custom Site Preferences > Affirm**.
  2. Set **Affirm Virtual Card Integration** to **Enabled**.
  3. Add the VCN Payment Instrument with last part of hook name (eg. `BASIC_CREDIT`).

### Integrate with other payment processers
Our virtual card integration assumes you're processing a debit card using your payment processors. By default, it uses the `BASIC_CREDIT` processor but if you need to integrate Affirm with other payment processors, follow the next steps:
  1. Set site preference attribute VCN Payment Instrument with the last part of hook name (e.g. `CYBERSOURCE_CREDIT_CARD`).
  2. Register the new hook handler for extension point `dw.int_affirm.payment_instrument.%PI%`, where %PI% is payment instrument value you've set in the previous step. (e.g., `dw.int_affirm.payment_instrument.CYBERSOURCE_CREDIT_CARD`). By default it is `dw.int_affirm.payment_instrument.BASIC_CREDIT` defined inside `/cartridge/scripts/hooks.json`.
  3. Implement a method "add" of this hook handler, which will take basket as the parameter. The method should return a newly created payment instrument. Credit card information can be extracted from `HttpParametersMap` and a reference implementation can be found in `cartridge/scripts/payment/instrument/BASIC_CREDIT.js`). Lastly, check `Credit/Debit Cards` to verify that Visa Card is enabled.