stripe elements examples

Example 1: Sample of stripe billing html css code

let Stripe = () => {}
let stripeClient = Stripe(key);
let stripeElements = stripeClient.elements()

let stripeCardElement = stripeElements.create('card', {
  style: {
    base: {
      fontSize: '16px',
      fontFamily: 'Lato, "Helvetica Neue", Arial, Helvetica, sans-serif',
      color: 'rgba(0,0,0,.87)'
    },
    invalid: {
      color: '#9F3A38',
      iconColor: '#9F3A38'
    },
    focus: {
      color: 'rgba(0,0,0,.95)'
    }
  }
});

Example 2: stripe stripe js

import {loadStripe} from '@stripe/stripe-js'; const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

Example 3: stripe elements

style: {
	padding: '2rem'
  	// ....
}

// create card number input in div#card-number
let cardNumber = elements.create('cardNumber', {
      'placeholder': '1234 1234 1234 1234',
      'style': style
  });
  cardNumber.mount('#card-number');

// create cvc input in div#card-cvc
  let cardCvc = elements.create('cardCvc', {
      'placeholder': 'CVC',
      'style': style
  });
  cardCvc.mount('#card-cvc');

  // create card expiry input in div#card-expiry
  let cardExpiry = elements.create('cardExpiry', {
      'placeholder': 'MM / AA',
      'style': style
  });
  cardExpiry.mount('#card-expiry')