Javascript issue on checkout page

Posted on 2011-05-03
Last Modified: 2012-06-27
We are trying to list 2 checkout buttons on our checkout page utilizing Amazon checkout  The script seems to have an issue with this and we need some guidance.

We want to list product #1 with a checkout button below it. This works great.
We then have a 2nd product, but when we add the script for the 2nd product, it puts the 2 buttons right next to each other, regardless of where we place the code on the page.

To see exactly what we are talking about, please look at this page:

We have the 2 checkout script codes completely separated on the page and located under each product image. In fact, we have placed the 2nd checkout code button at the bottom of the page and it still puts them side by side.

The code is generated by the Amazon page and other than placing the code, we are not able to modify it.

How do we create separation of the 2 scripts?  We have tried
and other variations - no luck.
Question by:kwick
    LVL 6

    Accepted Solution

    you can make the second one unique like this by adding a 1
    RenderCBAButton1 = function(ordervalue) {
    document.getElementById('cbaxmlButton1').innerHTML = '';
    var standard1 = new CBA.Widgets.StandardCheckoutWidget({
    merchantId: "A2MDXM015J6IMC",
    buttonSettings: {size:'medium',color:'orange',background:'white'},
    orderInput: {
    format: "XML",
    value: ordervalue}
    LVL 82

    Expert Comment

    by:Dave Baldwin
    You're putting them in the same <div> "<div id="cbaxmlButton">".   Even though you have a second copy, javascript will only find the first one.  "id"s are supposed to be unique.  "class"s can be used in multiple elements but "id"s shouldn't be.

    Author Closing Comment

    Perfect and fast.  Hours of frustration - GONE!!!


    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now