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).
## 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:
Affirm.js` and the Affirm configuration initialization in the global header
3\. Open `
4\. Add the following function
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](🔗).
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-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:
|Column Title||Column Title|
|**data-page-type="banner"**||[Magento_Affirm - line 27](🔗) (use with class=affirm-site-modal)|
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:
Since site modals (affirm-site-modal) do not display price-specific information, they are typically used with the following data-page-types:
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 `
productId`, and `
quantity` for A/B testing.
1\. Open `
2\. Add the following snippet at the bottom
3\. Add [https://github.com/Affirm/Magento_Af.../confirm.phtml](🔗) to your code
See the following GitHub links:
## 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.