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
    I solemnly swear that I am up to no good...

  • 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 Developer Relations
    Miva, Inc.
    [email protected]
    http://www.miva.com

    Comment


    • 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
      I solemnly swear that I am up to no good...

      Comment


      • Is there a workaround to use more AmazonPay buttons yet? FYI My hacks don't work.
        Colin Puttick
        I solemnly swear that I am up to no good...

        Comment

        Working...
        X