Install Affirm on SFCC

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.

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

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.

3. Click Upload.
4. 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'

5. Verify that Site Preferences group was created with ID - AFFIRM_PAYMENT and name – Affirm.
6. Verify that Payment Method was created with ID - Affirm and name – Affirm. Enable the Affirm payment method.
7. 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

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

• ID: Affirm
• Name: Affirm

6. Click Enable. 
7. 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:

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.