Javascript 我怎样才能将两张图片放在一起，并且这些图片可以作为我的条纹付款按钮，有两种不同的收费金额？

如何将两个图像放在一起，并使条纹代码正常工作？它们是不同的，但两个按钮最终都要89美元。我怎样才能解决这个问题

我试着把每一个代码放在一个表中，但仍然不起作用

<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"/> 

---

@roullie是正确的，而不是使用重复的ID。您应该切换到类名，或者对表单和输入元素使用唯一ID

如果你想使用唯一的ID，如果你只有几个包，你可以用空格命名。因此，不再使用

stripeToken

和

stripeEmail

。您可以使用silverStripeToken、silverStripeEmail、goldStripeToken和goldStripeEmail或任何您选择的工具

然后，您可以替换单击处理程序中的函数调用，以使用类似于前面提到的id（名称间隔id）

下面是一个如何重构HTML和JavaScript的示例

实例：

HTML:

---

在一页上只使用

id

。您正在调用

$（'#paymentForm'）.submit（）

，它总是调用第一个表单。我将其更改为：id='payment'>和$（“#payment”）.submit（）；一旦我提交了我的信息，我就会问：付款没有通过…@E-Rod你有机会尝试一下我对你的脚本所做的修改吗？@E-Rod在我的回答中或在“实时预览”链接中使用更新的JavaScript试一试。我更改了您的单击处理程序的名称，使它们都有一个，并修复了我在其中一个单击处理程序打开函数调用中放置错误id名称所犯的错误。我尝试了您的示例，但现在每个按钮只收取399美元。。。我尝试了不同的方法，但什么都没有。我认为第一个var处理程序是银的而不是金的，对吗？@E-Rod我忘了你的两个点击处理程序都有相同的名字。您需要更改其中一个的名称，因为您要在代码中重新分配它的值。我将更新我的答案。@E-Rod现在试试看，我在您的一个点击处理程序中有错误的名称，我更改了点击处理程序的名称，以便白银和黄金有自己的点击处理程序。OMG！非常感谢。它终于起作用了。我真的很感谢你的帮助Lane@E-罗德，没问题，我很高兴能帮上忙。到目前为止，你对条纹支付系统有什么看法？

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

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

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();
});