How to customize credit card form in Stripe?

Question

I am configuring the payment gateway using Stripe, I have a basic structure you can see that you can add styles in the javascript code but not something that structures the HTML form content of the following code:

$(document).ready(function() {
var stripe = Stripe('pk_test_lf3erqZAzfBDiiNp1wfFkxgv');
var elements = stripe.elements();

var style = {
  base: {
    color: '#303238',
    fontSize: '16px',
    fontFamily: '"Open Sans", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
  },
  invalid: {
    color: '#e5424d',
    ':focus': {
      color: '#303238',
    },
  },
};
var card = elements.create('card', {style: style});
card.mount('#card-element');

});

<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<form action="charge.php" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- a Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display form errors -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

Note: StackOverflow does not run does not show the results, you can see the results of the code in https://jsfiddle.net/k16mk5z1/

Its result is the following:

How can I customize the design of the form as follows:

There is a documentation giving references but I can not understand them well.

Notes:

As of version 3 of stripe, this new version generates the content of the card form by means of its javascript plugin

previously in version 2 there was an HTML structure of the form.

Ywain · Accepted Answer · 2017-11-03T14:34:57.360

51

You can use separate fields with Elements, e.g.: http://jsfiddle.net/ywain/whj357u9/

If you want to also collect the cardholder's name, you'll need to use a regular <input> field, and provide its contents in the second parameter when calling createToken(): http://jsfiddle.net/ywain/eckhnz19/

EDIT: If you want the separate card field to show the card brand icon, you'll need to reimplement that feature yourself. It is relatively easy to do so using the change event. Here's an example: http://jsfiddle.net/ywain/L96q8uj5/

edited Nov 03 '17 at 14:34

answered Nov 03 '17 at 14:09

Ywain

16,854
4
51
67

the first example I like but that does not activate the image of what credit card is, how do you make that function activate in the first example. – Nov 03 '17 at 14:13
@StaOne I added another example showing how to display a card brand icon – Ywain Nov 03 '17 at 14:35
That example is perfect, you know a lot about stripe, I have some doubts about stripe, in my future questions I hope you answer my questions :) regards! Good day – Nov 03 '17 at 14:46
One doubt, I note that you use a library of styles add-ons for the credit card icons, but stripe in its simple example does not use libraries of separate styles and if you use them, it links them directly to your js plugin. How can I avoid using that library and be a stripe who calls them directly from their plugin? – Nov 03 '17 at 17:18
Elements' built-in card brand icon display can only be used with the "all-in-one" widget. If you use separate fields, you need to use your own assets. In the example I linked above, I used [PaymentFont](https://paymentfont.com/) but you can of course use anything else. – Ywain Nov 03 '17 at 17:31
Friend if you have time it will be that you can look at these two questions :) [a question](https://stackoverflow.com/questions/47115728/how-to-solve-fatal-error-when-not-receiving-stripe-data) &&& [two question](https://stackoverflow.com/questions/47111638/how-add-name-on-card-in-stripe) – Nov 04 '17 at 23:28
You saved my time...Thanks a ton @Ywain What if I want credit card number in four different inputs? – anil Feb 11 '20 at 18:43
@Ywain Please find the Image for a reference https://i.stack.imgur.com/6JKjh.jpg – anil Feb 11 '20 at 18:53
@anil Elements doesn't support this, so you can't do this. Elements will automatically format the card number as it is typed to group digits though. – Ywain Feb 11 '20 at 21:32
@Ywain, the first example is what I want, but only cardNumberElement is needed to create token so CVC and Expiry element are useless? – Tiktac May 14 '21 at 09:57
@Ywain is it possible to read these card elements value from user input? For example to store the user card information in DB – Tiktac May 14 '21 at 10:00
@Tiktac storing the card info is PCI compliant, you can store the expiration date, the brand, the last 4 digits and the holder name. The advantage of using Stripe is you don't have to deal with the PCI regulations. Once you register a card with Stripe you can access the data I mentioned above. – Peter Toth Jan 08 '22 at 01:42

laravel sagmetic · Answer 2 · 2023-05-10T08:18:44.880

This is my HTML code which I use Instead of <div id="card-element"></div>

 <div class="input-group d-flex">
                  <label class="form-label w-50">Card number</label>
                  <div id="cc-number"></div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="input-group">
                      <label class="form-label">MM/AA</label>
                      <div id="cc-expiry"></div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="input-group">
                      <label class="form-label">CVV</label>
                      <div id="cc-cvc"></div>
                    </div>
                  </div>
                </div>

In this way, you can customize your card Design to add your style and classes

var elements = stripe.elements();
var style = {
  base: {
    border: '1px solid #E8E8E8',
  },
};

var cardNumber = elements.create('cardNumber', {
  style: style,
  classes: {
    base: 'form-control w-full'
  }
});

var cardExpiry = elements.create('cardExpiry', {
  style: style,
  classes: {
    base: 'form-control'
  }
});

var cardCvc = elements.create('cardCvc', {
  style: style,
  classes: {
    base: 'form-control'
  }
});

cardNumber.mount('#cc-number');
cardExpiry.mount('#cc-expiry');
cardCvc.mount('#cc-cvc');

At last, Use this way to create card_token and payament_id

*please change alert method as your design

stripe.createPaymentMethod({
        type: 'card',
        card: cardNumber,
        billing_details: {
          name: $('#fusername').val() + ' ' + $('#lusername').val(),
        },
      }).then(function (result) {
        if (result.error) {
          // Display error.message in your UI
          btn.removeClass("disabled").removeAttr('disabled').html('Crear cuenta');
          Swal.fire({
            type: 'error',
            title: `oops...`,
            text: result.error.message
          })
        } else {
          stripe.createToken(cardNumber).then(function (res) {
            if (res.error) {
              btn.removeClass("disabled").removeAttr('disabled').html('Crear cuenta');
              Swal.fire({
                type: 'error',
                title: `oops...`,
                text: result.error.message
              })
            } else {
              $('#payment_method_id').val(result.paymentMethod.id);
              $('#card_token').val(res.token.id);
              $('#signup-form').submit();
              // console.log(res.token.id);
              // console.log(result.paymentMethod.id);
            }
          });
        }
      });

You can also check here :https://jsfiddle.net/laravelsagmetic/jksacLfg/28/

How to customize credit card form in Stripe?

2 Answers2

*please change alert method as your design