Question

如何将两个图像相互正确放置并使条带代码正常工作？它们是不同的，但两个按钮最终收费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"/>

由于某种原因，黄金按钮会调用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。您应该切换到类名或使用表单和输入元素的唯一ID。

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

然后你可以替换你点击处理程序里面的函数调用来使用类似于前面提到的id（名称间隔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种不同的收费金额？

1 个答案: