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

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

RacMathur
Shopify Partner
13 0 0

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.jpegphoto1680182737.jpegphoto1680182703.jpeg

Replies 4 (4)

okur90
Shopify Partner
126 20 18

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.

Code Slingin, Pixel Wranglin - Laugh it up at onlinex.com.au
RacMathur
Shopify Partner
13 0 0

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 %}
  <div class="product-form__quantity">
    <div class="product__label-wrapper">
      <label class="product__label {{ label_classes }}" for="Quantity-Input-{{ product.id }}">
        {{ 'products.product.quantity' | t }}
      </label>
    </div>
    <input
      type="number"
      id="Quantity-{{ product.id }}"
      name="quantity"
      value="1"
      min="1"
      pattern="[0-9]*"
      class="input product-form__input product-form__input--quantity"
      aria-label="{{ 'general.accessibility.quantity' | t }}"
    >
  </div>

  {% 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 <select> element which allows users to select all variants
    as a fallback and present it only when JS is disabled. In addition,
    make sure you hide the option inputs declared above, like we do with the
    `.js-enabled` class which only shows its contents when JS is enabled.
  {% endcomment %}
  <div class="product-form__variants">
    <select
      name="id"
      class="input"
      id="variant-selector"
      data-variant-select
    >
      {%- for variant in product.variants -%}
        <option
          value="{{ variant.id }}"
          {%- if variant == current_variant -%}
            selected="selected"
          {%- endif -%}
        >
          {{ variant.title }}
          {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
        </option>
      {%- endfor -%}
    </select>
  </div>

  <div
    class="product-form__controls-group product-form__controls-group--submit"
    {% if block %}
      {{- block.shopify_attributes -}}
    {% endif %}
  >
<p class="affirm-as-low-as" data-page-type="product" data-amount="your_price_variable"></p>
    <div class="affirm-list">
            <a href=" https://www.affirm.com/user/signin" target="_blank"> Love Now, Pay Later! Qualify with
 <img
            width="50px"
            height="20px"
            class=""
            src="{{ 'Affirm_logo.png' | asset_url }}"
          >
            </a>
     </div>

  <div class="buy-now-speclist">
   
    <div class="
        product-form__item product-form__item--submit
        {%- if show_dynamic_checkout %} product-form__item--payment-button {%- endif -%}
        {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}
      ">
  
      {%- if show_dynamic_checkout -%}
        {{ form | payment_button }}
      {%- endif -%}

      <button
        type="button"
        {% comment %}name="add"{% endcomment %}
        {% unless current_variant.available %}
          aria-disabled="true" disabled
        {% endunless %}
        aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
        class="product-form__cart-submit btn btn--medium btn--full btn--primary"
        {% comment %}data-add-to-cart{% endcomment %}
        data-lang-available="{{ 'product.add_to_cart' | t }}"
        data-lang-unavailable="{{ 'product.unavailable' | t }}"
        data-lang-sold-out="{{ 'product.sold_out' | t }}"
        onclick="mu_submit();"
      >
        <span data-add-to-cart-text>
          {%- unless current_variant.available -%}
            {{ 'products.product.sold_out' | t }}
          {%- else -%}
            {{ 'products.product.add_to_cart' | t }}
          {%- endunless -%}
        </span>
        <div class="btn__loading-wrap">
          <div class="btn__loading-bar"></div>
        </div>
        {% render 'icon' with icon: 'checkmark' %}
      </button>
      <button
        type="submit"
        style="display: none;"
        id="new_submit_atc_btn"
      ></button>
      {% comment %} {%- unless is_quick -%}
        <div class="product-form__shop-pay fs-body-75">
          {{- form | payment_terms -}}
        </div>
      {%- endunless -%} {% endcomment %}
    </div>
    <div class="buy-now-list">
            <a href="https://xxx.com/xxx" target="_blank"> CONSULT A SPECIALIST</a>
     </div>
  </div>
  </div>

   
  
{%- endform -%}

 

Affirm.js

 

<!-- Affirm -->

 _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<b.length;a++)d[b[a]]=k(c,e,b[a]);a=0;for(b=["get","token","url","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_affirm_config,"affirm","checkout","ui","script","ready");

<!-- End Affirm -->

 

okur90
Shopify Partner
126 20 18

Hi @RacMathur 

 

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

 

<p class="affirm-as-low-as" data-page-type="product" data-amount="your_price_variable"></p>

 

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

 

<p class="affirm-as-low-as" data-page-type="product" data-amount="{{ current_variant.price | times: 100 }}"></p>

 

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

Code Slingin, Pixel Wranglin - Laugh it up at onlinex.com.au

govind1
Shopify Partner
1 0 0

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

<!-- Affrim code start -->
<div id="prices">
<div id="buy-button">
<!-- Buy Now -->
</div>
<div id="regular-price">
<!-- $500.00 -->
</div>
<p id="affrim-offer-message" class="affirm-as-low-as" data-page-type="product" data-amount="50000"></p>
</div>
<!-- Affrim code end -->