卡在条纹结帐

Question

我是不熟悉条纹的新手。我可以在测试模式下处理付款。但是我一直收到很多控制台日志错误。其中之一是“未捕获的TypeError：无法读取未定义的属性'closed'”我正在设置三笔付款作为选项，发送给要进行收费的服务器。我已经看到有人在stripecheckout.configure中使用“ closed：”的地方，但是它对我不起作用。

const stripePK = 'pk_test_key';



var handlerGold = StripeCheckout.configure({
  key: stripePK,
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  zipCode: true,
  billingAddress: true,
  token: function(token, args) {
    console.log('this is tokens', token)
    console.log('this is args', args)
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
    fetch('http://localhost:3000/api/charge/gold', {
        method: "POST",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer' + stripePK
        },
        body: JSON.stringify(token, args)
      })
      .then(output => {
        console.log(output)
        if (output.status === "succeeded")
          document.getElementById("shop").innerHTML = "<p>Purchase complete!</p>";
      })
      .catch((error) => {
        if (error.status === 400) {
          console.log('Bad request, often due to missing a required parameter.', error);
        } else if (error.status === 401) {
          console.log('No valid API key provided.', error);
        } else if (error.status === 404) {
          console.log('The requested resource doesn\'t exist.', error);
        } else if (error.status === 500) {
          console.log('Purchase Failed', error)
        }
      })

  }
});

var handlerPurple = StripeCheckout.configure({
  key: stripePK,
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  zipCode: true,
  billingAddress: true,
  token: function(token, args) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
    fetch('http://localhost:3000/api/charge/purple', {
        method: "POST",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer' + stripePK
        },
        body: JSON.stringify(token, args)
      })
      .then(output => {
        if (output.status === "succeeded")
          document.getElementById("shop").innerHTML = "<p>Purchase complete!</p>";
      })
      .catch((error) => {
        if (error.status === 400) {
          console.log('Bad request, often due to missing a required parameter.', error);
        } else if (error.status === 401) {
          console.log('No valid API key provided.', error);
        } else if (error.status === 404) {
          console.log('The requested resource doesn\'t exist.', error);
        } else if (error.status === 500) {
          console.log('Purchase Failed', error)
        }
      })

  }
});

var handlerWhite = StripeCheckout.configure({
  key: stripePK,
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  closed: function() {
    if (!token_triggered) {
      // close button click behavior goes here
      console.log("closed")
    } else {
      // payment completion behavior goes here
      console.log("passed")
    }
  },
  locale: 'auto',
  zipCode: true,
  billingAddress: true,
  token: function(token, args) {
    token_triggered = true;
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
    fetch('http://localhost:3000/api/charge/white', {
        method: "POST",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer' + stripePK
        },
        body: JSON.stringify(token, args)
      })
      .then(output => {
        if (output.status === "succeeded")
          document.getElementById("shop").innerHTML = "<p>Purchase complete!</p>";
      })
      .catch((error) => {
        if (error.status === 400) {
          console.log('Bad request, often due to missing a required parameter.', error);
        } else if (error.status === 401) {
          console.log('No valid API key provided.', error);
        } else if (error.status === 404) {
          console.log('The requested resource doesn\'t exist.', error);
        } else if (error.status === 500) {
          console.log('Purchase Failed', error)
        }
      })

  }
});


//GOLD PACKAGE BUTTON
document.getElementById('goldButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handlerGold.open({
    name: 'PMM Picnic',
    description: 'Gold Package',
    amount: 2000,
  });
  e.preventDefault();
});

//PURPLE PACKAGE BUTTON
document.getElementById('purpleButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handlerPurple.open({
    name: 'PMM Picnic',
    description: 'Purple Package',
    amount: 1000,
  });
  e.preventDefault();
});

//WHITE PACKAGE BUTTON
document.getElementById('whiteButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handlerWhite.open({
    name: 'PMM Picnic',
    description: 'White Package(Student & Staff Only)',
    amount: 700,
  });
  e.preventDefault();
});


// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handlerGold.close();
});
window.addEventListener('popstate', function() {
  handlerPurple.close();
});
window.addEventListener('popstate', function() {
  handlerWhite.close();
});

//END STRIPE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- registration for the events currently 3 options payment may be set up through strip or find a way to send to cashapp account -->
<div class="price-area" id="registration">
  <div class="container">
    <h1 class="title-default">Ticket Price & Plan</h1>
    <p class="sub-title-default">Here you can purchase your ticket and wristbands for the event and skip the lines</p>
  </div>
  <div class=" container plan">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="price-box1 price-box-hover">
          <span>White Package</span>
          <h2>$7</h2>
          <h3>per current band member & staff only </h3>
          <p>Free Food</p>
          <p>Free Drinks(Regular)</p>
          <p>Unlimited Prizes</p>
          <div id="shop">
            <button class="payButton" id="whiteButton">Order Now</button>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="price-box2 price-box-hover">
          <span>Purple Package</span>
          <h2>$10</h2>
          <h3>per person</h3>
          <p>Free Food</p>
          <p>Free Drinks(Regular)</p>
          <p>Unlimited Prizes</p>
          <div id="shop">
            <button class="payButton" id="purpleButton">Order Now</button>
          </div>

        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="price-box3 price-box-hover">
          <span>Gold Package</span>
          <h2>$20</h2>
          <h3>per person</h3>
          <p>Free Food</p>
          <p>Free Drinks(Any)</p>
          <p>Unlimited Prizes</p>
          <div id="shop">
            <button class="payButton" id="goldButton">Order Now</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
<!-- end of price boxes -->

<script src="https://checkout.stripe.com/checkout.js"></script>