Affirm Message to show on Products

zosh
Excursionist
30 0 5

Hello,

 

I'm looking to add AFFIRM message to my products. like shown down in the example below.

 

I downloaded the affirm pay message app but no luck. had help with a great person here to try and help me code the message but it's very inconsistent. I would have to refresh the page to get it to load up. instead of it loading up how SHOP PAY installments would. 

 

Any help with getting affirm to show up like the example I provided down below.

 

website: Zoshmfg.com

theme: streamlineScreen Shot 2023-02-23 at 1.06.38 AM.png

Zosh
Replies 4 (4)

EcomGraduates
Shopify Partner
588 48 77

To add an AFFIRM message to your products, you can use custom code to add the AFFIRM messaging to your product page template. Here's an example of how to do this:

  1. Add the AFFIRM messaging code to your product page template. You can do this by adding the following code to your product.liquid file, below the product price:

 

<div id="affirm-as-low-as"></div>

<script>
  window.affirm_config = {
    public_api_key: 'YOUR_PUBLIC_API_KEY',
    script: 'https://cdn1-sandbox.affirm.com/js/v2/affirm.js'
  };
</script>

<script>
  (function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src=window.affirm_config.script;
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(script, node);
  })();
</script>

<script>
  window.onload = function() {
    var amount = '{{ product.price | money_without_currency | replace:',': '' }}';
    Affirm.ui.payments({
      "merchant": {
        "user_confirmation": true
      },
      "amount": amount,
      "divSelector": "#affirm-as-low-as",
      "promoId": "",
      "asLowAs": true,
      "paymentOptions": ["3", "6", "12"]
    });
  }
</script>

 

 

 

This code loads the AFFIRM messaging script, sets the AFFIRM configuration options, and displays the AFFIRM messaging on the product page with the amount, payment options, and "As low as" messaging.

  1. Replace YOUR_PUBLIC_API_KEY with your actual public API key from AFFIRM. You can find your API key in your AFFIRM account dashboard.

  2. Save the product.liquid file and test the product page to see if the AFFIRM messaging appears.

 

mastergangl
Visitor
1 0 0

i have try and it's doesn't work

mastergangl_0-1695188572944.png

 

Alejandro33
Visitor
1 0 0

The best way to do it ist this:

1st.- Aftter set up the payment method and your account go to customize theme:

Screenshot 2023-12-15 103611.png

 2nd.- go to product page:

Alejandro33_0-1702654631096.png

3rd.- In product information find add new block:

Alejandro33_1-1702654683833.png

4.- find affirm at the bottom of the blocks:

Alejandro33_2-1702654720818.png

 and that is it. 

Alex_Dismount
Shopify Partner
7 0 0

I think this seems like a great solution although I'm receiving a Syntax error on line 266, any idea on how to fix this?

Screenshot 2024-03-26 at 5.37.28 PM.png