class Element {
  mount(el) {
    if (typeof el === "string") {
      el = document.querySelector(el);
    }

    el.innerHTML = `
      <input id="stripe-cardnumber" placeholder="cardnumber" size="16" type="text">
      <input placeholder="exp-date" size="6" type="text">
      <input placeholder="cvc" size="3" type="text">
    `;
  }
}

window.Stripe = () => {
  const fetchLastFour = () => {
    return document.getElementById("stripe-cardnumber").value.substr(-4, 4);
  };

  return {
    elements: () => {
      return {
        create: (type, options) => new Element()
      };
    },

    createToken: card => {
      return new Promise(resolve => {
        resolve({ token: { id: "tok_123", card: { last4: fetchLastFour() } } });
      });
    }
  };
};

@@ -159,16 +159,34 @@
 dnumber%22
+ name=%22cardnumber%22
  placeho
@@ -191,20 +191,21 @@
 holder=%22
-c
+C
 ard
+ 
 number%22 
@@ -231,32 +231,48 @@
 t%22%3E%0A      %3Cinput
+ name=%22exp-date%22
  placeholder=%22ex
@@ -269,24 +269,23 @@
 holder=%22
-exp-date
+MM / YY
 %22 size=%22
@@ -312,16 +312,27 @@
   %3Cinput
+ name=%22cvc%22
  placeho
@@ -337,19 +337,19 @@
 holder=%22
-cvc
+CVC
 %22 size=%22

Update form elements to more accurately reflect actual Stripe form