Amazon Pay Additional Button Support?

[dreamingdigital]

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

[Brennan]

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.

[dreamingdigital]

Thanks Brennan.
Yes.

Here is what "Advanced Mode" looks like with the default <img> tag:

<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

<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.

{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>

[dreamingdigital]

Is there a workaround to use more AmazonPay buttons yet? FYI My hacks don't work.

[jsdva]

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

[jsdva]

I'd also like a better display of the address/etc widgets. No pixels please.

[lesliekirk]

Has anyone figured this out?

[lesliekirk]

Thanks Brennan.
Yes.

Here is what "Advanced Mode" looks like with the default <img> tag:

<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

<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.

{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

 
 &size=&mvta:amazonpay_button:size;&color=&mvta:amazonpay_button:color;

from your image?

[lesliekirk]

FYI - I have tried this

<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.

[jsdva]

FYI - I have tried this

<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.

[lesliekirk]

Yep, that opens the login popup and allows you to go through Amazon Checkout on the site.

Awesome! Thanks for the confirmation Jamie

[jsdva]

Awesome! Thanks for the confirmation Jamie

Anytime Leslie!