SEPA IBAN 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" required>
  </div>

  <div class="form-row">
    <label for="iban-element">
      IBAN
    </label>
    <div style='display: flex;'>
      <div id="iban-element">
        <!-- a Stripe Element will be inserted here. -->
      </div>
      <div id="iban-bank"></div>
    </div>

    <!-- Used to display Element errors -->
    <div id="iban-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 IBANs:
  </p>
  <ul>
    <li>DE89 3704 0044 0532 0130 00</li>
    <li>AT92 3501 2000 0101 2343</li>
    <li>NL91 ABNA 0417 1643 00</li>
  </ul>
  <div>

CSS

* {
  box-sizing: border-box;
  font-family: -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;
}

#iban-bank {
  margin-left: 8px;
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 32px;
  color: #999;
}

.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: "-apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif",
    fontSize: '16px',
    color: "#32325d",
    '::placeholder': {
    	color: '#bbbbbb',
    }
  },
};

// If you know the country of the customer, you can optionally pass it to
// the Element as placeholderCountry. The example IBAN that is being used
// as placeholer will reflect the IBAN format of that country.
const options = {
	supportedCountries: ['SEPA'],
  placeholderCountry: 'DE',
  style,
}

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

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


iban.on('change', ({error, bankName}) => {
  const displayError = document.getElementById('iban-errors');
  const displayBank = document.getElementById('iban-bank');
  
  if (error) {
    displayError.textContent = error.message;
  } else {
    displayError.textContent = '';
  }
  
  if (bankName) {
  	displayBank.textContent = bankName;
  } else {
  	displayBank.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: 'sepa_debit',
    currency: 'eur',
    owner: {
      name: document.querySelector('input[name="name"]').value,
    },
  };

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

  if (error) {
    // Inform the customer that there was an error
    const errorElement =...