Collin Duncan Collin Duncan - 3 months ago 16
CSS Question

Stripe Checkout Button Too Small on Mobile

I feel like I must be missing something incredibly simple. Whenever I attempt to implement Stripe's Checkout feature on a mobile site, the payment button appears very, very small.

I stripped everything away that might be causing styling issues and then just started using their basic embedded form just to see and I still get this problem where it just doesn't appear optimized for a mobile format.

What am I missing here?

<html>
<form id="buy" action="backend/create_subscription.php" method="post">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_SOMEKEYHERE"
data-amount="2000"
data-name="Widget"
data-description="Some widget"
data-image="/img/marketplace.png"
data-locale="auto"
data-shipping-address="true"
data-label="Option 1"
data-panel-label="Subscribe"
data-bitcoin="false">
</script>
</form>
</html>


Image of the tiny button on mobile

Answer

This isn't a button issue, it's a scaling issue. You might want to try this in your <head>:

 <meta name="viewport" content="width=device-width, initial-scale=1">

That should (probably?) help with scaling. You could also do a Custom integration and that will allow you to use whatever button you want to trigger it.

Comments