@rebilly/framepay-vue 2.1.0 → 3.0.0

package/README.md

@@ -2,9 +2,11 @@
 
 > Vue components for FramePay.js
 
-Supported: Vue 2.4+
+Supported: 
+- framepay-vue < 3.0.0 supports Vue 2.4+
+- framepay-vue >= 3.0.0 supports Vue 3
 
-This is the repo for the official Vue.js wrapper for Rebilly's [FramePay](https://www.rebilly.com/docs/developer-docs/framepay/). This package provides a flexible set of methods and components to allow drop-in support of FramePay in any Vue 2.4+ project.
+This is the repo for the official Vue.js wrapper for Rebilly's [FramePay](https://www.rebilly.com/docs/dev-docs/framepay/). This package provides a flexible set of methods and components to allow drop-in support of FramePay in any Vue project.
 
 ## Table of Contents
 - [framepay-vue](#framepay-vue)
@@ -78,9 +80,9 @@ Add the plugin to Vue:
 // main.js
 import FramePay from '@rebilly/framepay-vue';
 
-Vue.use(FramePay);
+app.use(FramePay);
 ```
-`Vue.use()` also accepts an optional argument for initialization options. See [Initialization](#initialization) below.
+`app.use()` also accepts an optional argument for initialization options. See [Initialization](#initialization) below.
 
 ## Getting Started
 
@@ -100,7 +102,7 @@ const configuration = {
     publishableKey: 'pk_sandbox_1234567890',
     injectStyle: true,
 };
-Vue.use(FramePay, configuration);
+app.use(FramePay, configuration);
 ```
 
 See [Built in Styling](#built-in-styling) for more information about the `injectStyle` option.
@@ -117,11 +119,11 @@ Add the `publishableKey` on only the first component in the template.
 </rebilly-form> 
 ```
 
-*NOTE:* Do not include the `publishableKey` on a component if you have already passed it via the config object when calling `Vue.use(Framepay, config)`.
+*NOTE:* Do not include the `publishableKey` on a component if you have already passed it via the config object when calling `app.use(Framepay, config)`.
 
 #### Lazy loading Framepay files
 
-The Framepay script files will be loaded as soon as `Vue.use(Framepay)` is called. This does not necessarily need to be done when the app loads, and can instead be done inside the Vue component which actually uses Framepay. In the following example, the Framepay script will not be fetched until the `created()` hook is called. 
+The Framepay script files will be loaded as soon as `app.use(Framepay)` is called. This does not necessarily need to be done when the app loads, and can instead be done inside the Vue component which actually uses Framepay. In the following example, the Framepay script will not be fetched until the `created()` hook is called. 
 
 The script will only be loaded the first time `created()` is called, so you can safely call `created()` multiple times without worrying about duplicates.
 
@@ -139,7 +141,6 @@ The script will only be loaded the first time `created()` is called, so you can
         RebillyForm,
         RebillyCard,
     } from '@rebilly/framepay-vue';
-    import Vue from 'vue';
 
     export default {
         components: {
@@ -152,7 +153,7 @@ The script will only be loaded the first time `created()` is called, so you can
                 injectStyle: true,
                 // etc
             };
-            Vue.use(FramePay, config);
+            app.use(FramePay, config);
         },
     };
 </script>
@@ -379,7 +380,7 @@ const configuration = {
     publishableKey: 'pk_sandbox_1234567890',
     injectStyle: true,
 };
-Vue.use(FramePay, configuration);
+app.use(FramePay, configuration);
 ```
 
 **OR**

package/dist/framepay-vue.js

@@ -0,0 +1,357 @@
+import { openBlock as y, createElementBlock as p, createElementVNode as B, withModifiers as I, renderSlot as A, h as c, markRaw as s } from "vue";
+function h({ message: e = "Could not mount FramePay to element.", details: t = null } = {}) {
+  this.message = e, this.details = t, this.name = "FramePayMountError";
+}
+function E({ message: e = "FramePay could not be initialized.", details: t = null } = {}) {
+  this.message = e, this.details = t, this.name = "FramePayInitializeError";
+}
+function u({ message: e = "FramePay could not be loaded.", details: t = null } = {}) {
+  this.message = e, this.details = t, this.name = "FramePayLoadError";
+}
+const P = window.process?.env?.FRAMEPAY_SCRIPT_LINK || "https://framepay.rebilly.com/rebilly.js", Y = window.process?.env?.FRAMEPAY_STYLE_LINK || "https://framepay.rebilly.com/rebilly.css", T = () => new Promise((e, t) => {
+  const n = document.createElement("script");
+  n.src = P, n.id = "rebilly-framepay-js", n.onload = () => e(Rebilly), n.onerror = () => t(), document.querySelector("head").appendChild(n);
+}).catch((e) => {
+  throw new u({ details: e });
+});
+let _;
+const N = new Promise((e) => {
+  _ = e;
+}), $ = _, b = N.then(T);
+function C() {
+  if (document.querySelector("link#rebilly-framepay-css"))
+    return;
+  const e = document.createElement("link");
+  e.href = Y, e.id = "rebilly-framepay-css", e.type = "text/css", e.rel = "stylesheet", e.onerror = (t) => {
+    throw new u({ details: t });
+  }, document.querySelector("head").appendChild(e);
+}
+function a(e = {}) {
+  return b.then(
+    (t) => new Promise((n) => {
+      t.on("ready", () => {
+        n(t);
+      }), t.on("error", (r) => {
+        throw new u({ details: r });
+      });
+      try {
+        e.injectStyle && C(), !t.initialized && (e.publishableKey || e.jwt) && t.initialize(e);
+      } catch (r) {
+        throw new E({ details: r });
+      }
+    })
+  );
+}
+const g = "card", w = "cardCvv", x = "cardNumber", U = "cardExpiration", S = "accountType", M = "routingNumber", k = "accountNumber", O = "iban", F = "googlePay", D = "applePay", v = "paypal", i = {
+  REBILLY_CARD: g,
+  REBILLY_CARD_CVV: w,
+  REBILLY_CARD_NUMBER: x,
+  REBILLY_CARD_EXPIRATION: U,
+  REBILLY_BBAN_ACCOUNT_TYPE: S,
+  REBILLY_BBAN_ROUTING_NUMBER: M,
+  REBILLY_BBAN_ACCOUNT_NUMBER: k,
+  REBILLY_IBAN: O,
+  REBILLY_GOOGLE_PAY: F,
+  REBILLY_APPLE_PAY: D,
+  REBILLY_PAYPAL: v
+};
+function G(e, t) {
+  return b.then((n) => {
+    if (!n.initialized)
+      throw new E({
+        message: "Please initialize Rebilly before creating a token"
+      });
+    return n.createToken(e, t);
+  });
+}
+function l(e) {
+  return a(e).then((t) => {
+    t.update({ ...e });
+  });
+}
+const L = (e, t) => {
+  const n = e.__vccOpts || e;
+  for (const [r, m] of t)
+    n[r] = m;
+  return n;
+}, z = {
+  name: "rebilly-form",
+  emits: ["submit", "error"],
+  props: {
+    extraData: {},
+    configuration: {}
+  },
+  methods: {
+    handler(e) {
+      const t = e.target;
+      G(t, this.extraData).then((n) => {
+        this.$attrs.onSubmit ? this.$emit("submit", n, t) : t.submit();
+      }).catch((n) => {
+        this.$emit("error", n);
+      });
+    }
+  },
+  watch: {
+    configuration(e) {
+      e && l(e);
+    }
+  },
+  mounted() {
+    l(this.configuration);
+  }
+}, j = { id: "stop-wrapper" };
+function V(e, t, n, r, m, d) {
+  return y(), p("div", j, [
+    B("form", {
+      id: "rebilly-form",
+      onSubmit: t[0] || (t[0] = I((...R) => d.handler && d.handler(...R), ["stop", "prevent"]))
+    }, [
+      A(e.$slots, "default")
+    ], 32)
+  ]);
+}
+const J = /* @__PURE__ */ L(z, [["render", V]]), K = {
+  name: "rebilly-token"
+}, q = {
+  id: "rebilly-token",
+  "data-rebilly": "token",
+  type: "hidden"
+};
+function X(e, t, n, r, m, d) {
+  return y(), p("input", q);
+}
+const Q = /* @__PURE__ */ L(K, [["render", X]]), o = {
+  render() {
+    return c("div", {
+      id: this.mountId,
+      domProps: { id: this.mountId }
+    });
+  },
+  props: {
+    id: {
+      type: String
+    },
+    configuration: {}
+  },
+  data() {
+    return {
+      element: null,
+      mountId: this.id ? this.id : `${this.$options.name}-mount`
+    };
+  },
+  methods: {
+    mountElement(e) {
+      a(this.configuration).then((t) => {
+        try {
+          this.elementType.startsWith("card") ? this.element = s(t.card.mount(e, this.elementType)) : this.elementType === "iban" ? this.element = s(t.iban.mount(e)) : [
+            i.REBILLY_BBAN_ACCOUNT_TYPE,
+            i.REBILLY_BBAN_ACCOUNT_NUMBER,
+            i.REBILLY_BBAN_ROUTING_NUMBER
+          ].includes(this.elementType) && (this.element = s(t.bban.mount(e, this.elementType))), this.element.on("ready", () => this.$emit("ready")), this.element.on("change", (n) => this.$emit("change", n)), this.element.on("focus", () => this.$emit("focus")), this.element.on("blur", () => this.$emit("blur"));
+        } catch {
+          throw new h();
+        }
+      });
+    },
+    destroyElement() {
+      this.element && this.element.destroy();
+    }
+  },
+  created() {
+    this.mountElement(`#${this.mountId}`);
+  },
+  beforeDestroy() {
+    this.destroyElement();
+  },
+  beforeUnmount() {
+    this.destroyElement();
+  }
+}, W = {
+  render() {
+    return c("div", {
+      id: this.mountId,
+      domProps: { id: this.mountId }
+    });
+  },
+  props: {
+    id: {
+      type: String
+    },
+    configuration: {}
+  },
+  data() {
+    return {
+      element: null,
+      mountId: this.id ? this.id : `${this.$options.name}-mount`
+    };
+  },
+  methods: {
+    mountElement(e) {
+      a(this.configuration).then((t) => {
+        try {
+          this.element = s(t.googlePay.mount(e)), this.element.on("ready", () => this.$emit("ready")), this.element.on("change", (n) => this.$emit("change", n)), this.element.on("focus", () => this.$emit("focus")), this.element.on("blur", () => this.$emit("blur")), this.element.on("error", () => this.$emit("error")), t.on("token-ready", (n) => {
+            this.$emit("token-ready", n), this.$parent.$emit("token-ready", n);
+          });
+        } catch (n) {
+          throw new h({ details: n });
+        }
+      });
+    },
+    destroyElement() {
+      this.element && this.element.destroy();
+    }
+  },
+  watch: {
+    configuration(e) {
+      e && l(e);
+    }
+  },
+  created() {
+    this.mountElement(`#${this.mountId}`);
+  },
+  beforeDestroy() {
+    this.destroyElement();
+  },
+  beforeUnmount() {
+    this.destroyElement();
+  }
+}, f = {
+  render() {
+    return c("div", {
+      id: this.mountId,
+      domProps: { id: this.mountId }
+    });
+  },
+  props: {
+    id: {
+      type: String
+    },
+    configuration: {}
+  },
+  data() {
+    return {
+      element: null,
+      mountId: this.id ? this.id : `${this.$options.name}-mount`
+    };
+  },
+  methods: {
+    mountElement(e) {
+      a(this.configuration).then((t) => {
+        try {
+          let n = null;
+          this.elementType === i.REBILLY_APPLE_PAY ? n = t.applePay : this.elementType === i.REBILLY_PAYPAL && (n = t.paypal), this.element = s(n.mount(e)), t.on("token-ready", (r) => {
+            this.$emit("token-ready", r), this.$parent.$emit("token-ready", r);
+          });
+        } catch (n) {
+          throw new h({ details: n });
+        }
+      });
+    },
+    destroyElement() {
+      this.element && this.element.destroy();
+    }
+  },
+  watch: {
+    configuration(e) {
+      e && l(e);
+    }
+  },
+  created() {
+    this.mountElement(`#${this.mountId}`);
+  },
+  beforeDestroy() {
+    this.destroyElement();
+  },
+  beforeUnmount() {
+    this.destroyElement();
+  }
+}, Z = {
+  name: "rebilly-card",
+  data() {
+    return { elementType: i.REBILLY_CARD };
+  },
+  mixins: [o]
+}, ee = {
+  name: "rebilly-card-cvv",
+  data() {
+    return { elementType: i.REBILLY_CARD_CVV };
+  },
+  mixins: [o]
+}, te = {
+  name: "rebilly-card-expiration",
+  data() {
+    return { elementType: i.REBILLY_CARD_EXPIRATION };
+  },
+  mixins: [o]
+}, ne = {
+  name: "rebilly-card-number",
+  data() {
+    return { elementType: i.REBILLY_CARD_NUMBER };
+  },
+  mixins: [o]
+}, ie = {
+  name: "rebilly-bban-account-type",
+  data() {
+    return { elementType: i.REBILLY_BBAN_ACCOUNT_TYPE };
+  },
+  mixins: [o]
+}, re = {
+  name: "rebilly-bban-routing-number",
+  data() {
+    return { elementType: i.REBILLY_BBAN_ROUTING_NUMBER };
+  },
+  mixins: [o]
+}, oe = {
+  name: "rebilly-bban-account-number",
+  data() {
+    return { elementType: i.REBILLY_BBAN_ACCOUNT_NUMBER };
+  },
+  mixins: [o]
+}, se = {
+  name: "rebilly-iban",
+  data() {
+    return { elementType: i.REBILLY_IBAN };
+  },
+  mixins: [o]
+}, ae = {
+  name: "rebilly-google-pay",
+  data() {
+    return { elementType: i.REBILLY_GOOGLE_PAY };
+  },
+  mixins: [W]
+}, le = {
+  name: "rebilly-apple-pay",
+  data() {
+    return { elementType: i.REBILLY_APPLE_PAY };
+  },
+  mixins: [f]
+}, me = {
+  name: "rebilly-paypal",
+  data() {
+    return { elementType: i.REBILLY_PAYPAL };
+  },
+  mixins: [f]
+}, de = {
+  install(e, t = {}) {
+    $(), a(t);
+  }
+};
+export {
+  le as RebillyApplePay,
+  oe as RebillyBbanAccountNumber,
+  ie as RebillyBbanAccountType,
+  re as RebillyBbanRoutingNumber,
+  Z as RebillyCard,
+  ee as RebillyCardCvv,
+  te as RebillyCardExpiration,
+  ne as RebillyCardNumber,
+  i as RebillyFieldTypes,
+  J as RebillyForm,
+  ae as RebillyGooglePay,
+  se as RebillyIban,
+  me as RebillyPaypal,
+  Q as RebillyToken,
+  G as createToken,
+  de as default,
+  l as updateConfig
+};

package/dist/framepay-vue.umd.cjs

@@ -0,0 +1 @@
+(function(i,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(i=typeof globalThis<"u"?globalThis:i||self,r(i.FramePayVue={},i.Vue))})(this,function(i,r){"use strict";function d({message:e="Could not mount FramePay to element.",details:t=null}={}){this.message=e,this.details=t,this.name="FramePayMountError"}function u({message:e="FramePay could not be initialized.",details:t=null}={}){this.message=e,this.details=t,this.name="FramePayInitializeError"}function c({message:e="FramePay could not be loaded.",details:t=null}={}){this.message=e,this.details=t,this.name="FramePayLoadError"}const L=window.process?.env?.FRAMEPAY_SCRIPT_LINK||"https://framepay.rebilly.com/rebilly.js",B=window.process?.env?.FRAMEPAY_STYLE_LINK||"https://framepay.rebilly.com/rebilly.css",f=()=>new Promise((e,t)=>{const n=document.createElement("script");n.src=L,n.id="rebilly-framepay-js",n.onload=()=>e(Rebilly),n.onerror=()=>t(),document.querySelector("head").appendChild(n)}).catch(e=>{throw new c({details:e})});let _;const I=new Promise(e=>{_=e}),A=_,p=I.then(f);function P(){if(document.querySelector("link#rebilly-framepay-css"))return;const e=document.createElement("link");e.href=B,e.id="rebilly-framepay-css",e.type="text/css",e.rel="stylesheet",e.onerror=t=>{throw new c({details:t})},document.querySelector("head").appendChild(e)}function s(e={}){return p.then(t=>new Promise(n=>{t.on("ready",()=>{n(t)}),t.on("error",a=>{throw new c({details:a})});try{e.injectStyle&&P(),!t.initialized&&(e.publishableKey||e.jwt)&&t.initialize(e)}catch(a){throw new u({details:a})}}))}const o={REBILLY_CARD:"card",REBILLY_CARD_CVV:"cardCvv",REBILLY_CARD_NUMBER:"cardNumber",REBILLY_CARD_EXPIRATION:"cardExpiration",REBILLY_BBAN_ACCOUNT_TYPE:"accountType",REBILLY_BBAN_ROUTING_NUMBER:"routingNumber",REBILLY_BBAN_ACCOUNT_NUMBER:"accountNumber",REBILLY_IBAN:"iban",REBILLY_GOOGLE_PAY:"googlePay",REBILLY_APPLE_PAY:"applePay",REBILLY_PAYPAL:"paypal"};function E(e,t){return p.then(n=>{if(!n.initialized)throw new u({message:"Please initialize Rebilly before creating a token"});return n.createToken(e,t)})}function m(e){return s(e).then(t=>{t.update({...e})})}const R=(e,t)=>{const n=e.__vccOpts||e;for(const[a,y]of t)n[a]=y;return n},Y={name:"rebilly-form",emits:["submit","error"],props:{extraData:{},configuration:{}},methods:{handler(e){const t=e.target;E(t,this.extraData).then(n=>{this.$attrs.onSubmit?this.$emit("submit",n,t):t.submit()}).catch(n=>{this.$emit("error",n)})}},watch:{configuration(e){e&&m(e)}},mounted(){m(this.configuration)}},N={id:"stop-wrapper"};function T(e,t,n,a,y,h){return r.openBlock(),r.createElementBlock("div",N,[r.createElementVNode("form",{id:"rebilly-form",onSubmit:t[0]||(t[0]=r.withModifiers((...q)=>h.handler&&h.handler(...q),["stop","prevent"]))},[r.renderSlot(e.$slots,"default")],32)])}const C=R(Y,[["render",T]]),g={name:"rebilly-token"},$={id:"rebilly-token","data-rebilly":"token",type:"hidden"};function w(e,t,n,a,y,h){return r.openBlock(),r.createElementBlock("input",$)}const U=R(g,[["render",w]]),l={render(){return r.h("div",{id:this.mountId,domProps:{id:this.mountId}})},props:{id:{type:String},configuration:{}},data(){return{element:null,mountId:this.id?this.id:`${this.$options.name}-mount`}},methods:{mountElement(e){s(this.configuration).then(t=>{try{this.elementType.startsWith("card")?this.element=r.markRaw(t.card.mount(e,this.elementType)):this.elementType==="iban"?this.element=r.markRaw(t.iban.mount(e)):[o.REBILLY_BBAN_ACCOUNT_TYPE,o.REBILLY_BBAN_ACCOUNT_NUMBER,o.REBILLY_BBAN_ROUTING_NUMBER].includes(this.elementType)&&(this.element=r.markRaw(t.bban.mount(e,this.elementType))),this.element.on("ready",()=>this.$emit("ready")),this.element.on("change",n=>this.$emit("change",n)),this.element.on("focus",()=>this.$emit("focus")),this.element.on("blur",()=>this.$emit("blur"))}catch{throw new d}})},destroyElement(){this.element&&this.element.destroy()}},created(){this.mountElement(`#${this.mountId}`)},beforeDestroy(){this.destroyElement()},beforeUnmount(){this.destroyElement()}},k={render(){return r.h("div",{id:this.mountId,domProps:{id:this.mountId}})},props:{id:{type:String},configuration:{}},data(){return{element:null,mountId:this.id?this.id:`${this.$options.name}-mount`}},methods:{mountElement(e){s(this.configuration).then(t=>{try{this.element=r.markRaw(t.googlePay.mount(e)),this.element.on("ready",()=>this.$emit("ready")),this.element.on("change",n=>this.$emit("change",n)),this.element.on("focus",()=>this.$emit("focus")),this.element.on("blur",()=>this.$emit("blur")),this.element.on("error",()=>this.$emit("error")),t.on("token-ready",n=>{this.$emit("token-ready",n),this.$parent.$emit("token-ready",n)})}catch(n){throw new d({details:n})}})},destroyElement(){this.element&&this.element.destroy()}},watch:{configuration(e){e&&m(e)}},created(){this.mountElement(`#${this.mountId}`)},beforeDestroy(){this.destroyElement()},beforeUnmount(){this.destroyElement()}},b={render(){return r.h("div",{id:this.mountId,domProps:{id:this.mountId}})},props:{id:{type:String},configuration:{}},data(){return{element:null,mountId:this.id?this.id:`${this.$options.name}-mount`}},methods:{mountElement(e){s(this.configuration).then(t=>{try{let n=null;this.elementType===o.REBILLY_APPLE_PAY?n=t.applePay:this.elementType===o.REBILLY_PAYPAL&&(n=t.paypal),this.element=r.markRaw(n.mount(e)),t.on("token-ready",a=>{this.$emit("token-ready",a),this.$parent.$emit("token-ready",a)})}catch(n){throw new d({details:n})}})},destroyElement(){this.element&&this.element.destroy()}},watch:{configuration(e){e&&m(e)}},created(){this.mountElement(`#${this.mountId}`)},beforeDestroy(){this.destroyElement()},beforeUnmount(){this.destroyElement()}},M={name:"rebilly-card",data(){return{elementType:o.REBILLY_CARD}},mixins:[l]},O={name:"rebilly-card-cvv",data(){return{elementType:o.REBILLY_CARD_CVV}},mixins:[l]},S={name:"rebilly-card-expiration",data(){return{elementType:o.REBILLY_CARD_EXPIRATION}},mixins:[l]},D={name:"rebilly-card-number",data(){return{elementType:o.REBILLY_CARD_NUMBER}},mixins:[l]},F={name:"rebilly-bban-account-type",data(){return{elementType:o.REBILLY_BBAN_ACCOUNT_TYPE}},mixins:[l]},G={name:"rebilly-bban-routing-number",data(){return{elementType:o.REBILLY_BBAN_ROUTING_NUMBER}},mixins:[l]},V={name:"rebilly-bban-account-number",data(){return{elementType:o.REBILLY_BBAN_ACCOUNT_NUMBER}},mixins:[l]},x={name:"rebilly-iban",data(){return{elementType:o.REBILLY_IBAN}},mixins:[l]},j={name:"rebilly-google-pay",data(){return{elementType:o.REBILLY_GOOGLE_PAY}},mixins:[k]},z={name:"rebilly-apple-pay",data(){return{elementType:o.REBILLY_APPLE_PAY}},mixins:[b]},v={name:"rebilly-paypal",data(){return{elementType:o.REBILLY_PAYPAL}},mixins:[b]},K={install(e,t={}){A(),s(t)}};i.RebillyApplePay=z,i.RebillyBbanAccountNumber=V,i.RebillyBbanAccountType=F,i.RebillyBbanRoutingNumber=G,i.RebillyCard=M,i.RebillyCardCvv=O,i.RebillyCardExpiration=S,i.RebillyCardNumber=D,i.RebillyFieldTypes=o,i.RebillyForm=C,i.RebillyGooglePay=j,i.RebillyIban=x,i.RebillyPaypal=v,i.RebillyToken=U,i.createToken=E,i.default=K,i.updateConfig=m,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,11 +1,19 @@
 {
   "name": "@rebilly/framepay-vue",
-  "version": "2.1.0",
+  "type": "module",
+  "version": "3.0.0",
   "description": "Official Vue wrapper for Rebilly FramePay",
   "author": "Rebilly",
   "repository": "https://github.com/Rebilly/framepay-vue",
   "license": "MIT",
-  "main": "dist/build.js",
+  "main": "./dist/framepay-vue.umd.cjs",
+  "module": "./dist/framepay-vue.js",
+  "exports": {
+    ".": {
+      "import": "./dist/framepay-vue.js",
+      "require": "./dist/framepay-vue.umd.cjs"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -18,70 +26,36 @@
     "framepay-vue"
   ],
   "scripts": {
-    "build": "rollup -c",
-    "cypress:headless": "cypress run",
-    "cypress:gui": "cypress open",
-    "lint": "vue-cli-service lint",
-    "serve": "cd ./dev-app && vue-cli-service serve",
-    "test": "run-s test:unit test:e2e",
-    "test:e2e": "run-p -r serve cypress:headless",
-    "test:e2e:gui": "run-p -r serve cypress:gui",
-    "test:unit": "vue-cli-service test:unit"
+    "dev": "vite",
+    "build": "vite build",
+    "test": "npm run lint && npm run test:unit && npm run test:e2e",
+    "test:unit": "vitest run --environment jsdom --root src/",
+    "test:unit:watch": "vitest --environment jsdom --root src/",
+    "test:e2e": "start-server-and-test 'vite dev --port 4173' :4173 'cypress run --e2e'",
+    "test:e2e:gui": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "peerDependencies": {
-    "vue": "^2.4.0"
+    "vue": "^3.0.0"
   },
   "dependencies": {
-    "core-js": "^3.8.0",
-    "dotenv": "^8.0.0"
   },
   "devDependencies": {
     "@testing-library/cypress": "^7.0.2",
-    "@vue/cli-plugin-babel": "^4.5.19",
-    "@vue/cli-plugin-eslint": "^4.5.19",
-    "@vue/cli-plugin-unit-jest": "^4.5.19",
-    "@vue/cli-service": "^4.5.19",
-    "@vue/eslint-config-airbnb": "^5.1.0",
-    "@vue/test-utils": "^1.1.1",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^26.6.3",
-    "cypress": "^6.0.1",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/test-utils": "^2.2.6",
+    "cypress": "12.3.0",
     "cypress-iframe": "^1.0.1",
-    "eslint": "^7.14.0",
-    "eslint-plugin-cypress": "^2.11.2",
-    "eslint-plugin-vue": "^7.1.0",
-    "npm-run-all": "^4.1.5",
-    "rollup": "^2.33.3",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-vue": "^5.1.9",
-    "vue": "^2.7.10",
-    "vue-template-compiler": "^2.7.10"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "plugin:cypress/recommended",
-      "@vue/airbnb"
-    ],
-    "rules": {
-      "indent": [
-        "error",
-        4
-      ],
-      "func-names": "off"
-    },
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ]
+    "eslint": "^8.22.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-vue": "^9.3.0",
+    "jsdom": "^20.0.3",
+    "prettier": "^2.7.1",
+    "start-server-and-test": "^1.15.2",
+    "vite": "^4.0.0",
+    "vite-plugin-mkcert": "^1.13.0",
+    "vitest": "^0.25.6",
+    "vue": "^3.2.45"
+  }
 }

package/dist/build.js

@@ -1,782 +0,0 @@
-import { h, markRaw } from 'vue';
-
-function MountError() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$message = _ref.message,
-      message = _ref$message === void 0 ? 'Could not mount FramePay to element.' : _ref$message,
-      _ref$details = _ref.details,
-      details = _ref$details === void 0 ? null : _ref$details;
-
-  this.message = message;
-  this.details = details;
-  this.name = 'FramePayMountError';
-}
-
-function InitializeError() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref2$message = _ref2.message,
-      message = _ref2$message === void 0 ? 'FramePay could not be initialized.' : _ref2$message,
-      _ref2$details = _ref2.details,
-      details = _ref2$details === void 0 ? null : _ref2$details;
-
-  this.message = message;
-  this.details = details;
-  this.name = 'FramePayInitializeError';
-}
-
-function RemoteScriptError() {
-  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref3$message = _ref3.message,
-      message = _ref3$message === void 0 ? 'FramePay could not be loaded.' : _ref3$message,
-      _ref3$details = _ref3.details,
-      details = _ref3$details === void 0 ? null : _ref3$details;
-
-  this.message = message;
-  this.details = details;
-  this.name = 'FramePayLoadError';
-}
-
-// Link to FramePay library CDN
-var FRAMEPAY_SCRIPT_LINK = process.env.FRAMEPAY_SCRIPT_LINK || process.env.VUE_APP_DEBUG_FRAMEPAY_SCRIPT_LINK || 'https://framepay.rebilly.com/rebilly.js'; // Link to FramePay styles CDN
-
-var FRAMEPAY_STYLE_LINK = process.env.FRAMEPAY_STYLE_LINK || process.env.VUE_APP_DEBUG_FRAMEPAY_STYLE_LINK || 'https://framepay.rebilly.com/rebilly.css';
-
-var injectScript = function injectScript() {
-  return new Promise(function (resolve, reject) {
-    var script = document.createElement('script');
-    script.src = FRAMEPAY_SCRIPT_LINK;
-    script.id = 'rebilly-framepay-js'; // eslint-disable-next-line no-undef
-
-    script.onload = function () {
-      return resolve(Rebilly);
-    };
-
-    script.onerror = function () {
-      return reject();
-    };
-
-    document.querySelector('head').appendChild(script);
-  }).catch(function (err) {
-    throw new RemoteScriptError({
-      details: err
-    });
-  });
-};
-
-var resolver;
-var waitForInstall = new Promise(function (resolve) {
-  resolver = resolve;
-});
-var loadScript = resolver;
-var scriptLoaded = waitForInstall.then(injectScript);
-
-function loadStyle () {
-  if (document.querySelector('link#rebilly-framepay-css')) {
-    return;
-  }
-
-  var style = document.createElement('link');
-  style.href = FRAMEPAY_STYLE_LINK;
-  style.id = 'rebilly-framepay-css';
-  style.type = 'text/css';
-  style.rel = 'stylesheet';
-
-  style.onerror = function (err) {
-    throw new RemoteScriptError({
-      details: err
-    });
-  };
-
-  document.querySelector('head').appendChild(style);
-}
-
-function initializeRebilly () {
-  var configuration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return scriptLoaded.then(function (Rebilly) {
-    return new Promise(function (resolve) {
-      Rebilly.on('ready', function () {
-        resolve(Rebilly);
-      });
-      Rebilly.on('error', function (err) {
-        throw new RemoteScriptError({
-          details: err
-        });
-      });
-
-      try {
-        if (configuration.injectStyle) {
-          loadStyle();
-        }
-
-        if (!Rebilly.initialized && (configuration.publishableKey || configuration.jwt)) {
-          Rebilly.initialize(configuration);
-        }
-      } catch (e) {
-        throw new InitializeError({
-          details: e
-        });
-      }
-    });
-  });
-}
-
-// Framepay element's types
-// Used to address form field related to current element
-var REBILLY_CARD = 'card';
-var REBILLY_CARD_CVV = 'cardCvv';
-var REBILLY_CARD_NUMBER = 'cardNumber';
-var REBILLY_CARD_EXPIRATION = 'cardExpiration';
-var REBILLY_BBAN_ACCOUNT_TYPE = 'accountType';
-var REBILLY_BBAN_ROUTING_NUMBER = 'routingNumber';
-var REBILLY_BBAN_ACCOUNT_NUMBER = 'accountNumber';
-var REBILLY_IBAN = 'iban';
-var REBILLY_GOOGLE_PAY = 'googlePay';
-var REBILLY_APPLE_PAY = 'applePay';
-var REBILLY_PAYPAL = 'paypal';
-var FIELD_TYPES = {
-  REBILLY_CARD: REBILLY_CARD,
-  REBILLY_CARD_CVV: REBILLY_CARD_CVV,
-  REBILLY_CARD_NUMBER: REBILLY_CARD_NUMBER,
-  REBILLY_CARD_EXPIRATION: REBILLY_CARD_EXPIRATION,
-  REBILLY_BBAN_ACCOUNT_TYPE: REBILLY_BBAN_ACCOUNT_TYPE,
-  REBILLY_BBAN_ROUTING_NUMBER: REBILLY_BBAN_ROUTING_NUMBER,
-  REBILLY_BBAN_ACCOUNT_NUMBER: REBILLY_BBAN_ACCOUNT_NUMBER,
-  REBILLY_IBAN: REBILLY_IBAN,
-  REBILLY_GOOGLE_PAY: REBILLY_GOOGLE_PAY,
-  REBILLY_APPLE_PAY: REBILLY_APPLE_PAY,
-  REBILLY_PAYPAL: REBILLY_PAYPAL
-};
-
-function createToken (form, extraData) {
-  return scriptLoaded.then(function (Rebilly) {
-    if (!Rebilly.initialized) {
-      throw new InitializeError({
-        message: 'Please initialize Rebilly before creating a token'
-      });
-    }
-
-    return Rebilly.createToken(form, extraData);
-  });
-}
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function updateConfig (configuration) {
-  return initializeRebilly(configuration).then(function (Rebilly) {
-    Rebilly.update(_objectSpread2({}, configuration));
-  });
-}
-
-//
-var script$1 = {
-  name: 'rebilly-form',
-  props: {
-    extraData: {},
-    configuration: {}
-  },
-  methods: {
-    handler: function handler(event) {
-      var _this = this;
-
-      var form = event.target;
-      event.preventDefault();
-      createToken(form, this.extraData).then(function (token) {
-        if (_this.$listeners.submit) {
-          _this.$emit('submit', token, form);
-        } else {
-          form.submit();
-        }
-      }).catch(function (error) {
-        _this.$emit('error', error);
-      });
-    }
-  },
-  watch: {
-    configuration: function configuration(value) {
-      if (value) {
-        updateConfig(value);
-      }
-    }
-  },
-  mounted: function mounted() {
-    updateConfig(this.configuration);
-  }
-};
-
-function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
-/* server only */
-, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-  if (typeof shadowMode !== 'boolean') {
-    createInjectorSSR = createInjector;
-    createInjector = shadowMode;
-    shadowMode = false;
-  } // Vue.extend constructor export interop.
-
-
-  var options = typeof script === 'function' ? script.options : script; // render functions
-
-  if (template && template.render) {
-    options.render = template.render;
-    options.staticRenderFns = template.staticRenderFns;
-    options._compiled = true; // functional template
-
-    if (isFunctionalTemplate) {
-      options.functional = true;
-    }
-  } // scopedId
-
-
-  if (scopeId) {
-    options._scopeId = scopeId;
-  }
-
-  var hook;
-
-  if (moduleIdentifier) {
-    // server build
-    hook = function hook(context) {
-      // 2.3 injection
-      context = context || // cached call
-      this.$vnode && this.$vnode.ssrContext || // stateful
-      this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
-      // 2.2 with runInNewContext: true
-
-      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-        context = __VUE_SSR_CONTEXT__;
-      } // inject component styles
-
-
-      if (style) {
-        style.call(this, createInjectorSSR(context));
-      } // register component module identifier for async chunk inference
-
-
-      if (context && context._registeredComponents) {
-        context._registeredComponents.add(moduleIdentifier);
-      }
-    }; // used by ssr in case component is cached and beforeCreate
-    // never gets called
-
-
-    options._ssrRegister = hook;
-  } else if (style) {
-    hook = shadowMode ? function (context) {
-      style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-    } : function (context) {
-      style.call(this, createInjector(context));
-    };
-  }
-
-  if (hook) {
-    if (options.functional) {
-      // register for functional component in vue file
-      var originalRender = options.render;
-
-      options.render = function renderWithStyleInjection(h, context) {
-        hook.call(context);
-        return originalRender(h, context);
-      };
-    } else {
-      // inject component registration as beforeCreate hook
-      var existing = options.beforeCreate;
-      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-    }
-  }
-
-  return script;
-}
-
-/* script */
-const __vue_script__$1 = script$1;
-
-/* template */
-var __vue_render__$1 = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "form",
-    { attrs: { id: "rebilly-form" }, on: { submit: _vm.handler } },
-    [_vm._t("default")],
-    2
-  )
-};
-var __vue_staticRenderFns__$1 = [];
-__vue_render__$1._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__$1 = undefined;
-  /* scoped */
-  const __vue_scope_id__$1 = undefined;
-  /* module identifier */
-  const __vue_module_identifier__$1 = undefined;
-  /* functional template */
-  const __vue_is_functional_template__$1 = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
-    __vue_inject_styles__$1,
-    __vue_script__$1,
-    __vue_scope_id__$1,
-    __vue_is_functional_template__$1,
-    __vue_module_identifier__$1,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-//
-//
-//
-//
-//
-//
-//
-var script = {
-  name: 'rebilly-token'
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("input", {
-    attrs: { id: "rebilly-token", "data-rebilly": "token", type: "hidden" },
-  })
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-var BaseElementMixin = {
-  render: function render() {
-    return h('div', {
-      id: this.mountId,
-      domProps: {
-        id: this.mountId
-      }
-    });
-  },
-  props: {
-    id: {
-      type: String
-    },
-    configuration: {}
-  },
-  data: function data() {
-    return {
-      element: null,
-      mountId: this.id ? this.id : "".concat(this.$options.name, "-mount")
-    };
-  },
-  methods: {
-    mountElement: function mountElement(selector) {
-      var _this = this;
-
-      initializeRebilly(this.configuration).then(function (Rebilly) {
-        try {
-          if (_this.elementType.startsWith('card')) {
-            _this.element = markRaw(Rebilly.card.mount(selector, _this.elementType));
-          } else if (_this.elementType === 'iban') {
-            _this.element = markRaw(Rebilly.iban.mount(selector));
-          } else if ([FIELD_TYPES.REBILLY_BBAN_ACCOUNT_TYPE, FIELD_TYPES.REBILLY_BBAN_ACCOUNT_NUMBER, FIELD_TYPES.REBILLY_BBAN_ROUTING_NUMBER].includes(_this.elementType)) {
-            _this.element = markRaw(Rebilly.bban.mount(selector, _this.elementType));
-          }
-
-          _this.element.on('ready', function () {
-            return _this.$emit('ready');
-          });
-
-          _this.element.on('change', function (e) {
-            return _this.$emit('change', e);
-          });
-
-          _this.element.on('focus', function () {
-            return _this.$emit('focus');
-          });
-
-          _this.element.on('blur', function () {
-            return _this.$emit('blur');
-          });
-        } catch (e) {
-          throw new MountError();
-        }
-      });
-    },
-    destroyElement: function destroyElement() {
-      if (this.element) {
-        this.element.destroy();
-      }
-    }
-  },
-  created: function created() {
-    this.mountElement("#".concat(this.mountId));
-  },
-  // in vue 2 beforeDestroy is emitted but not in vue 3
-  beforeDestroy: function beforeDestroy() {
-    this.destroyElement();
-  },
-  // in vue 3 beforeDestroy hook is replaced with beforeUnmount,
-  // we should keep both of them for compatibility purpose
-  beforeUnmount: function beforeUnmount() {
-    this.destroyElement();
-  }
-};
-
-var GooglePayMixin = {
-  render: function render() {
-    return h('div', {
-      id: this.mountId,
-      domProps: {
-        id: this.mountId
-      }
-    });
-  },
-  props: {
-    id: {
-      type: String
-    },
-    configuration: {}
-  },
-  data: function data() {
-    return {
-      element: null,
-      mountId: this.id ? this.id : "".concat(this.$options.name, "-mount")
-    };
-  },
-  methods: {
-    mountElement: function mountElement(selector) {
-      var _this = this;
-
-      initializeRebilly(this.configuration).then(function (Rebilly) {
-        try {
-          _this.element = markRaw(Rebilly.googlePay.mount(selector));
-
-          _this.element.on('ready', function () {
-            return _this.$emit('ready');
-          });
-
-          _this.element.on('change', function (e) {
-            return _this.$emit('change', e);
-          });
-
-          _this.element.on('focus', function () {
-            return _this.$emit('focus');
-          });
-
-          _this.element.on('blur', function () {
-            return _this.$emit('blur');
-          });
-
-          _this.element.on('error', function () {
-            return _this.$emit('error');
-          });
-
-          Rebilly.on('token-ready', function (token) {
-            // https://github.com/vuejs/vue/issues/4332#issuecomment-263444492
-            // Emit token on the element level:
-            _this.$emit('token-ready', token); // Emit token on the RebillyForm level:
-
-
-            _this.$parent.$emit('token-ready', token);
-          });
-        } catch (e) {
-          throw new MountError({
-            details: e
-          });
-        }
-      });
-    },
-    destroyElement: function destroyElement() {
-      if (this.element) {
-        this.element.destroy();
-      }
-    }
-  },
-  watch: {
-    configuration: function configuration(value) {
-      if (value) {
-        updateConfig(value);
-      }
-    }
-  },
-  created: function created() {
-    this.mountElement("#".concat(this.mountId));
-  },
-  // in vue 2 beforeDestroy is emitted but not in vue 3
-  beforeDestroy: function beforeDestroy() {
-    this.destroyElement();
-  },
-  // in vue 3 beforeDestroy hook is replaced with beforeUnmount,
-  // we should keep both of them for compatibility purpose
-  beforeUnmount: function beforeUnmount() {
-    this.destroyElement();
-  }
-};
-
-var NonIframeElementMixin = {
-  render: function render() {
-    return h('div', {
-      id: this.mountId,
-      domProps: {
-        id: this.mountId
-      }
-    });
-  },
-  props: {
-    id: {
-      type: String
-    },
-    configuration: {}
-  },
-  data: function data() {
-    return {
-      element: null,
-      mountId: this.id ? this.id : "".concat(this.$options.name, "-mount")
-    };
-  },
-  methods: {
-    mountElement: function mountElement(selector) {
-      var _this = this;
-
-      initializeRebilly(this.configuration).then(function (Rebilly) {
-        try {
-          var namespace = null;
-
-          if (_this.elementType === FIELD_TYPES.REBILLY_APPLE_PAY) {
-            namespace = Rebilly.applePay;
-          } else if (_this.elementType === FIELD_TYPES.REBILLY_PAYPAL) {
-            namespace = Rebilly.paypal;
-          }
-
-          _this.element = markRaw(namespace.mount(selector));
-          Rebilly.on('token-ready', function (token) {
-            // https://github.com/vuejs/vue/issues/4332#issuecomment-263444492
-            // Emit token on the element level:
-            _this.$emit('token-ready', token); // Emit token on the RebillyForm level:
-
-
-            _this.$parent.$emit('token-ready', token);
-          });
-        } catch (e) {
-          throw new MountError({
-            details: e
-          });
-        }
-      });
-    },
-    destroyElement: function destroyElement() {
-      if (this.element) {
-        this.element.destroy();
-      }
-    }
-  },
-  watch: {
-    configuration: function configuration(value) {
-      if (value) {
-        updateConfig(value);
-      }
-    }
-  },
-  created: function created() {
-    this.mountElement("#".concat(this.mountId));
-  },
-  // in vue 2 beforeDestroy is emitted but not in vue 3
-  beforeDestroy: function beforeDestroy() {
-    this.destroyElement();
-  },
-  // in vue 3 beforeDestroy hook is replaced with beforeUnmount,
-  // we should keep both of them for compatibility purpose
-  beforeUnmount: function beforeUnmount() {
-    this.destroyElement();
-  }
-};
-
-var RebillyCard = {
-  name: 'rebilly-card',
-  data: function data() {
-    return {
-      elementType: FIELD_TYPES.REBILLY_CARD
-    };
-  },
-  mixins: [BaseElementMixin]
-};
-var RebillyCardCvv = {
-  name: 'rebilly-card-cvv',
-  data: function data() {
-    return {
-      elementType: FIELD_TYPES.REBILLY_CARD_CVV
-    };
-  },
-  mixins: [BaseElementMixin]
-};
-var RebillyCardExpiration = {
-  name: 'rebilly-card-expiration',
-  data: function data() {
-    return {
-      elementType: FIELD_TYPES.REBILLY_CARD_EXPIRATION
-    };
-  },
-  mixins: [BaseElementMixin]
-};
-var RebillyCardNumber = {
-  name: 'rebilly-card-number',
-  data: function data() {
-    return {
-      elementType: FIELD_TYPES.REBILLY_CARD_NUMBER
-    };
-  },
-  mixins: [BaseElementMixin]
-};
-var RebillyBbanAccountType = {
-  name: 'rebilly-bban-account-type',
-  data: function data() {
-    return {
-      elementType: FIELD_TYPES.REBILLY_BBAN_ACCOUNT_TYPE
-    };
-  },
-  mixins: [BaseElementMixin]
-};
-var RebillyBbanRoutingNumber = {
-  name: 'rebilly-bban-routing-number',
-  data: function data() {
-    return {
-      elementType: FIELD_TYPES.REBILLY_BBAN_ROUTING_NUMBER
-    };
-  },
-  mixins: [BaseElementMixin]
-};
-var RebillyBbanAccountNumber = {
-  name: 'rebilly-bban-account-number',
-  data: function data() {
-    return {
-      elementType: FIELD_TYPES.REBILLY_BBAN_ACCOUNT_NUMBER
-    };
-  },
-  mixins: [BaseElementMixin]
-};
-var RebillyIban = {
-  name: 'rebilly-iban',
-  data: function data() {
-    return {
-      elementType: FIELD_TYPES.REBILLY_IBAN
-    };
-  },
-  mixins: [BaseElementMixin]
-};
-var RebillyGooglePay = {
-  name: 'rebilly-google-pay',
-  data: function data() {
-    return {
-      elementType: FIELD_TYPES.REBILLY_GOOGLE_PAY
-    };
-  },
-  mixins: [GooglePayMixin]
-};
-var RebillyApplePay = {
-  name: 'rebilly-apple-pay',
-  data: function data() {
-    return {
-      elementType: FIELD_TYPES.REBILLY_APPLE_PAY
-    };
-  },
-  mixins: [NonIframeElementMixin]
-};
-var RebillyPaypal = {
-  name: 'rebilly-paypal',
-  data: function data() {
-    return {
-      elementType: FIELD_TYPES.REBILLY_PAYPAL
-    };
-  },
-  mixins: [NonIframeElementMixin]
-};
-
-var FramePay = {
-  install: function install(Vue) {
-    var configuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    loadScript();
-    initializeRebilly(configuration);
-  }
-};
-
-export { RebillyApplePay, RebillyBbanAccountNumber, RebillyBbanAccountType, RebillyBbanRoutingNumber, RebillyCard, RebillyCardCvv, RebillyCardExpiration, RebillyCardNumber, FIELD_TYPES as RebillyFieldTypes, __vue_component__$1 as RebillyForm, RebillyGooglePay, RebillyIban, RebillyPaypal, __vue_component__ as RebillyToken, createToken, FramePay as default, updateConfig };