Изменить количество в фрагменте кода только для клиента Stripe - PullRequest
Новая
       24

Изменить количество в фрагменте кода только для клиента Stripe

0 голосов
/ 10 июля 2020

Я использую метод Stripe «Только клиент» для продажи продукта с веб-сайта. Фрагмент кода javascript копируется из раздела «Цены» продукта, созданного в учетной записи Stripe, и вставляется на страницу html. Это создает кнопку оформления заказа, которая перенаправляет вас на страницу оформления заказа, размещенную в полосе для этого продукта.

Я хочу, чтобы пользователь мог выбирать, сколько единиц продукта они покупают, и я заметил во фрагменте кода, что это свойство с именем quantity, имеющее значение 1. Я могу заменить это значение переменной (я назвал numb), и, если я назначу номер переменной ранее на странице, тогда, когда я проверю это количество отображается товар, и цена изменяется соответственно. Это то, что я хочу. Проблема в том, что каждая моя попытка написать код, чтобы пользователь мог ввести номер продукта, который он хочет, чтобы переменная количества обновлялась и вводилась во фрагмент кода, приводит к тому, что кнопка не работает (ie. Не работает загрузить страницу оформления заказа Stripe).

Предполагается, что это возможно? Если да, то как это можно сделать?

Я вставил страницу html ниже с указанием моих javascript дополнений. Если я закомментирую строку var numb = 2;, кнопка Checkout не сможет загрузить страницу оформления заказа. Я надеялся, что предыдущее задание `` онеметь '' сработает. То есть: 

var numb = document.getElementById('number-tickets').value;

В этом случае пользователь должен ввести количество единиц, которое он хочет, в поле ввода, а затем щелкнуть кнопку, которая запустит функцию, которая помещает значение поля ввода в numb. Эта и другие различные идеи, которые я пробовал, приводят к тому, что кнопка Checkout не загружает страницу Checkout при нажатии. Единственное, что работает, - это когда я напрямую назначаю целое число 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>

Изменить:

Я удалил префикс var из numb в ответ на cjav_dev , но если пользователь вводит число и нажимает Сколько? , а затем нажимает Оформить заказ , страница оформления заказа по-прежнему не загружается. Если они не нажмут кнопку Сколько? , тогда загрузится страница оформления заказа, но, конечно же, на ней просто будет количество единиц, жестко запрограммированных с помощью оператора var numb = 7;. Я внес еще несколько изменений в код, которые, как мне кажется, могут помочь выявить проблему, и вставил их ниже. 

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

  <p id="test-for-numb"></p>

  <script>
    // ***MY CODE***
    var numb = 7;
    // User Chooses
    var howManyButton = document.getElementById('testing');
    howManyButton.addEventListener('click', function () {
      numb = document.getElementById('number-tickets').value;
      // document.getElementById('test-for-numb').innerHTML = numb;
    });
    // ***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>
  (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>

1 Ответ

1 голос
/ 10 июля 2020

Это довольно близко! Проблема заключается в том, что переменная numb создается внутри области функции обратного вызова для обработчика кликов для вашего howManyButton, а не устанавливает переменную в родительской области. Это происходит из-за ключевого слова var перед numb внутри функции.

Попробуйте следующее: 

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

Обратите внимание на отсутствие var внутри обработчика кликов. Вместо того, чтобы создавать новую переменную внутри этой функции, он обновит существующую переменную numb, которая в настоящее время установлена ​​в окне.

...