Affirm App Manual English

    

Once installed and setup, the Affirm Payments app will promote and allow U.S. based customers of your site to pay in installments with Affirm.

Follow instructions in Lightspeed eCom to purchase the Affirm Payments app from the App Marketplace.  During install, you'll be forwarded to our app management site to either login to an existing account (if you've purchased a Lightspeed eCom app from AdVision before) OR create a new account with AdVision to install and manage this and any future apps you may purchase.

Once you've created an account or logged into your existing account, the app installs automatically, after which you'll be forwarded to the shops list, which displays a list of Lightspeed eCom shops registered with your account and any apps installed with those shops.  

To manage this app, click on "Affirm" under the appropriate shop.  This will take you to the settings for the app.

Settings

Within settings, you can control:

General Settings

  1. Enable Affirm - determines if Affirm should show in your checkout as a payment option.  Check this box and save changes to show, uncheck box and save changes to hide.
  2. Mode - if you want to perform test transactions with Affirm, set mode to Test.  If you want to take real payments, set mode to Live. 

API Settings

  1. Live Public API Key - the production public API key found in your Affirm dashboard
  2. Live Private API Key - the production private API key found in your Affirm dashboard
  3. Test Public API Key - the sandbox public API key found in your Affirm dashboard
  4. Test Private API Key - the sandbox private API key found in your Affirm dashboard
  5. Merchant Name - your business name
  6. Payment Action - When a customer completes payment when placing their order, do you want to only authorize the payment or do you want to immediately capture it as well? Authorize Only will cause payments to only be authorized during checkout and orders will be marked as "Awaiting Payment". Authorize & Capture will ensure that payment at checkout is not only authorized, but also immediately captured and orders will be marked as "Ready for Shipment".

Site Settings

  1. Include Affirm Enhanced Analytics - Do you want Affirm's enhanced analytics code to be included on the final page (order receipt display) of eCom checkout?  If Yes, the app will include tracking code on your eCom website.
  2. Minimum Order Threshold - This is the minimum order amount required for Affirm to be displayed as a checkout option. This number must be higher than $50. If blank, the default value of $50 will be used.  If a customer's order total is less than this minimum, Affirm will not be shown as a payment option in your store's checkout. 
  3. Maximum Order Threshold - Set the maximum order total needed to make payment via Affirm.  If a customer's order total is more than this maximum, Affirm will not be shown as a payment option in your store's checkout. 

Product and Cart Promotional Messaging

For more information on the Affirm promotional messaging used in this app, please see https://docs.affirm.com/Integrate_Affirm/Promotional_Messaging

  1. Enable Promotional Messaging on (Product or Cart) Page - determine whether to enable the Affirm promotional messaging
  2. Color - determine the color to use for the logo or symbol on your Affirm promotional messaging
  3. Type - determine the type of display to use for the Affirm promotional messaging.  Logo will show the full Affirm logo, Text will show text only, and Symbol will use a smaller/partial Affirm logo.
  4. Target Element - Determine which element that already exists on your page and that you'd like to use to determine where the promotional messaging should load.  This is determined by targeting an existing element, for example, on the product's page you might want to target the product's existing price display to show the promotional messaging next to it.  The value expected here is either a class, ID or another valid jQuery selector. 

    NOTE: If you're unfamiliar with CSS, Javascript, or jQuery, we recommend you contract someone familiar with web development.  What is needed is a way to tell this app which element you want to target, so the app will show the relevant Affirm messaging next to that element.
  5. Target Action - This tells the app where, in relation to the target element you've specified in the previous field, the promotional messaging should be inserted. You can either Insert After, Insert Before, Prepend Within, or Append Within, the existing element you're targeting.

Payment Page

  1. Do NOT Auto Generate Order - Don't show instructions with 'Create Affirm Order' button on page, just attempt to automatically start the Affirm payment process.  Only select this if you are using the AdVision Gift Card payment app.  
  2. Show Instructions to Customer - if you want to display some custom instructions to your customer, uncheck "Auto Generate Order" setting and check the box for this setting.  After saving changes, go to the Translations tab and update the text for the "Affirm Customer Instructions" message. 
  3. Button Text Color - Set the color for text within any buttons that show on app's payment pages. 
  4. Button Background Color - Set the color for the background of any buttons that show on the app's payments pages. 

Loading Page Settings (optional)

  1. Logo URL - Provide full (absolute) URL (web address) to the logo you'd like to display on any of this app's loading page.
  2. Background Color - Select the background color you'd like for any of this app's loading page. 
  3. Text Color - Select the text color you'd like to use for any text displayed on this app's loading page. 
  4. Custom CSS - Only for users with advanced experience working in CSS code. Any CSS provided here will load on any of the app's loading page.   Warning: improper use of this field may cause the app to not function correctly. 
  5. Custom Javascript - Only for users with advanced experience working in Javascript. Any Javascript provided here will load on any of the app's loading page.  Warning: improper use of this field may cause the app to not function correctly. 

If you make any changes to any of these settings fields, be sure to click "Save Settings" button to save those changes.  After you have saved your changes, be sure to scroll to the bottom of the page and click "Check Install (Publish Changes)", to ensure any changes you've made that require publishing, are published to the eCom website.  It can take several minutes for Lightspeed to publish changes.

Translations (optional)

If you'd like to change the text that displays on any of the app's pages or widgets, click on the "Translations" tab.  This will take you to a list of text that you can enter translations for in any of the supported languages.  Each piece of text has a default value, but you can override that value by entering your own into the message's translation field.  Be sure to click the "Save Changes" button after you enter/change any translations.  After you update translations, come back to the settings tab and click "Check Install (Publish Changes") to ensure your translation changes are published to the eCom website.

Several translation elements within the Affirm app are specifically built to support the Affirm promotional messaging.  These elements include:

  1. Affirm - Cart Widget: Used for the display of the promotional messaging on the cart page
  2. Affirm - Product Widget: Used for the display of the promotional messaging on the product page.

Within these widgets are special placeholders, which need to remain for the app to properly control the widget displays.  Those placeholders are all caps words, surrounded by curly brackets, seen in the element's code.  The placeholders currently used are Price, Color, and Type, which show in the element code as {PRICE}, {COLOR}, and {TYPE}.  Additional placeholders in the product  include messaging Brand, Category, and SKU; represented as {BRAND}, {CATEGORY}, and {SKU}.  If you change these elements' code via the translation feature, be sure to leave the placeholders in place with their proper attributes if you want the app to be able to properly configure each widget's display based on the settings you've saved in the apps Settings tab.

Payments (optional)

Processing completed transactions (capture, void, refund) should be done through your Affirm dashboard using the following instructions: https://docs.affirm.com/Merchant_Resources/Merchant_Daily_Operations/Merchant_Dashboard/Processing_Transactions_in_the_Affirm_Dashboard

If you prefer, you can also process transactions through the AdVision app on the "Payments" tab.  Under this tab, any payments will be listed - most recent first - for you to view and complete captures, refunds, and voids.

  1. Capture - If you have your app setup to "Authorize Only", the capture button will display with the payment so you can capture the payment at a later date.
  2. Void - If you want to void a payment, you can do so before it's captured.
  3. Refund - After a payment is captured, you can refund, in full or in part, the payment.  Enter an amount in the text field below the refund button, then click "Refund" to generate a refund for the amount you've entered.  You can submit multiple, partial refunds.

Add code to handle price changes

This section is intended for theme developers and those familiar with Javascript. 

Update Affirm promotional messaging to handle price changes

The price displayed on your product or cart pages may change due to product variants, quantity changes, etc. If your Affirm promotional messaging displays before the price update, the messaging will be inaccurate. To keep messaging updated, there are several functions available.

On a product's page, to update the product price being used for the Affirm promotional messaging, call updateAffirmProductPrice(price), with "price" being the new product price.  For example:

updateAffirmProductPrice(16000);//160.00

On the cart's page, to update the cart total being used for the Affirm promotional messaging, call updateAffirmCartTotal(total), with "total" being the new cart total.  For example:

updateAffirmCartTotal(20000);//200.00

Display CartWidget on the Fly

If you have any functionality within your website that dynamically loads the cart display, you can do so using the following functions:

displayAffirmCartWidget();//generates and attempts to display the cart widget

Go to Top

Follow
Reply