Stripe payments 更改条带客户端专用代码段中的数量_Stripe Payments

Stripe payments 更改条带客户端专用代码段中的数量

stripe-payments

Stripe payments 更改条带客户端专用代码段中的数量,stripe-payments,Stripe Payments,我使用Stripe的客户专用方法从网站上销售产品。javascript代码片段从Stripe帐户中创建的产品的Prices部分复制并粘贴到html页面中。这将创建一个签出按钮，将您带到该产品的带条托管签出页面我希望用户能够选择他们购买的产品的数量，我注意到在代码片段中有一个名为quantity的属性，其值为1。我可以用一个变量（我称之为numb）替换该值，如果我在页面前面为该变量指定了一个数字，那么当我签出时，将显示该项目的数量，并相应地更改价格。这就是我想要的。问题是，我每次尝试编写代码，以

我使用Stripe的客户专用方法从网站上销售产品。javascript代码片段从Stripe帐户中创建的产品的Prices部分复制并粘贴到html页面中。这将创建一个签出按钮，将您带到该产品的带条托管签出页面

我希望用户能够选择他们购买的产品的数量，我注意到在代码片段中有一个名为

quantity

的属性，其值为1。我可以用一个变量（我称之为

numb

）替换该值，如果我在页面前面为该变量指定了一个数字，那么当我签出时，将显示该项目的数量，并相应地更改价格。这就是我想要的。问题是，我每次尝试编写代码，以便用户可以输入他们想要的产品编号，从而更新数量变量并将其输入代码段，都会导致按钮无法工作（即无法加载Stripe的签出页面）

有可能做到这一点吗？如果是这样，怎么做

我已经粘贴了下面的html页面，上面显示了我添加的javascript。如果我注释掉

var numb=2行签出按钮无法加载签出页面。我希望早些时候给“麻木”的作业能奏效。即:
var numb = document.getElementById('number-tickets').value;

在这种情况下，用户将在输入框中输入所需的单位数，然后单击一个按钮，该按钮将运行一个函数，将输入框的值放入numb
。我尝试过的这些想法和其他各种想法都会导致在单击“签出”按钮时无法加载签出页面。唯一有效的方法是直接将整数赋值给numb

该页面的完整代码复制如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Template</title>
</head>
<body>
  <!-- Load Stripe.js on your website. -->
  <script src="https://js.stripe.com/v3"></script>

  <P>How many tickets do you want to buy?</p>
  <input type="number" id="number-tickets">
  <button id="testing">How many?</button>

  <script>
  // ***MY CODE***
    var howManyButton = document.getElementById('testing');
    howManyButton.addEventListener('click', function () {
      var numb = document.getElementById('number-tickets').value;
    });
  // ***END OF MY CODE***
  </script>

  <!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
  <button
    style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
    id="checkout-button-price_1H2N4aGmidqBA55lmQkZyjQy"
    role="link"
    type="button"
  >
    Checkout
  </button>

  <div id="error-message"></div>

  <script>
    // ***MY CODE***
    var numb = 2;
    // ***END OF MY CODE***
  </script>

  <script>
  (function() {
    var stripe = Stripe('pk_test_...redacted...');

    var checkoutButton = document.getElementById('checkout-button-price_1H2N4aGmidqBA55lmQkZyjQy');
    checkoutButton.addEventListener('click', function () {
      // When the customer clicks on the button, redirect
      // them to Checkout.
       stripe.redirectToCheckout({
        // ***MY CODE*** I replace the integer, 1, with my variable, numb
        lineItems: [{price: 'price_1H2N4aGmidqBA55lmQkZyjQy', quantity: numb}],
        // ***END OF MY CODE***
        mode: 'payment',
        // Do not rely on the redirect to the successUrl for fulfilling
        // purchases, customers may not always reach the success_url after
        // a successful payment.
        // Instead use one of the strategies described in
        // https://stripe.com/docs/payments/checkout/fulfillment
        successUrl: window.location.protocol + '//stevespages.org.uk/success',
        cancelUrl: window.location.protocol + '//stevespages.org.uk/canceled',
      })
      .then(function (result) {
        if (result.error) {
          // If `redirectToCheckout` fails due to a browser or network
          // error, display the localized error message to your customer.
          var displayError = document.getElementById('error-message');
          displayError.textContent = result.error.message;
        }
      });
    });
  })();
  </script>
</body>
</html>

这很接近！问题在于变量numb
是在回调函数作用域内创建的，该函数作用域用于howManyButton
的单击处理程序，而不是在父作用域中设置变量。发生这种情况的原因是函数内部numb
前面的var
关键字
试试这个：
  <script>
  // ***MY CODE***
    var howManyButton = document.getElementById('testing');
    howManyButton.addEventListener('click', function () {
      numb = document.getElementById('number-tickets').value;
    });
  // ***END OF MY CODE***
  </script>


//***我的代码***
var howManyButton=document.getElementById（'testing'）；
howManyButton.addEventListener（'click'，函数（）{
numb=document.getElementById（'number-tickets'）。值；
});
//***我的代码结束***

请注意单击处理程序内部缺少var
。它将更新当前在窗口上设置的现有numb
变量，而不是在该函数范围内创建新变量。
谢谢。我这样做了，但它仍然不起作用。我在问题的末尾添加了一个编辑，包括一个新版本的代码，我认为该代码显示得更符合逻辑，但本质上与第一个版本相同，但在函数中没有您建议的var关键字。
  <script>
  // ***MY CODE***
    var howManyButton = document.getElementById('testing');
    howManyButton.addEventListener('click', function () {
      numb = document.getElementById('number-tickets').value;
    });
  // ***END OF MY CODE***
  </script>