<head>
  <script src="https://js.stripe.com/v3/"></script>
</head>
<div class="product-container">
  <a href="order?product=drilldown">
    <div class="product">
      <img src="{{ url_for('static', filename='weekly.jpg') }}" alt="Data image"/>
      <div class="description">
        <h3>Drilldown</h3>
        <h5>200.00</h5>
      </div>
    </div>
  </a>
  <a href="order?product=sentiment">
    <div class="product">
      <img src="{{ url_for('static', filename='weekly.jpg') }}" alt="Data image"/>
      <div class="description">
        <h3>Sentiment</h3>
        <h5>45.00</h5>
      </div>
    </div>
  </a>
</div>

<script type="text/javascript">
  // Create an instance of the Stripe object with your publishable API key
  var stripe = Stripe("pk_test_51HbqYzAKLUD9ELc0KSyiQ9YohsfiUCeBpAfpflAIg2Uu2RFecx3sfWYXzM1xDtI5XlQihqHMnaPKd45JzDuqXdGP00pYWvRvRe");
  var setupButton = document.getElementById('setup-button');
  setupButton.addEventListener("click", function () {
    fetch("/setup-bacs", {
      method: "POST",
    })
      .then(function (response) {
        return response.json();
      })
      .then(function (session) {
        return stripe.redirectToCheckout({ sessionId: session.id });
      })
      .then(function (result) {
        // If redirectToCheckout fails due to a browser or network
        // error, you should display the localized error message to your
        // customer using error.message.
        if (result.error) {
          alert(result.error.message);
        }
      })
      .catch(function (error) {
        console.error("Error:", error);
      });
  });
</script>
