Can't CSS center a Stripe element

Question

I'm creating a payment form using Stripe, and I'm having trouble displaying the form elements on the center of the page.

Here is my simple form:

<div class="panel">
    <form action="payment.php" method="POST" id="paymentFrm">
        <div class="panel-body">
      
            <!-- Payment form -->
            <div class="form-group">
                <label>CARD NUMBER</label>
                <div id="card_number" class="c"></div>
            </div>

            <div class="form-group">
                <label>EXPIRY DATE</label>
                <div id="card_expiry" class="field"></div>
            </div>

            <div class="form-group">
                <label>CVC CODE</label>
                <div id="card_cvc" class="field"></div>
            </div>


            <button type="submit" class="btn btn-success" id="payBtn">Submit Payment</button>
        </div>
        <div id="paymentResponse"></div>
    </form>

And this is the JS, which I use to create Stripe elements:

<script src="https://js.stripe.com/v3/"></script>

<script>
// Create an instance of the Stripe object
// Set your publishable API key
var stripe = Stripe('<?php 
  echo 'pk_test_@'; ?>');

// Create an instance of elements
var elements = stripe.elements();

var style = {
    base: {
        fontWeight: 400,
        fontFamily: 'futurabold',
        fontSize: '16px',
        lineHeight: '1.4',
        display: 'flex',
        color: '#555',
        backgroundColor: '#fff',
        '::placeholder': {
            color: '#888',
            fontFamily: 'futurabold',
        },
    },
    invalid: {
        color: '#eb1c26',
    }
};

var cardElement = elements.create('cardNumber', {
    style: style
});
cardElement.mount('#card_number');

var exp = elements.create('cardExpiry', {
    'style': style
});
exp.mount('#card_expiry');

var cvc = elements.create('cardCvc', {
    'style': style
});
cvc.mount('#card_cvc');

// Callback to handle the response from stripe
function stripeTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);
  
    // Submit the form
    form.submit();
}

I tried changing 'text-align' CSS property of form-group class, but that led to text elements being displayed at a center, and the Stripe input elements stayed on the left side:

<div class="form-group" style="text-align: center;"> 

Changing JS style variable also didn't help:

var style = {
    base: {
        text-align: center}}

How can I style Stripe elements, so that they will be displayed on the center of the page?

Answer 1

The form can be styled using.StripeElement CSS selector:

.StripeElement {
background-color: white;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}

.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
border-color: #fa755a;
}

.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}

Answer 2

It depends how your page is laid out. You haven't provided much information on what other styles are being used on the page neither we have a working example.

I believe you might be looking for margin: 0 auto; This is used to center align block elements with a defined width or a max-width .