Skip to main content

 

Affirm Merchant Help

Upgrade your Magento integration

Overview

Affirm now offers the following features using the new data-page-type attribute in the Affirm promotional messaging:

  • New promotional messaging components that respond dynamically to your unique financing programs such as longer terms (18, 24 and 36-month repayment terms) and 0% APR promotions, with customizable messaging to personalize the consumer journey
  • Our Prequalification flow within promotional messaging components to unlock purchasing power upfunnel while minimizing additional development work for your teams
  • Our updated Affirm.js library, which includes Enhanced Analytics that provide consumer insights and enable A/B testing to keep your site optimized

 This guide is for merchants using Magento who want to take advantage of the above features without upgrading their Magento extension (version 3.5.6 and up). The upgrade steps are:

  1. Connect to our sandbox
  2. Add Affirm.js
  3. Add Affirm promotional messaging
  4. Add the Confirmation Page function
  5. Test and set live

1. Connect to our sandbox

Perform this upgrade in your development environment connected to our sandbox. To connect your development environment to our sandbox, do the following:

  1. Get your sandbox public and private API keys at https://sandbox.affirm.com/dashboard/#/apikeys
  2. Sign in to your Magento admin portal
  3. Go to System > Configuration > Sales > Payment Methods > Affirm
  4. Keep Mode set to Sandbox
  5. Enter the Public API Key and Secret Key (private key) you retrieved from the Affirm sandbox merchant dashboard.

2. Add Affirm.js

Add the Affirm.js embed code to the head of your global page template by doing the following:

  1. Open MAGENTO_ROOT/app/design/frontend/base/default/layout/affirm/affirm.xml
  2. Add Affirm.js and the Affirm configuration initialization in the global header
<layout>
    <default>
        <reference name="head">
            <action method="addItem">
                <type>skin_js</type>
                <name>js/affirm/promos.js</name>
            </action>
            <block type="core/text" name="affirm.cdn.javascript">
                <action method="setText">
                    <text helper="affirm/getAffirmJs" />
                </action>
            </block>
        </reference>
    </default>
  1. Open MAGENTO_ROOT/app/code/community/Affirm/Affirm/Helper/Data.php
  2. Add the following function
/**
 * Get affirm js url
 *
 * @return string
 */
public function getAffirmJsUrl()
{
    $apiUrl = $this->getApiUrl();
    $parsedUrl = Mage::getModel('core/url')->parseUrl($apiUrl);
    $domain = $parsedUrl->getHost();
    $domain = str_ireplace('www.', '', $domain);
    $domain = str_ireplace('api.', '', $domain);
    $prefix = 'cdn1.';
    if (strpos($domain, 'sandbox') === 0) {
        $prefix = 'cdn1-';
    }
    return 'https://' . $prefix . '' . $domain . '/js/v2/affirm.js';
}
/**
 * Get affirm js text
 *
 * @return string
 */
public function getAffirmJs()
{
    $affirmJs = '<script type="text/javascript">
    if (!AFFIRM_AFFIRM.promos.getIsInitialized()) {
        AFFIRM_AFFIRM.promos.initialize("'.  $this->getApiKey() .'","'. $this->getAffirmJsUrl() .'");
    }
    if (!AFFIRM_AFFIRM.promos.getIsScriptLoaded()) {
        AFFIRM_AFFIRM.promos.loadScript();
    }
    </script>';
    return $affirmJs;
}

See the following GitHub links:

3. Update Affirm promotional messaging

The Affirm promotional messaging HTML data-page-type attribute allows you to customize messaging in the future without development work. By default, promotional messaging on product pages have prequalification enabled, but you can work with your Client Success Manager to change this and configure additional customizations. Click here for additional customizations.

Adding the data-page-type attribute depends on which version of extension you’re using and if you’ve added any custom work to it. The best way to add the attribute is to search for and locate the Magento template files that use affirm-as-low-as, affirm-product-modal, and affirm-site-modal to display promotional messaging. Add the data-page-type attribute corresponding to the template file where that promotional messaging component is placed:

data-page-type="category" MAGENTO_ROOT/app/code/community/Affirm/Affirm/Block/Product/List.php
data-page-type="cart" MAGENTO_ROOT/app/design/frontend/base/default/template/affirm/promo/aslowas/checkout.phtml
data-page-type="product" MAGENTO_ROOT/app/design/frontend/base/default/template/affirm/promo/aslowas/product.phtml
data-page-type="banner" https://github.com/Affirm/Magento_Affirm/blob/master/extension/app/design/frontend/base/default/template/affirm/promo/promo.phtml#L27 (use with class=affirm-site-modal)

For other pages on your site, add an HTML element everywhere you want to display an Affirm promotional messaging component. The element attributes (see below) determine which component displays.

Required attributes

class

string
This determines the Affirm promotional messaging component to display.

Value Description
affirm-as-low-as Monthly payment messaging links to a product modal that offers additional price-specific information and prequalification.
affirm-site-modal A site modal provides general information about Affirm and does not include pricing information. Any HTML element can trigger a site modal.

data-amount

integer
This is the loan amount passed to the monthly payment messaging component and is required if you want to display price specific messaging. Value in USD cents (e.g., $100 = 10000).

data-page-type

string
This identifies your promotional messaging so Affirm can apply the necessary customizations based on the page they’re displayed.

Value Description
category A product category page
product A product description page
cart The customer cart page
payment The payment selection page
homepage Your site's home page
landing A landing page that describes Affirm
search  Your site's search results page
banner A banner image (use for any promotional messaging triggered by your banner or image regardless of page location)

Monthly payment messaging (affirm-as-low-as) usually display price-specific information (requires data-amount) and are typically used with the following data-page-types:

  • category
  • product
  • cart
  • payment

Since site modals (affirm-site-modal) do not display price-specific information, they are typically used with the following data-page-types:

  • homepage
  • banner
  • landing
  • search

If you don’t pass data-page-type, the component will use a default setting.

4. Add the Confirmation Page function

When a customer completes their purchase, you can send their order and product information to Affirm for A/B testing, which will help you optimize your site. Send this information by adding the Confirmation Page function to your payment confirmation page. We only require orderId, total, productId, and quantity for A/B testing.

Click here for all the Confirmation Page function parameters.

  1. Open MAGENTO_ROOT/app/design/frontend/base/default/layout/affirm/affirm.xml
  2. Add the following snippet at the bottom
<checkout_onepage_success> <!-- To add pixel for enhanced analytics -->
    <reference name="head" before="-">
        <block type="affirm/promo_pixel_confirm" name="affirm_pixel_javascript" template="affirm/promo/pixel/confirm.phtml"/>
    </reference>
</checkout_onepage_success>
<checkout_multishipping_success translate="label"> <!-- To add pixel for enhanced analytics -->
    <reference name="head" before="-">
        <block type="affirm/promo_pixel_confirm" name="affirm_pixel_javascript" template="affirm/promo/pixel/confirm.phtml"/>
    </reference>
</checkout_multishipping_success>
  1. Add https://github.com/Affirm/Magento_Af.../confirm.phtml to your code

See the following GitHub links:

Required function parameters

Order object

Parameter Type Description
orderId string Your internal unique identifier representing the order. Maximum 500 characters.
total integer The total amount of the transaction, including tax and shipping, stated in USD cents (e.g., $100 = 10000).

Product object

Parameter Type Description
productId string Your internal unique identifier representing the product, such as the SKU or an internal database identifier. Maximum 500 characters.
quantity integer The quantity of the purchased product.

5. Test and set live

Test your upgrade development in our sandbox and make sure all of your Affirm promotional messaging components display as expected. Also be sure to keep a copy of your Magento store and database so you can revert to the previous version in case there are any issues. After testing, connect to our live site:

  1. Sign in to your live merchant dashboard at https://affirm.com/dashboard
  2. Retrieve your public and private keys
  3. In the Magento admin panel, go to System > Configuration > Sales > Payment Methods > Affirm
  4. Set Mode to Production
  5. Enter the Public API Key and Secret Key (private key) you just retrieved from the Affirm merchant dashboard

After you’ve connected to our live environment, you’re ready to deploy to your production environment.