@rebilly/framepay-vue 6.1.2 → 7.0.0

package/CHANGELOG.md

@@ -1 +1,10 @@
-## [6.1.2](https://github.com/Rebilly/rebilly/compare/framepay-vue-v6.1.1...framepay-vue-v6.1.2) (2024-11-12)
+## [7.0.0](https://github.com/Rebilly/rebilly/compare/framepay-vue-v6.1.3...framepay-vue-v7.0.0) (2024-11-14)
+
+
+### ⚠ BREAKING CHANGES
+
+* **framepay-vue:** use @rebilly/framepay in framepay-vue (#8531)
+
+### Refactors
+
+* **framepay-vue:** use @rebilly/framepay in framepay-vue ([#8531](https://github.com/Rebilly/rebilly/issues/8531)) ([ebca290](https://github.com/Rebilly/rebilly/commit/ebca2901ba85935bf390bdf125cbaaa78ddecc3e))

package/README.md

@@ -100,13 +100,10 @@ import FramePay from '@rebilly/framepay-vue';
 
 const configuration = {
     publishableKey: 'pk_sandbox_1234567890',
-    injectStyle: true,
 };
 app.use(FramePay, configuration);
 ```
 
-See [Built in Styling](#built-in-styling) for more information about the `injectStyle` option.
-
 #### On a component (rebilly-form, rebilly-card etc)
 
 Add the `publishableKey` on only the first component in the template.
@@ -150,7 +147,6 @@ The script will only be loaded the first time `created()` is called, so you can
         created() {
             const config = {
                 publishableKey: 'pk_sandbox_1234567890',
-                injectStyle: true,
                 // etc
             };
             app.use(FramePay, config);
@@ -364,39 +360,6 @@ It is possible to use `v-show` instead, which will allow you to preserve the use
 <button @click="paymentMethod = 'ach'">Bank</button>
 ```
 
-### Styling
-
-Styling can be managed using Rebilly's built in styles for Framepay, or by setting some custom options. 
-
-#### Built in Styling
-
-To use the built in styling, add  `injectStyle: true` to your configuration object.
-
-```javascript
-//main.js
-import FramePay from '@rebilly/framepay-vue';
-
-const configuration = {
-    publishableKey: 'pk_sandbox_1234567890',
-    injectStyle: true,
-};
-app.use(FramePay, configuration);
-```
-
-**OR**
-
-```html
-<rebilly-form :configuration="{ publishableKey: 'pk_sandbox_1234567890', injectStyle: true }">
-	<input data-rebilly="firstName">
-	<input data-rebilly="lastName">
-	<rebilly-card></rebilly-card>
-</rebilly-form> 
-```
-
-#### Custom Styling
-
-Custom styling can also be added to your configuration object. While the built-in styling affects the iframes containing Framepay fields, custom styling allows you to tweak the Framepay fields themselves. The full list of style options can be found in the table here: https://rebilly.github.io/framepay-docs/reference/rebilly.html#rebilly-initialize
-
 ### Events
 
 #### `rebilly-form`

package/dist/framepay-vue.js

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

package/dist/framepay-vue.umd.cjs

@@ -1 +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 h({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/framepay.js",B=window.process?.env?.FRAMEPAY_STYLE_LINK||"https://framepay.rebilly.com/framepay.css",f=()=>new Promise((e,t)=>{const n=document.createElement("script");n.src=L,n.id="rebilly-framepay-js",n.onload=()=>e(Framepay),n.onerror=()=>t(),document.querySelector("head").appendChild(n)}).catch(e=>{throw new c({details:e})});let R;const I=new Promise(e=>{R=e}),A=R,_=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 _.then(t=>new Promise(n=>{t.on("ready",()=>{n(t)}),t.on("error",l=>{throw new c({details:l})});try{e.injectStyle&&P(),!t.initialized&&(e.publishableKey||e.jwt)&&t.initialize(e)}catch(l){throw new h({details:l})}}))}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 b(e,t){return _.then(n=>{if(!n.initialized)throw new h({message:"Please initialize Framepay before creating a token"});return n.createToken(e,t)})}function m(e){return s(e).then(t=>{t.update({...e})})}const E=(e,t)=>{const n=e.__vccOpts||e;for(const[l,y]of t)n[l]=y;return n},Y={name:"RebillyForm",props:{extraData:{type:Object,default:()=>({})},configuration:{type:Object,default:()=>({})}},emits:["submit","error"],watch:{configuration(e){e&&m(e)}},mounted(){m(this.configuration)},methods:{handler(e){const t=e.target;b(t,this.extraData).then(n=>{this.$attrs.onSubmit?this.$emit("submit",n,t):t.submit()}).catch(n=>{this.$emit("error",n)})}}},N={id:"stop-wrapper"};function T(e,t,n,l,y,u){return r.openBlock(),r.createElementBlock("div",N,[r.createElementVNode("form",{id:"rebilly-form",onSubmit:t[0]||(t[0]=r.withModifiers((...q)=>u.handler&&u.handler(...q),["stop","prevent"]))},[r.renderSlot(e.$slots,"default")],32)])}const C=E(Y,[["render",T]]),g={name:"RebillyToken"},$={id:"rebilly-token","data-rebilly":"token",type:"hidden"};function w(e,t,n,l,y,u){return r.openBlock(),r.createElementBlock("input",$)}const U=E(g,[["render",w]]),a={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()}},p={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",l=>{this.$emit("token-ready",l),this.$parent.$emit("token-ready",l)})}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()}},O={name:"rebilly-card",data(){return{elementType:o.REBILLY_CARD}},mixins:[a]},M={name:"rebilly-card-cvv",data(){return{elementType:o.REBILLY_CARD_CVV}},mixins:[a]},S={name:"rebilly-card-expiration",data(){return{elementType:o.REBILLY_CARD_EXPIRATION}},mixins:[a]},D={name:"rebilly-card-number",data(){return{elementType:o.REBILLY_CARD_NUMBER}},mixins:[a]},G={name:"rebilly-bban-account-type",data(){return{elementType:o.REBILLY_BBAN_ACCOUNT_TYPE}},mixins:[a]},F={name:"rebilly-bban-routing-number",data(){return{elementType:o.REBILLY_BBAN_ROUTING_NUMBER}},mixins:[a]},V={name:"rebilly-bban-account-number",data(){return{elementType:o.REBILLY_BBAN_ACCOUNT_NUMBER}},mixins:[a]},j={name:"rebilly-iban",data(){return{elementType:o.REBILLY_IBAN}},mixins:[a]},x={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:[p]},v={name:"rebilly-paypal",data(){return{elementType:o.REBILLY_PAYPAL}},mixins:[p]},K={install(e,t={}){A(),s(t)}};i.RebillyApplePay=z,i.RebillyBbanAccountNumber=V,i.RebillyBbanAccountType=G,i.RebillyBbanRoutingNumber=F,i.RebillyCard=O,i.RebillyCardCvv=M,i.RebillyCardExpiration=S,i.RebillyCardNumber=D,i.RebillyFieldTypes=o,i.RebillyForm=C,i.RebillyGooglePay=x,i.RebillyIban=j,i.RebillyPaypal=v,i.RebillyToken=U,i.createToken=b,i.default=K,i.updateConfig=m,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(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 c({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 h({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/framepay.js";window.process?.env?.FRAMEPAY_STYLE_LINK;const B="https://framepay.rebilly.com/framepay.js",f="https://framepay.rebilly.com/framepay.css";async function I({scriptLink:e,styleLink:t}={}){return new Promise(n=>{if(window.Framepay)n(window.Framepay);else{const a=document.createElement("link");a.setAttribute("href",t??f),a.setAttribute("rel","stylesheet"),document.head.prepend(a);const s=document.createElement("script");s.setAttribute("src",e??B),s.onload=()=>n(window.Framepay),document.head.append(s)}})}const A=()=>new Promise(e=>{I({scriptLink:L}).then(t=>e(t))}).catch(e=>{throw new h({details:e})});let R;const P=new Promise(e=>{R=e}),Y=R,_=P.then(A);function m(e={}){return _.then(t=>new Promise(n=>{t.on("ready",()=>{n(t)}),t.on("error",a=>{throw new h({details:a})});try{!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 b(e,t){return _.then(n=>{if(!n.initialized)throw new u({message:"Please initialize Framepay before creating a token"});return n.createToken(e,t)})}function d(e){return m(e).then(t=>{t.update({...e})})}const p=(e,t)=>{const n=e.__vccOpts||e;for(const[a,s]of t)n[a]=s;return n},T={name:"RebillyForm",props:{extraData:{type:Object,default:()=>({})},configuration:{type:Object,default:()=>({})}},emits:["submit","error"],watch:{configuration(e){e&&d(e)}},mounted(){d(this.configuration)},methods:{handler(e){const t=e.target;b(t,this.extraData).then(n=>{this.$attrs.onSubmit?this.$emit("submit",n,t):t.submit()}).catch(n=>{this.$emit("error",n)})}}},N={id:"stop-wrapper"};function C(e,t,n,a,s,y){return r.openBlock(),r.createElementBlock("div",N,[r.createElementVNode("form",{id:"rebilly-form",onSubmit:t[0]||(t[0]=r.withModifiers((...q)=>y.handler&&y.handler(...q),["stop","prevent"]))},[r.renderSlot(e.$slots,"default")],32)])}const w=p(T,[["render",C]]),g={name:"RebillyToken"},$={id:"rebilly-token","data-rebilly":"token",type:"hidden"};function U(e,t,n,a,s,y){return r.openBlock(),r.createElementBlock("input",$)}const k=p(g,[["render",U]]),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){m(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 c}})},destroyElement(){this.element&&this.element.destroy()}},created(){this.mountElement(`#${this.mountId}`)},beforeDestroy(){this.destroyElement()},beforeUnmount(){this.destroyElement()}},O={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){m(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 c({details:n})}})},destroyElement(){this.element&&this.element.destroy()}},watch:{configuration(e){e&&d(e)}},created(){this.mountElement(`#${this.mountId}`)},beforeDestroy(){this.destroyElement()},beforeUnmount(){this.destroyElement()}},E={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){m(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 c({details:n})}})},destroyElement(){this.element&&this.element.destroy()}},watch:{configuration(e){e&&d(e)}},created(){this.mountElement(`#${this.mountId}`)},beforeDestroy(){this.destroyElement()},beforeUnmount(){this.destroyElement()}},M={name:"rebilly-card",data(){return{elementType:o.REBILLY_CARD}},mixins:[l]},D={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]},F={name:"rebilly-card-number",data(){return{elementType:o.REBILLY_CARD_NUMBER}},mixins:[l]},G={name:"rebilly-bban-account-type",data(){return{elementType:o.REBILLY_BBAN_ACCOUNT_TYPE}},mixins:[l]},V={name:"rebilly-bban-routing-number",data(){return{elementType:o.REBILLY_BBAN_ROUTING_NUMBER}},mixins:[l]},j={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]},z={name:"rebilly-google-pay",data(){return{elementType:o.REBILLY_GOOGLE_PAY}},mixins:[O]},K={name:"rebilly-apple-pay",data(){return{elementType:o.REBILLY_APPLE_PAY}},mixins:[E]},v={name:"rebilly-paypal",data(){return{elementType:o.REBILLY_PAYPAL}},mixins:[E]},X={install(e,t={}){Y(),m(t)}};i.RebillyApplePay=K,i.RebillyBbanAccountNumber=j,i.RebillyBbanAccountType=G,i.RebillyBbanRoutingNumber=V,i.RebillyCard=M,i.RebillyCardCvv=D,i.RebillyCardExpiration=S,i.RebillyCardNumber=F,i.RebillyFieldTypes=o,i.RebillyForm=w,i.RebillyGooglePay=z,i.RebillyIban=x,i.RebillyPaypal=v,i.RebillyToken=k,i.createToken=b,i.default=X,i.updateConfig=d,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebilly/framepay-vue",
   "type": "module",
-  "version": "6.1.2",
+  "version": "7.0.0",
   "description": "Official Vue wrapper for Rebilly FramePay",
   "author": "Rebilly",
   "repository": {
@@ -9,12 +9,11 @@
     "url": "https://github.com/Rebilly/rebilly"
   },
   "license": "MIT",
-  "main": "./dist/framepay-vue.umd.cjs",
-  "module": "./dist/framepay-vue.js",
   "exports": {
     ".": {
       "import": "./dist/framepay-vue.js",
-      "require": "./dist/framepay-vue.umd.cjs"
+      "require": "./dist/framepay-vue.umd.cjs",
+      "default": "./dist/framepay-vue.js"
     }
   },
   "files": [
@@ -42,6 +41,7 @@
   },
   "devDependencies": {
     "@rebilly/eslint-config": "*",
+    "@rebilly/framepay": "*",
     "@testing-library/cypress": "^10.0.2",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/test-utils": "^2.4.6",