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

<form action="/charge" method="post" id="payment-form">
  <div class="form-row inline">
    <div class="col">
      <label for="name">
        Name
      </label>
      <input id="name" name="name" placeholder="Jenny Rosen" required>
    </div>
    <div class="col">
      <label for="email">
        Email Address
      </label>
      <input id="email" name="email" type="email" placeholder="jenny.rosen@example.com" required>
    </div>
  </div>

  <div class="form-row">
    <label for="iban-element">
      IBAN
    </label>
    <div id="iban-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>
  <div id="bank-name"></div>

  <button>Submit Payment</button>

/**
* The CSS shown here will not be introduced in the Quickstart guide, but
* shows how you can use CSS to style your Element's container.
*/
input,
.StripeElement {
  height: 40px;
  padding: 10px 12px;

  color: #32325d;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 4px;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

input:focus,
.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;

// Create a Stripe client.
// Note: this merchant has been set up for demo purposes.
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    },
    ':-webkit-autofill': {
      color: '#32325d',
    },
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a',
    ':-webkit-autofill': {
      color: '#fa755a',
    },
  }
};

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

const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
var style = {
  base: {
    // Add your base input styles here. For example:
    fontSize: '16px',
    color: "#32325d",
  }
};

var options = {
  style: style,
  supportedCountries: ['SEPA'],
  // 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 placeholder reflects the IBAN format of that country.
  placeholderCountry: 'DE',
}

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

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

// Custom styling can be passed to options when creating an Element.
const style = {
  base: {
    // Add your base input styles here. For example:
    fontSize: '16px',
    color: "#32325d",
  },
};

const options = {
  style,
  supportedCountries: ['SEPA'],
  // 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.
  placeholderCountry: 'DE',
}

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

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

iban.on('change', function(event) {
  var displayError = document.getElementById('error-message');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

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

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

form.addEventListener('submit', function(event) {
  event.preventDefault();

  var sourceData = {
    type: 'sepa_debit',
    currency: 'eur',
    owner: {
      name: document.querySelector('input[name="name"]').value,
      email: document.querySelector('input[name="email"]').value,
    },
    mandate: {
      // Automatically send a mandate notification email to your customer
      // once the source is charged.
      notification_method: 'email',
    },
  };

  // Call `stripe.createSource` with the IBAN Element and additional options.
  stripe.createSource(iban, sourceData).then(function(result) {
    if (result.error) {
      // Inform the customer that there was an error.
      var errorElement = document.getElementById('error-message');
      errorElement.textContent = result.error.message;
    } else {
      // Send the Source to your server.
      stripeSourceHandler(result.source);
    }
  });
});

// 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,
      email: document.querySelector('input[name="email"]').value,
    },
    mandate: {
      // Automatically send a mandate notification email to your customer
      // once the source is charged.
      notification_method: 'email',
    },
  };

  // 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 = document.getElementById('error-message');
    errorElement.textContent = error.message;
  } else {
    // Send the Source to your server.
    stripeSourceHandler(source);
  }
});

function stripeSourceHandler(source) {
  // Insert the Source ID into the form so it gets submitted to the server.
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeSource');
  hiddenInput.setAttribute('value', source.id);
  form.appendChild(hiddenInput);

  // Submit the form.
  form.submit();
}

const stripeSourceHandler = (source) => {
  // Insert the Source ID into the form so it gets submitted to the server.
  const form = document.getElementById('payment-form');
  const hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeSource');
  hiddenInput.setAttribute('value', source.id);
  form.appendChild(hiddenInput);

  // Submit the form.
  form.submit();
}