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

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

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

Dynamically assigning column values based on object properties

`The height attribute of the textarea element is not being accurately adjusted`

Ensure that the inner div has a height of 100%

Transferring information from template to associated component

Setting limits to disable or remove specific times from the time picker input box in Angular

When scrolling down, the popup window shifts its position

Learn how to customize button styles in ExtJS with the pressedCls configuration option

What is the best way to retrieve data from a database and display it in a select dropdown list

What can be done to stop a header from sticking to a table and displaying horizontally scrolling content along the border?

Manipulate Attributes in Javascript

Tips for embedding a file within a text box in HTML and enabling users to make direct edits

Identifying CSS on iPhone and iPad: A Guide

What is the most effective way to utilize bootstrap classes and their associated functions exclusively for mobile devices by using media queries?

Revamped Web Presentation: The Dynamic Blend

Material UI Grid Items not stretching to fill the entire available width

Customizing the appearance of the 'Submit' button compared to the <a href=""></a> button using CSS

Using multiple conditions in SetEnvIf

The "Boostrap Confirmation" plugin in JQuery fails to appear upon the second click

Elements of <nav> within a <footer> section

React, facing the challenge of preserving stored data in localStorage while accounting for the impact of useEffect upon