Customising stripe elements javascript generated forms

Question

According to the docs and code i have looked at, this is how forms are created to add card or accept cards

  var style = {
    base: {
      fontSize: "16px",
      color: "#32325d",
      fontFamily:
        "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif",
      fontSmoothing: "antialiased",
      "::placeholder": {
        color: "rgba(0,0,0,0.4)"
      }
    }
  };
  var card = elements.create("card", { style: style });

  card.mount("#card-element");

this is according to the docs https://stripe.com/docs/stripe-js and the code example given https://github.com/stripe-samples/saving-card-without-payment/blob/master/client/script.js

How can i format the new forms so that i have the email,card holder name, card number,expiration and cvv on a different line?

I am using twitter bootstrap. Also how can i leave out the postal code part?

Answer 1

I just recently figured this out for a project I am working on and it was more challenging than I was expecting. The example below is creating a payment method for a metered billing scenario. The hardest thing for me to comprehend during the learning process was in the createPaymentMethod you will notice that it is only passed the cardNumber element and then the stripe library figures out the other elements automatically.

HTML:

<div class="row">
        <div class="col-md-6 mb-3">
            <label for="cc-name">Name on card</label>
            <input type="text" class="form-control" id="cc-name" placeholder="" required>
            <small class="text-muted">Full name as displayed on card</small>
            <div class="invalid-feedback">
                Name on card is required
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-3">
            <div id="card-number" style="border:2px solid gray;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-3">
            <div id="card-exp" style="border:2px solid gray;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-3">
            <div id="card-cvc" style="border:2px solid gray;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-3">
            <button id="submit-button" type="button">

                <div class="spinner hidden" id="spinner"></div>

                <span id="button-text">Pay</span>

            </button>
        </div>
    </div>

Javascript:

$(document).ready(function () {

    // Create a Stripe client
    var stripe = Stripe('YOUR KEY');

    // Create an instance of Elements
    var elements = stripe.elements({
        locale: 'auto'
    });
    let displayError = document.getElementById('card-error');
    var style = {
        base: {
            color: "#32325d",
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: "antialiased",
            fontSize: "16px",
            "::placeholder": {
                color: "#aab7c4"
            }
        },
        invalid: {
            color: "#fa755a",
            iconColor: "#fa755a"
        }
    };

    var cardNumber = elements.create("cardNumber", { style: style });
    cardNumber.mount("#card-number");

    var cardExp = elements.create("cardExpiry", { style: style });
    cardExp.mount("#card-exp");

    var cardCvc = elements.create("cardCvc", { style: style });
    cardCvc.mount("#card-cvc");

    cardNumber.on('change', showCardError);
    cardExp.on('change', showCardError);
    cardCvc.on('change', showCardError);

    function showCardError(event) {
        
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    }

    $("#submit-button").on("click", function () {
        createPaymentMethod(cardNumber, 'CUSTOMER ID', 'PRODUCT ID');
    });

    function createPaymentMethod(cardElement, customerId, priceId) {
        return stripe
            .createPaymentMethod({
                type: 'card',
                card: cardElement,
                billing_details: {
                    name: $('#cc-name').val()
                }
            })
            .then((result) => {
                if (result.error) {
                    displayError.textContent = result.error;
                } else {
                    console.log('SUCCESS');
                    console.log(result);
                }
            });
    }

});