Stripe

Stripe is the best and the new standard in online payments.

Quickstart

To get started, and best leverage Stripe’s advanced fraud functionality, include this script on every page on your site, not just the checkout page.

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

Create an instance of Elements. locale options: ar, da, de, en, es, fi, fr, he, it, ja, no, nl, sv, zh.

var stripe = Stripe('pk_test_jbSWiQybmVyZo1U1aEjXhSNn');   
var elements = stripe.elements({'locale':'us'});

Create card component

Create pre-built UI components to collect sensitive card information with Elements. Before taking your integration live, use the test card numbers and tokens.

It’s very important add the class .stripe-form in your <form> element

<form action="/charge" id="payment-form" method="post" class="stripe-form"> 
    <label for="card-element">Credit or debit card</label>
    <div id="card-element"></div>
    <div id="card-errors" role="alert"></div> 
    <button class="btn btn-success mt-2">Get Started</button>  
</form>

And customize appearance using an object with CSS properties.

// Custom style options
var styleUmbler = {
    base: {
        color: '#4e5159', 
        lineHeight: '20px', 
        fontFamily: 'Gordita, -apple-system, Segoe UI, sans-serif', 
        fontSize: '16px', 
        '::placeholder': { color: '#b1b6c7' }
    }
};
// Creating card element
var cardElement = elements.create('card', {
    style: styleUmbler, 
    hidePostalCode: false, 
    value: {postalCode: '94130'}
});
cardElement.mount('#card-element');

Separate elements

<form action="/charge" id="payment-form-apart" method="post" class="stripe-form">         
    <label for="card-number-element">Card number</label>        				
    <div id="card-number-element" class="mb-2"></div>  
    
    <label for="card-cvc-element">CVC Code</label>          					
    <div id="card-cvc-element" class="mb-2"></div> 

    <label for="card-expiry-element">Expiration date</label>         					
    <div id="card-expiry-element"></div>  
    
    <div id="card-errors-apart" role="alert"></div>	
</form>

// Creating separate elements
var cardNumberElement = elementsApart.create('cardNumber', {
    style: styleUmbler,
    iconStyle: 'solid',
    placeholder: 'Ex: 0000 0000 0000 0000'
});
cardNumberElement.mount('#card-number-element');

var cardCvcElement = elementsApart.create('cardCvc', {
    style: styleUmbler, 
});
cardCvcElement.mount('#card-cvc-element');
...