Chic and perfectly aligned stripe button design

Question

Chic and perfectly aligned stripe button design

I need assistance with centering and styling the Stripe checkout button labeled "update card." Additionally, I want to adjust the appearance of the card number input field to be normal but readonly. How can I achieve this without relying on Bootstrap's disabled look?

<div class="page-header">
  <h3>Payment Details</h3>
</div>
<form role="form" id="cardForm" action="/user/billing" method="POST" class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">Card Number</label>
    <div class="col-sm-4">
      <input id="card-num" type="text" class="form-control" placeholder="XXXX XXXX XXXX {{user.stripe.last4}}" name="card" readonly>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-6">
      <div id="cardFormError" class="alert alert-danger hidden" role="alert">
        <p></p>
      </div>
    </div>
  </div>

  </div>
</form>

<form action="/user/billing" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_HwlcQ0e8VwlFkQJu46vynuPT"
    data-amount=""
    data-name="Asset Management"
    data-description="Update your card details"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto"
    data-currency="usd"
    data-label="Update Card"
    data-zip-code="true"
    data-allow-remember-me="false"
    data-email="{{user.email}}">
  </script>
</form>

html css twitter-bootstrap stripe-payments

Answer 1

Answer №1

https://i.sstatic.net/lAqpa.png To achieve the desired effect, you can use text-align: center; for the body,

body {
  text-align: center;
}

Also, add

background-color: white !important;

to .form-control,

.form-control {
  background-color: white !important;
}

Finally, apply margin: 0 auto; to the divs.

div {
  margin: 0 auto;
}

You should make sure to remove the extra closing div tag at the end of the first form.

View the CSS code snippet below:

.form-control {
  background-color: white !important;
}
body {
  text-align: center;
}
div {
  margin: 0 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
  <h3>Payment Details</h3>
</div>
<form role="form" id="cardForm" action="/user/billing" method="POST" class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">Card Number</label>
    <div class="col-sm-4">
      <input id="card-num" type="text" class="form-control" placeholder="XXXX XXXX XXXX {{user.stripe.last4}}" name="card" readonly>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-6">
      <div id="cardFormError" class="alert alert-danger hidden" role="alert">
        <p></p>
      </div>
    </div>
  </div>
</form>

<form action="/user/billing" method="POST">
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_HwlcQ0e8VwlFkQJu46vynuPT" data-amount="" data-name="Asset Management" data-description="Update your card details" data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto" data-currency="usd" data-label="Update Card" data-zip-code="true" data-allow-remember-me="false" data-email="{{user.email}}">

  </script>
</form>

(Please note that the stripe overlay may not show in this snippet, but it should work correctly in JSFiddle)

For a live example on JSFiddle, visit: https://jsfiddle.net/sLueh77q/

Answer 2

https://i.sstatic.net/lAqpa.png To achieve the desired effect, you can use text-align: center; for the body,

body {
  text-align: center;
}

Also, add

background-color: white !important;

to .form-control,

.form-control {
  background-color: white !important;
}

Finally, apply margin: 0 auto; to the divs.

div {
  margin: 0 auto;
}

You should make sure to remove the extra closing div tag at the end of the first form.

View the CSS code snippet below:

.form-control {
  background-color: white !important;
}
body {
  text-align: center;
}
div {
  margin: 0 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
  <h3>Payment Details</h3>
</div>
<form role="form" id="cardForm" action="/user/billing" method="POST" class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">Card Number</label>
    <div class="col-sm-4">
      <input id="card-num" type="text" class="form-control" placeholder="XXXX XXXX XXXX {{user.stripe.last4}}" name="card" readonly>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-6">
      <div id="cardFormError" class="alert alert-danger hidden" role="alert">
        <p></p>
      </div>
    </div>
  </div>
</form>

<form action="/user/billing" method="POST">
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_HwlcQ0e8VwlFkQJu46vynuPT" data-amount="" data-name="Asset Management" data-description="Update your card details" data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto" data-currency="usd" data-label="Update Card" data-zip-code="true" data-allow-remember-me="false" data-email="{{user.email}}">

  </script>
</form>

(Please note that the stripe overlay may not show in this snippet, but it should work correctly in JSFiddle)

For a live example on JSFiddle, visit: https://jsfiddle.net/sLueh77q/

Answer 3

Answer №2

Do you want it to look like this? Make sure to include these lines:

<style>
  .form-control[readonly] {
    background-color: #fff;
  }
  .text-center {
    text-align: center;
  }
</style>

Also, don't forget to add class="text-center" at

<form action="/user/billing" method="POST">

. Your code should now be:

<form action="/user/billing" class="text-center" method="POST">

.

Answer 4

Do you want it to look like this? Make sure to include these lines:

<style>
  .form-control[readonly] {
    background-color: #fff;
  }
  .text-center {
    text-align: center;
  }
</style>

Also, don't forget to add class="text-center" at

<form action="/user/billing" method="POST">

. Your code should now be:

<form action="/user/billing" class="text-center" method="POST">

.

Chic and perfectly aligned stripe button design

Answer №1

Answer №2

Similar questions

Focusing on a specific div element

What is the best way to retrieve an image URL from a CSS file located in a public folder within a

What is the most efficient way to remove all typed characters from fields when clicking on a different radio button? The majority of my fields share the same ngModel on a separate page

What is the best method for flipping the sequence of elements in media queries?

Using a MySQL statement within a conditional statement

What is the best way to use jQuery to retrieve information from one child element in an XML API in order to locate another child

Arrange the child elements of a div to be displayed on top of one another in an HTML document

Encountering an inexplicable "undefined" error in HTML after receiving an

Using a combination of jQuery and JavaScript to switch image tags between different classes

Discover the name of a color using its HEX code or RGB values

Is there a different method to position an element in the center of the webpage?

Tips for fixing the position without affecting the width

Interactive iframe material using $_POST variables

What is the best approach to dynamically bind a style property in Vue.js 3?

Is it possible to make an element draggable after it has been prep

Tips for organizing JSON data from a multiselect form

Tips for designing an Ionic app with a Pinterest-inspired layout

How can I retrieve the results of an SQLite call in HTML5 without passing them to a separate function?

Utilizing Next.js - Implementation of a unique useThemeMode hook to efficiently manage theme preferences stored in the browser's localStorage, seamlessly integrating with toggleTheme

How can I use Selenium in combination with Python to retrieve the visible text of a selected radio button or checkbox on a webpage?