Card Element

by Atty Eleti

HTML

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

<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="name">
      Name
    </label>
    <input name="name" placeholder="Jane Doe">
  </div>

  <div class="form-row">
    <label for="card-element">
      Card
    </label>
    <div>
      <div id="card-element">
        <!-- a Stripe Element will be inserted here. -->
      </div>
    </div>

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

  <button type="submit">Submit</button>
  <div id="form-errors" class="error" role="alert"></div>
  <div id="form-success" class="success" role="alert"></div>
</form>

<div class="help">
  <p>
    Try the following cards:
  </p>
  <ul>
    <li>US: 4242 4242 4242 4242</li>
    <li>UK: 4000 0082 6000 0000	</li>
    <li>CA: 4000 0012 4000 0000</li>
  </ul>
<div>

CSS

* {
  box-sizing: border-box;
  font-family: monospace, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
  color: #333;
  font-size: 16px;
}

.form-row {
  margin-top: 12px;
}

label {
  display: block;
  margin-bottom: 4px;
}

input,
.StripeElement {
  padding: 0.5em;
  width: 360px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input::placeholder {
  color: #bbb;
}

input:focus, .StripeElement--focus {
   border: 1px solid #43458b;
   outline: 0;
}

.error,
.success {
  margin-top: 8px;
  font-size: 14px;
}

.error {
  color: #c23d4b;
}

.success {
  color: #159570;
}

button {
  height: 36px;
  width: 360px;
  margin-top: 16px;
  color: white;
  background-color: #6772e5;
  border: 0;
  outline: 0;
  border-radius: 4px;
  cursor: pointer;
}

button:hover, button:focus {
  background-color: #43458b;
}

button:active {
  background-color: #32325d;
}

.help {
  margin-top: 24px;
  border-top: 1px solid #ccc;
}

.help p,
.help li {
  color: #555;
}

Babel + JSX

var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();


// Custom styling can be passed to options when creating an Element.
const style = {
  base: {
    // Add your base input styles here. For example:
    fontFamily: "monospace, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif",
    fontSize: '16px',
    color: "#32325d",
    '::placeholder': {
    	color: '#bbbbbb',
    }
  },
};

const options = {
  style,
}

// Create an instance of the card Element
const card = elements.create('card', options);

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');


card.on('change', ({error}) => {
  const displayError = document.getElementById('card-errors');
  
  if (error) {
    displayError.textContent = error.message;
  } else {
    displayError.textContent = '';
  }
});


// Create a source or display an error when the form is submitted.
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const sourceData = {
    type: 'card',
    owner: {
      name: document.querySelector('input[name="name"]').value,
    },
  };

  // Call `stripe.createSource` with the card Element and additional options
  const {source, error} = await stripe.createSource(card, sourceData);

  if (error) {
    // Inform the customer that there was an error
    const errorElement = document.getElementById('form-errors');
    errorElement.textContent = error.message;
  } else {
    const successElement = document.getElementById('form-success');
  successElement.textContent = `Success! Your 'card' source is ${source.id}.`;
  }
});