Center Align a Stripe Payment Button

Question

I'm having trouble centering my Stripe Payment button on my landing page. I've tried margins, text-align and wrapped it in a div to no avail. I apologize, my css knowledge isn't great but I would appreciate the help!

    `<!-- Load Stripe.js on your website. -->
   <script src="https://js.stripe.com/v3"></script> <!-- Create a button that your 
 customers 
  click to complete their purchase. Customize the styling to suit your branding. -->
  <button style="background-color:#FF8800;color:#FFF; padding:8px 12px;border:0;border- 
 radius:4px;font-size:1.5em" id="checkout-button-plan_HBK7An1HxIpxXF" role="link">Start 
Free 
Trial</button>
<div id="error-message">
</div>
<script>
/* <![CDATA[ */
(function() {
 var stripe = Stripe('pk_live_tkRbcnwJtcbR40owQTnDC3E0');

  var checkoutButton = document.getElementById('checkout-button-plan_HBK7An1HxIpxXF');
  checkoutButton.addEventListener('click', function () {
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
  items: [{plan: 'plan_HBK7An1HxIpxXF', quantity: 1}],

  // Do not rely on the redirect to the successUrl for fulfilling
  // purchases, customers may not always reach the success_url after
  // a successful payment.
  // Instead use one of the strategies described in
  // https://stripe.com/docs/payments/checkout/fulfillment
  successUrl: window.location.protocol + '//accountinguni.com/success',
  cancelUrl: window.location.protocol + '//accountinguni.com/canceled',
})
.then(function (result) {
  if (result.error) {
    // If `redirectToCheckout` fails due to a browser or network
    // error, display the localized error message to your customer.
    var displayError = document.getElementById('error-message');
    displayError.textContent = result.error.message;
    }
  });
 });
  })();
 /*]]>*/
 </script>`

I don't agree with this question being a duplicate. The centering the Stripe Payment Request button I found pretty challenging as it is clearly set up to expand to the available space behind the scenes and aligning as I would normally resulted in the button collapsing. What worked for me: `margin-left: auto; margin-right: auto; text-align: center; width: 100%;` On a div that wrapped the button — James Mundy, Jan 28 '21 at 17:25

EdgarAlexPoe · Accepted Answer · 2020-04-29T18:30:44.217

-1

Try inline styling

 <div style="text-align: center; width: 100%;"><button></button></div>

edited Apr 29 '20 at 18:30

answered Apr 29 '20 at 14:29

EdgarAlexPoe

410
3
11

Thank you but I'm still having trouble. I looked at your jsfiddle and I can see HTML code and CSS code are side by side. How do I inject that css code into the HTML? I placed the div class around the entire code like you did but the css code just keeps appearing as plain text. – Nathan Garrett Apr 29 '20 at 15:23
Create a separate css file, like style.css. Add that file into your root directory where your html file is. In the add ``. This will add your css to the html file. – EdgarAlexPoe Apr 29 '20 at 15:29
I'm using a free landing page builder called Jimdo. I don'l believe I have access to the root directory. Is there a way around that then? I can give you the login if you wanna take a look. I am just adding this button code to an html widget on the landing page builder. – Nathan Garrett Apr 29 '20 at 15:44
In that case just add your style above your html `` – EdgarAlexPoe Apr 29 '20 at 15:54
https://jsfiddle.net/nate15g/bnjkf4w3/#&togetherjs=azjTjJOzh0 – Nathan Garrett Apr 29 '20 at 16:14
My js fiddle is above. When I run it there, it produces what looks like your output but on my landing page, it still is left aligned. – Nathan Garrett Apr 29 '20 at 16:15
What is the url? – EdgarAlexPoe Apr 29 '20 at 16:15
https://accountinguniversity.jimdofree.com/ – Nathan Garrett Apr 29 '20 at 16:16
Try adding the style inline `
` – EdgarAlexPoe Apr 29 '20 at 16:29
That did it! Thank you so much for taking the time to help me. – Nathan Garrett Apr 29 '20 at 18:11
Great. I will edit my answer above. Please mark this as answered – EdgarAlexPoe Apr 29 '20 at 18:30

score -1 · Answer 2 · answered Apr 29 '20 at 14:35

-1

You can easily use flex to put the elements in the center, both in width and height:

<div class="center">
    // Your Button
</div>

.center{
    display: flex;
    width: 100%;
    justify-content: center;
}

answered Apr 29 '20 at 14:35

Mohsen007

285
3
13

Thank you but that did not work. I placed the div around the button but the code starting with .center just displays as text. Any suggestions? – Nathan Garrett Apr 29 '20 at 15:06

Center Align a Stripe Payment Button

2 Answers2