title: stuck with Stripe Checkout
body: <p>I'm new to using stripe. I am able to process payment within test mode. but I keep receiving a lot of console log errors. One of which is "Uncaught TypeError: Cannot read property 'closed' of undefined" I have three payment I am setting up as options which are sent to my server where the charge is being made. I've seen where some have used "closed:" in their stripecheckout.configure but it is not working for me.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
          console.log(output)
          if (output.status === "succeeded")
            document.getElementById("shop").innerHTML = "&lt;p&gt;Purchase complete!&lt;/p&gt;";
        })
        .catch((error) =&gt; {
          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 =&gt; {
          if (output.status === "succeeded")
            document.getElementById("shop").innerHTML = "&lt;p&gt;Purchase complete!&lt;/p&gt;";
        })
        .catch((error) =&gt; {
          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 =&gt; {
          if (output.status === "succeeded")
            document.getElementById("shop").innerHTML = "&lt;p&gt;Purchase complete!&lt;/p&gt;";
        })
        .catch((error) =&gt; {
          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 &amp; 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</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- registration for the events currently 3 options payment may be set up through strip or find a way to send to cashapp account --&gt;
  &lt;div class="price-area" id="registration"&gt;
    &lt;div class="container"&gt;
      &lt;h1 class="title-default"&gt;Ticket Price &amp; Plan&lt;/h1&gt;
      &lt;p class="sub-title-default"&gt;Here you can purchase your ticket and wristbands for the event and skip the lines&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=" container plan"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"&gt;
          &lt;div class="price-box1 price-box-hover"&gt;
            &lt;span&gt;White Package&lt;/span&gt;
            &lt;h2&gt;$7&lt;/h2&gt;
            &lt;h3&gt;per current band member &amp; staff only &lt;/h3&gt;
            &lt;p&gt;Free Food&lt;/p&gt;
            &lt;p&gt;Free Drinks(Regular)&lt;/p&gt;
            &lt;p&gt;Unlimited Prizes&lt;/p&gt;
            &lt;div id="shop"&gt;
              &lt;button class="payButton" id="whiteButton"&gt;Order Now&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"&gt;
          &lt;div class="price-box2 price-box-hover"&gt;
            &lt;span&gt;Purple Package&lt;/span&gt;
            &lt;h2&gt;$10&lt;/h2&gt;
            &lt;h3&gt;per person&lt;/h3&gt;
            &lt;p&gt;Free Food&lt;/p&gt;
            &lt;p&gt;Free Drinks(Regular)&lt;/p&gt;
            &lt;p&gt;Unlimited Prizes&lt;/p&gt;
            &lt;div id="shop"&gt;
              &lt;button class="payButton" id="purpleButton"&gt;Order Now&lt;/button&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"&gt;
          &lt;div class="price-box3 price-box-hover"&gt;
            &lt;span&gt;Gold Package&lt;/span&gt;
            &lt;h2&gt;$20&lt;/h2&gt;
            &lt;h3&gt;per person&lt;/h3&gt;
            &lt;p&gt;Free Food&lt;/p&gt;
            &lt;p&gt;Free Drinks(Any)&lt;/p&gt;
            &lt;p&gt;Unlimited Prizes&lt;/p&gt;
            &lt;div id="shop"&gt;
              &lt;button class="payButton" id="goldButton"&gt;Order Now&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- end of price boxes --&gt;
  
  &lt;script src="https://checkout.stripe.com/checkout.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>