Announcement

Collapse
No announcement yet.

Amazon Pay Additional Button Support?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Amazon Pay Additional Button Support?

    The Amazon Pay button support built into the Miva Module has orange and tan in three similar sizes. Amazon has a TON of other buttons that are accepted. See here: https://pay.amazon.com/us/merchant/tools and we can't get these through the 'point and click' mode on the amazon pay button config on the BASK page. I have tried the 'advanced' mode - you have access to the <img> tag. The problem is if you manipulate that <img> tag in advanced mode and supply your own saved copy of another Amazon image, the module will output a duplicate Amazon Pay button using the default settings. I have also tried putting just an ID on the <img> tag and using javascript to swap the SRC attribute once the page is loaded to a button of my choice. This works some of the time in some browsers but ultimately is not consistent and is a hack, obviously.

    What is the way to actually use something from here instead? https://pay.amazon.com/us/merchant/tools

    Sorry I can not post links.

    Colin
    Colin Puttick
    Miva Web Developer @ Glendale Designs

    #2
    Can you post an example of the changes you're making in advanced mode that is causing a second button to show up? You should be able to modify the source of the button to point to a new image.
    Brennan Heyde
    VP Product
    Miva, Inc.
    [email protected]
    https://www.miva.com

    Comment


      #3
      Thanks Brennan.
      Yes.

      Here is what "Advanced Mode" looks like with the default <img> tag:
      HTML Code:
      <script>
      var amazonOrderReferenceId;
      
      new OffAmazonPayments.Widgets.Button(
      {
          sellerId: '&mvt:amazonpay:merchantid_encoded;',
          onSignIn: function( orderReference )
          {
              amazonOrderReferenceId = orderReference.getAmazonOrderReferenceId();
              AmazonPay_SaveAmazonOrderReferenceId( amazonOrderReferenceId, function( response )
              {
                  if ( !response.success )
                  {
                      return alert( response.error_message );
                  }
      
                  window.location = '&mvt:amazonpay:apa_ocst_url_encoded;';
              } );
          },
          onError: function( error )
          {
              return alert( error.getErrorMessage() );
          }
      } ).bind( "payWithAmazonDiv" );
      
      function AmazonPay_SaveAmazonOrderReferenceId( amazonOrderReferenceId, callback )
      {
          return AJAX_Call_Module(    callback,
                                      'runtime',
                                      'amazonpay',
                                      'AmazonPay_SaveAmazonOrderReferenceId',
                                      'AmazonOrderReferenceId=' + encodeURIComponent( amazonOrderReferenceId ) );
      }
      </script>
      
      <div id="payWithAmazonDiv">
          <img src="&mvt:amazonpay:amazon_button_url;?sellerId=&mvta:amazonpay:merchantid;&amp;size=&mvta:amazonpay_button:size;&amp;color=&mvta:amazonpay_button:color;" style="cursor: pointer;"/>
      </div>
      So if I manipulate that <img> tag on the bottom there to something like this: (And I have uploded "Button_gold_L._V526162778_.png" to the root of my site) This is just the image tag portion of the script

      HTML Code:
      <img src="/images/Button_gold_L._V526162778_.png?&mvta:amazonpay:amazon_button_url;&sellerId=&mvta:amazonpay:merchantid;&amp;size=&mvta:amazonpay_button:size;&amp;color=&mvta:amazonpay_button:color;" />
      Then I get my button but it is not clickable/linked by the module AND another button with default settings (Orange, Large) shows up beside it automatically which is clickable and pops up the window to login to Amazon.

      FYI:
      The code for my hack/workaround was this: I added an ID to the default image tag and then overwrote the SRC attribute onload.

      HTML Code:
      {all script default as above}
      
      <div id="payWithAmazonDiv">
          <img  id="myAZBtn" src="&mvt:amazonpay:amazon_button_url;?sellerId=&mvta:amazonpay:merchantid;&amp;size=&mvta:amazonpay_button:size;&amp;color=&mvta:amazonpay_button:color;" style="cursor: pointer;"/>
      </div>
      
      <script type="text/javascript">
      $(function() {
          //console.log( "ready colin!" );
          $('#myAZBtn').attr('src','/images/Button_gold_L._V526162778_.png');
      });
      </script>
      Colin Puttick
      Miva Web Developer @ Glendale Designs

      Comment


        #4
        Is there a workaround to use more AmazonPay buttons yet? FYI My hacks don't work.
        Colin Puttick
        Miva Web Developer @ Glendale Designs

        Comment


          #5
          Originally posted by dreamingdigital View Post
          Is there a workaround to use more AmazonPay buttons yet? FYI My hacks don't work.
          I'd really like to see a different button as well. The current site uses a really yucky, outdated one, and yes the actual size as shown below:

          button.jpg
          Jamie Donaldson
          JSDVS Web Design / Development
          Web Design | Web Development | E-commerce Design & Integration

          Comment


            #6
            I'd also like a better display of the address/etc widgets. No pixels please.
            Jamie Donaldson
            JSDVS Web Design / Development
            Web Design | Web Development | E-commerce Design & Integration

            Comment


              #7
              Has anyone figured this out?
              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment


                #8
                Originally posted by dreamingdigital View Post
                Thanks Brennan.
                Yes.

                Here is what "Advanced Mode" looks like with the default <img> tag:
                HTML Code:
                <script>
                var amazonOrderReferenceId;
                
                new OffAmazonPayments.Widgets.Button(
                {
                sellerId: '&mvt:amazonpay:merchantid_encoded;',
                onSignIn: function( orderReference )
                {
                amazonOrderReferenceId = orderReference.getAmazonOrderReferenceId();
                AmazonPay_SaveAmazonOrderReferenceId( amazonOrderReferenceId, function( response )
                {
                if ( !response.success )
                {
                return alert( response.error_message );
                }
                
                window.location = '&mvt:amazonpay:apa_ocst_url_encoded;';
                } );
                },
                onError: function( error )
                {
                return alert( error.getErrorMessage() );
                }
                } ).bind( "payWithAmazonDiv" );
                
                function AmazonPay_SaveAmazonOrderReferenceId( amazonOrderReferenceId, callback )
                {
                return AJAX_Call_Module( callback,
                'runtime',
                'amazonpay',
                'AmazonPay_SaveAmazonOrderReferenceId',
                'AmazonOrderReferenceId=' + encodeURIComponent( amazonOrderReferenceId ) );
                }
                </script>
                
                <div id="payWithAmazonDiv">
                <img src="&mvt:amazonpay:amazon_button_url;?sellerId=&mvta:amazonpay:merchantid;&amp;size=&mvta:amazonpay_button:size;&amp;color=&mvta:amazonpay_button:color;" style="cursor: pointer;"/>
                </div>
                So if I manipulate that <img> tag on the bottom there to something like this: (And I have uploded "Button_gold_L._V526162778_.png" to the root of my site) This is just the image tag portion of the script

                HTML Code:
                <img src="/images/Button_gold_L._V526162778_.png?&mvta:amazonpay:amazon_button_url;&sellerId=&mvta:amazonpay:merchantid;&amp;size=&mvta:amazonpay_button:size;&amp;color=&mvta:amazonpay_button:color;" />
                Then I get my button but it is not clickable/linked by the module AND another button with default settings (Orange, Large) shows up beside it automatically which is clickable and pops up the window to login to Amazon.

                FYI:
                The code for my hack/workaround was this: I added an ID to the default image tag and then overwrote the SRC attribute onload.

                HTML Code:
                {all script default as above}
                
                <div id="payWithAmazonDiv">
                <img id="myAZBtn" src="&mvt:amazonpay:amazon_button_url;?sellerId=&mvta:amazonpay:merchantid;&amp;size=&mvta:amazonpay_button:size;&amp;color=&mvta:amazonpay_button:color;" style="cursor: pointer;"/>
                </div>
                
                <script type="text/javascript">
                $(function() {
                //console.log( "ready colin!" );
                $('#myAZBtn').attr('src','/images/Button_gold_L._V526162778_.png');
                });
                </script>
                Colin - what if you remove the
                Code:
                 
                 &amp;size=&mvta:amazonpay_button:size;&amp;color=&mvta:amazonpay_button:color;
                from your image?

                Leslie Kirk
                Miva Certified Developer
                Miva Merchant Specialist since 1997
                Previously of Webs Your Way
                (aka Leslie Nord leslienord)

                Email me: [email protected]
                www.lesliekirk.com

                Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                Comment


                  #9
                  FYI - I have tried this

                  Code:
                  <div id="payWithAmazonDiv">
                      <img src="https://d2ldlvi1yef00y.cloudfront.net/us/live/en_us/amazonpay/gold/large/button_T6.png?sellerId=&mvta:amazonpay:merchantid;" style="cursor: pointer;"/>
                  </div>
                  and it does activate the popup window.
                  Leslie Kirk
                  Miva Certified Developer
                  Miva Merchant Specialist since 1997
                  Previously of Webs Your Way
                  (aka Leslie Nord leslienord)

                  Email me: [email protected]
                  www.lesliekirk.com

                  Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                  Comment


                    #10
                    Originally posted by lesliekirk View Post
                    FYI - I have tried this

                    Code:
                    <div id="payWithAmazonDiv">
                    <img src="https://d2ldlvi1yef00y.cloudfront.net/us/live/en_us/amazonpay/gold/large/button_T6.png?sellerId=&mvta:amazonpay:merchantid;" style="cursor: pointer;"/>
                    </div>
                    and it does activate the popup window.
                    Yep, that opens the login popup and allows you to go through Amazon Checkout on the site.
                    Jamie Donaldson
                    JSDVS Web Design / Development
                    Web Design | Web Development | E-commerce Design & Integration

                    Comment


                      #11
                      Originally posted by jsdva View Post

                      Yep, that opens the login popup and allows you to go through Amazon Checkout on the site.
                      Awesome! Thanks for the confirmation Jamie
                      Leslie Kirk
                      Miva Certified Developer
                      Miva Merchant Specialist since 1997
                      Previously of Webs Your Way
                      (aka Leslie Nord leslienord)

                      Email me: [email protected]
                      www.lesliekirk.com

                      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                      Comment


                        #12
                        Originally posted by lesliekirk View Post

                        Awesome! Thanks for the confirmation Jamie
                        Anytime Leslie!
                        Jamie Donaldson
                        JSDVS Web Design / Development
                        Web Design | Web Development | E-commerce Design & Integration

                        Comment

                        Working...
                        X