Issues with Manual Integration of Affirm App (Promotional message) on Shopify Theme (Stelleto)

Shopify Discussion
1

Hi All,

I am facing an issue with the Affirm app (promotional msg) which says “$xx per month”. The Affirm team shared the following instruction set and I followed it but I still cant get it to work:

https://docs.affirm.com/payments/docs/promo-messaging-getting-started

If someone has had experience with this, that would be great. Adding a few screenshots of code pushed in so far here. Happy to provide more information as required.

photo1680182792.jpeg
photo1680182792.jpeg896×135 17.8 KB

photo1680182737.jpeg
photo1680182737.jpeg1280×495 52.3 KB

photo1680182703.jpeg
photo1680182703.jpeg1279×608 46.5 KB

2

Hi @RacMathur

To provide a complete solution, I would need to see the full code files.

And please add the code using the “Insert/Edit Code Sample” button.

3

Hi Oukur,

here are the 2 code files. Let me know if you need anything else:

product form liquid

{%- capture form_classes -%}
  product-form product-form-{{ section.id }}
{%- endcapture -%}
 
{%
  form 'product',
  product,
  class: form_classes,
  novalidate: 'novalidate',
  data-product-form: '',
  data-product-handle: product.handle,
  data-current-product-id: current_variant.id
%}
  {% comment %}
     product quantity within form remains hidden but will be updated
    from outside the form if enabled.
  {% endcomment %}
  
    

      
    

    
  

  {% comment %}
    In order for this form to submit, it needs to contain an input with name="id".
    ProductForm() will automatically create this input (or make sure it has the
    right value set if it already exists) on form submit based on the
    currently selected variant. However, if JS is disabled we need a fallback.

    Include a single 
      {%- for variant in product.variants -%}
        
      {%- endfor -%}
    
  

  

    
             Love Now, Pay Later! Qualify with
 
            
     

  
   
    

  
      {%- if show_dynamic_checkout -%}
        {{ form | payment_button }}
      {%- endif -%}

      
      
      {% comment %} {%- unless is_quick -%}
        

          {{- form | payment_terms -}}
        

      {%- endunless -%} {% endcomment %}
    

    
            [ CONSULT A SPECIALIST](https://xxx.com/xxx)
     

  

  

   
  
{%- endform -%}

Affirm.js


 _affirm_config = {
   public_api_key:  "XXXXX",
   script:          "https://cdn1.affirm.com/js/v2/affirm.js"
 };
 (function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){a[b]._.push([c,arguments])}};c[e]=k(c,e,"set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b="set add save post open empty reset on off trigger ready setProduct".split(" ");a
4

Hi @RacMathur

In the product form liquid code, you have the below line:

You should use the price in cents, as mentioned in the Affirm documentation. Modify the line to:

Also, you need to make sure that the Affirm.js file is loaded correctly on your product page.

5

I have also faced same issue where I am my Message is shown properly and when I try to add the variable of the price it disappears. please help me