How to ensure your Affirm + WooCommerce integration is up to date

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

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 WooCommerce admin portal
3. Go to WooCommerce > Settings > Payments
4. Click Affirm
5. Check Affirm Sandbox
6.\Enter the Public API Key and Secret Key (private key) you retrieved from the Affirm sandbox merchant dashboard.

2. Add Affirm.js

WooCommerce is currently setup to make our Affirm.js embed code accessible only to the product, cart, and payment pages. To make it accessible to all pages, do the following:

  1. Open ROOT_DIR/wp-content/plugins/woocommerce-gateway-affirm/woocommerce-gateway-affirm.php
  2. Comment lines 594-596
594 /* if ( ! is_product() && ! is_cart() && ! is_checkout() && ! is_checkout_pay_page() ) {
595     return;
596  } *

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.

1. Open ROOT_DIR/wp-content/plugins/woocommerce-gateway-affirm/woocommerce-gateway-affirm.php
2. Search for woocommerce_cart_totals_after_order_total
3. Add the cart argument in this function call on line 554

554 <?php $this->render_affirm_monthly_payment_messaging( floatval( WC()->cart->total ) * 100, 'cart' ); ?>

4. Search for woocommerce_single_product_summary
5. Add the product argument in this function call on line 489

489 <?php $this->render_affirm_monthly_payment_messaging( floatval( WC()->cart->total ) * 100, 'product' ); ?>

6. Search for the function render_affirm_monthly_payment_messaging
7. Add the page-type variable

protected function render_affirm_monthly_payment_messaging( $amount, $affirmPageType ) {
    $attrs = array(
        'amount'         => $amount,
        'promo-id'       => $this->get_gateway()->promo_id,
        'learnmore-show' => $this->get_gateway()->show_learnmore ? 'true' : 'false',
        'page-type'      => $affirmPageType
    );

data-page-type attributes

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

categorystringA product category page
productstringA product description page
cartstringThe customer cart page
paymentstringThe payment selection page
homepagestringYour site's home page
landingstringA landing page that describes Affirm
searchstringYour site's search results page
bannerstringA 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 ​​​​​

To add the confirmation page function, open ROOT_DIR/wp-content/plugins/woocommerce-gateway-affirm/woocommerce-gateway-affirm.php and add the following code to the end of the file:

/**
 * Add Tracking Code to the Thank You Page
 */
function wc_affirm_checkout_analytics( $order_id ) {
    $order = new WC_Order( $order_id );
    $total = floor(100*$order->get_total());
    $order_id = version_compare( WC_VERSION, '3.0', '<' ) ? $order->id : $order->get_id();
    $payment_type = $order->get_payment_method();
    foreach ($order->get_items() as $item_id => $item ) {
        $product = $item->get_product();
        $items_data [] = array(
            'name'       => $product->get_name(),
            'productId'  => $product->get_sku(),
            'quantity'   => $item->get_quantity(),
            'price' => floor(100*$item->get_total())
        );
    }
?>
<script>
affirm.ui.ready(function(){
        affirm.analytics.trackOrderConfirmed({
            "orderId": "<?php echo esc_js( $order_id ); ?>",
            "total": "<?php echo esc_js( $total ); ?>",
            "paymentMethod": "<?php echo esc_js( $payment_type ); ?>"},
             <?php echo json_encode($items_data)?>
        );
});
</script>
<?php
}
add_action( 'woocommerce_thankyou', 'wc_affirm_checkout_analytics' );
?>

5. Test and set live

Test your upgrade development in our sandbox and confirm that all Affirm promotional messaging components display as expected. 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 WooCommerce admin panel, go to WooCommerce > Settings > Payments
4. Click Affirm
5. Uncheck Affirm Sandbox
6. Enter the Public API Key and Private API 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.


Did this page help you?