[ How can I put 2 images next to each other and the images act as my Stripe payment buttons with 2 different charge amounts? ]

How can I put the two images right by each other and have the stripe code work correctly? They are different but both buttons end up charging $89. How can I fix this?

I've tried to put each code in a table but it still doesn't work.

<img src="images/Silver-Package.png" id="Silver" alt="Silver Sale Price" title="Silver Sale Price"/>

        <form action="http://cheapcruisesandvacations.com/process89.php" method="post" id='paymentForm'>
         <input type='hidden' name='stripeToken'  id='stripeToken' value=''>
         <input type='hidden' name='stripeEmail'  id='stripeEmail' value=''>
        </form>

        <script src="https://checkout.stripe.com/checkout.js"></script>
        <script>    
          var handler = StripeCheckout.configure({
            key: 'pk_test_Ng4LY005xjAaadkROBTdWU6s',
            image: '[[url of image for the check out form]]',
            token: function(token) {
        $( "#stripeToken" ).val( token.id);
        $( "#stripeEmail" ).val( token.email);
        $( "#paymentForm" ).submit();
            }
          });


        $( "#Silver" ).click(function(event) {
            // Open Checkout with further options
            handler.open({
              name: 'Cruise',
              description: 'Cruise Solo',
              amount: 8900,
            });
            event.preventDefault();
          });
        </script>


    <img src="images/Gold-Package.png" id="Gold" alt="All Inclusive- Cruise, Flight and Hotel" title="All Inclusive- Cruise, Flight and Hotel"/> 

For some reason the gold button calls PROCESS89.PHP

<form action="http://cheapcruisesandvacations.com/process399.php" method="post" id='paymentForm'>
         <input type='hidden' name='stripeToken'  id='stripeToken' value=''>
         <input type='hidden' name='stripeEmail'  id='stripeEmail' value=''>
        </form>

        <script src="https://checkout.stripe.com/checkout.js"></script>
        <script>
          var handler = StripeCheckout.configure({
            key: 'pk_test_Ng4LY005xjAaadkROBTdWU6s',
            image: '[[url of image for the check out form]]',
            token: function(token) {
        $( "#stripeToken" ).val( token.id);
        $( "#stripeEmail" ).val( token.email);
        $( "#paymentForm" ).submit();
            }
          });


        $( "#Gold" ).click(function(event) {
            // Open Checkout with further options
            handler.open({
              name: 'Gold',
              description: 'Cruise, Flight and Hotel',
              amount: 39900,
            });
            event.preventDefault();
          });
        </script>

Answer 1

@roullie is correct, instead of using duplicate ids. You should switch to class names or use unique ids for your forms and input elements.

If you want to use unique ids you could name space them if you only have a couple of packages. So instead of stripeToken and stripeEmail. You could use silverStripeToken,silverStripeEmail,goldStripeToken and goldStripeEmail or what ever you choose.

Then you could replace the function calls inside of your click handler to use id's similar to previously mentioned(name spaced id's).

Here is an example of how you could restructure your HTML and JavaScript.

Live Example: http://codepen.io/larryjoelane/pen/rxXNBQ?editors=1010

HTML:

<img src="images/Silver-Package.png" id="Silver" alt="Silver Sale Price" title="Silver Sale Price" />

<form action="http://cheapcruisesandvacations.com/process89.php" method="post" id='silverPaymentForm'>
  <input type='hidden' name='stripeToken' id='SilverStripeToken' value=''>
  <input type='hidden' name='stripeEmail' id='SilverStripeEmail' value=''>
</form>


    <img src="images/Gold-Package.png" id="Gold" alt="Gold - All Inclusive- Cruise, Flight and Hotel" title="All Inclusive- Cruise, Flight and Hotel" /> FOR SOME REASON THE GOLD BUTTON CALLS PROCESS89.PHP
    <form action="http://cheapcruisesandvacations.com/process399.php" method="post" id='GoldPaymentForm'>
      <input type='hidden' name='stripeToken' id='goldStripeToken' value=''>
      <input type='hidden' name='stripeEmail' id='goldStripeEmail' value=''>
    </form>

JavaScript:

var goldHandler = StripeCheckout.configure({
  key: 'pk_test_Ng4LY005xjAaadkROBTdWU6s',
  image: '[[url of image for the check out form]]',
  token: function(token) {
    $("#goldStripeToken").val(token.id);
    $("#goldStripeEmail").val(token.email);
    $("#goldPaymentForm").submit();
  }
});

    var silverHandler = StripeCheckout.configure({
  key: 'pk_test_Ng4LY005xjAaadkROBTdWU6s',
  image: '[[url of image for the check out form]]',
  token: function(token) {
    $("#silverStripeToken").val(token.id);
    $("#silverStripeEmail").val(token.email);
    $("#silverPaymentForm").submit();
  }
});


$("#Silver").click(function(event) {
  // Open Checkout with further options
  silverHandler.open({
    name: 'Cruise',
    description: 'Cruise Solo',
    amount: 8900,
  });
  event.preventDefault();
});


$("#Gold").click(function(event) {
  // Open Checkout with further options
  goldHandler.open({
    name: 'Gold',
    description: 'Cruise, Flight and Hotel',
    amount: 39900,
  });
  event.preventDefault();
});