## Installing Affirm

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

  • Import the Affirm cartridge.

  • Import the required XML files.

  • Enable 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**.

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


6\. After the window loads the project, click **Select All**. 7\. Click **Finish**. 8\. Right-click the project and click **Properties**. 9\. Click **Project References** and check all the Affirm references. 10\. Click **OK**. 11\. After Salesforce UX Studio builds the workspace, sign in to **Business Manager** and go to **Site > Manage Sites**. 12\. Select your site and click **Settings**. 13\. 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 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.

3\. Click **Upload**. 4\. Once the upload is complete, select `affirm.zip` from the archive list and click **Import**.


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

  • For Pipelines and Controllers put 'SiteGenesisSharedLibrary'.

  • For SFRA put 'RefArchSharedLibrary'.

5\. Verify that the Site Preferences group was created with ID - AFFIRM_PAYMENT and name – Affirm. 6\. Verify that the Payment Method was created with ID - `Affirm` and name – `Affirm`. Enable the Affirm payment method. 7\. You can add image or text for your payment method by updating content asset “affirm-payment-method”.

## 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 the **Site Preferences** group was created with ID - `AFFIRM_PAYMENT` and name -- `Affirm`. 4\. Verify **Site Preferences Group** exists with: 


  • Name: `Affirm`

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

  • ID: `Affirm`

  • Name: `Affirm`

6\. Click **Enable**.  7\. Optionally, you can add an image or text for the payment method by updating the asset affirm-payment-method.

## Custom Code

You will also need to update your site's template files to support promotional messaging and checkout functions. You can find instructions to make these custom changes 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.