我怎样才能将 2 张图片并排放置，并且这些图片充当我的 Stripe 付款按钮，有 2 个不同的收费金额？

Question

如何将两张图片并排放置并使条码正常工作？它们是不同的，但两个按钮最终都收取 89 美元。我怎样才能解决这个问题？

我已经尝试将每个代码都放在一个 table 中，但它仍然不起作用。

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

出于某种原因，金色按钮调用 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 是正确的，而不是使用重复的 id。您应该切换到 class 名称或为您的表单和输入元素使用唯一 ID。

如果你想使用唯一的 ID，你可以命名 space 如果你只有几个包。因此，而不是 stripeToken 和 stripeEmail。您可以使用 silverStripeToken、silverStripeEmail、goldStripeToken 和 goldStripeEmail 或您选择的任何内容。

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

这是一个示例，说明如何重组 HTML 和 JavaScript。

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

我怎样才能将 2 张图片并排放置，并且这些图片充当我的 Stripe 付款按钮，有 2 个不同的收费金额？

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

html

javascript

php

jquery

stripe-payments