Stripe Custom Checkout With Options

Question

How can you add a size option to Stripe Custom Checkout? As of right now I have this for using the custom checkout with a script tag.

<?php
require('config.php');


?>
  <form action="charge.php" method="post">
      <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="<?php echo $stripe['publishable_key']?>"
        data-amount="3500"
        data-locale="auto"
        data-company="Company Name"
        data-billingAddress="true"
        data-email="true">
      </script>
  </form>

Answer 1

You cannot.

This is because Stripe embeds the checkout inside an iframe element. It does this so that you cannot access the card details from your own js context. This keeps you PCI compliant without having to deal with any of that stuff.

If you want a more customizable experience either tokenize the cards yourself without using their checkout. Or use the new Elements API to create a hybrid that will give you a lot more style control, with less setup and many nice to have features.