@rebilly/framepay-vue/dist/framepay-vue.js

Official Vue wrapper for Rebilly FramePay

import { createElementBlock as u, openBlock as y, createElementVNode as I, withModifiers as B, renderSlot as A, markRaw as l, h as c } 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 p({ message: e = "FramePay could not be initialized.", details: t = null } = {}) {
  this.message = e, this.details = t, this.name = "FramePayInitializeError";
}
function E({ 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;
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, r) => {
    if (window.Framepay)
      n(window.Framepay);
    else {
      const a = document.createElement("link");
      a.setAttribute("href", t || Y), a.setAttribute("rel", "stylesheet"), document.head.prepend(a);
      const o = document.createElement("script");
      o.setAttribute("src", e || T), o.onload = () => n(window.Framepay), o.onerror = () => r(
        new Error(
          "@rebilly/framepay npm package: Failed to load FramePay script"
        )
      ), document.head.append(o);
    }
  });
}
const $ = () => N({ scriptLink: P }).catch((e) => {
  throw new E({ details: e });
});
let _;
const w = new Promise((e) => {
  _ = e;
}), g = _, b = w.then($);
function m(e = {}) {
  return b.then(
    (t) => new Promise((n) => {
      t.on("ready", () => {
        n(t);
      }), t.on("error", (r) => {
        throw new E({ details: r });
      });
      try {
        !t.initialized && (e.publishableKey || e.jwt) && t.initialize(e);
      } catch (r) {
        throw new p({ details: r });
      }
    })
  );
}
const C = "card", x = "cardCvv", U = "cardNumber", k = "cardExpiration", O = "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: k,
  REBILLY_BBAN_ACCOUNT_TYPE: O,
  REBILLY_BBAN_ROUTING_NUMBER: M,
  REBILLY_BBAN_ACCOUNT_NUMBER: S,
  REBILLY_IBAN: D,
  REBILLY_GOOGLE_PAY: F,
  REBILLY_APPLE_PAY: v,
  REBILLY_PAYPAL: G
};
function z(e, t) {
  return b.then((n) => {
    if (!n.initialized)
      throw new p({
        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 L = (e, t) => {
  const n = e.__vccOpts || e;
  for (const [r, a] of t)
    n[r] = a;
  return n;
}, K = {
  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;
      z(t, this.extraData).then((n) => {
        this.$attrs.onSubmit ? this.$emit("submit", n, t) : t.submit();
      }).catch((n) => {
        this.$emit("error", n);
      });
    }
  }
}, V = { id: "stop-wrapper" };
function j(e, t, n, r, a, o) {
  return y(), u("div", V, [
    I("form", {
      id: "rebilly-form",
      onSubmit: t[0] || (t[0] = B((...f) => o.handler && o.handler(...f), ["stop", "prevent"]))
    }, [
      A(e.$slots, "default")
    ], 32)
  ]);
}
const Q = /* @__PURE__ */ L(K, [["render", j]]), X = {
  name: "RebillyToken"
}, W = {
  id: "rebilly-token",
  "data-rebilly": "token",
  type: "hidden"
};
function q(e, t, n, r, a, o) {
  return y(), u("input", W);
}
const Z = /* @__PURE__ */ L(X, [["render", q]]), s = {
  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) {
      m(this.configuration).then((t) => {
        try {
          this.elementType.startsWith("card") ? this.element = l(t.card.mount(e, this.elementType)) : this.elementType === "iban" ? this.element = l(t.iban.mount(e)) : [
            i.REBILLY_BBAN_ACCOUNT_TYPE,
            i.REBILLY_BBAN_ACCOUNT_NUMBER,
            i.REBILLY_BBAN_ROUTING_NUMBER
          ].includes(this.elementType) && (this.element = l(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}`);
  },
  // in vue 2 beforeDestroy is emitted but not in vue 3
  beforeDestroy() {
    this.destroyElement();
  },
  // in vue 3 beforeDestroy hook is replaced with beforeUnmount,
  // we should keep both of them for compatibility purpose
  beforeUnmount() {
    this.destroyElement();
  }
}, H = {
  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) {
      m(this.configuration).then((t) => {
        try {
          this.element = l(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 && d(e);
    }
  },
  created() {
    this.mountElement(`#${this.mountId}`);
  },
  // in vue 2 beforeDestroy is emitted but not in vue 3
  beforeDestroy() {
    this.destroyElement();
  },
  // in vue 3 beforeDestroy hook is replaced with beforeUnmount,
  // we should keep both of them for compatibility purpose
  beforeUnmount() {
    this.destroyElement();
  }
}, R = {
  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) {
      m(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 = l(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 && d(e);
    }
  },
  created() {
    this.mountElement(`#${this.mountId}`);
  },
  // in vue 2 beforeDestroy is emitted but not in vue 3
  beforeDestroy() {
    this.destroyElement();
  },
  // in vue 3 beforeDestroy hook is replaced with beforeUnmount,
  // we should keep both of them for compatibility purpose
  beforeUnmount() {
    this.destroyElement();
  }
}, ee = {
  name: "rebilly-card",
  data() {
    return { elementType: i.REBILLY_CARD };
  },
  mixins: [s]
}, te = {
  name: "rebilly-card-cvv",
  data() {
    return { elementType: i.REBILLY_CARD_CVV };
  },
  mixins: [s]
}, ne = {
  name: "rebilly-card-expiration",
  data() {
    return { elementType: i.REBILLY_CARD_EXPIRATION };
  },
  mixins: [s]
}, ie = {
  name: "rebilly-card-number",
  data() {
    return { elementType: i.REBILLY_CARD_NUMBER };
  },
  mixins: [s]
}, re = {
  name: "rebilly-bban-account-type",
  data() {
    return { elementType: i.REBILLY_BBAN_ACCOUNT_TYPE };
  },
  mixins: [s]
}, oe = {
  name: "rebilly-bban-routing-number",
  data() {
    return { elementType: i.REBILLY_BBAN_ROUTING_NUMBER };
  },
  mixins: [s]
}, se = {
  name: "rebilly-bban-account-number",
  data() {
    return { elementType: i.REBILLY_BBAN_ACCOUNT_NUMBER };
  },
  mixins: [s]
}, ae = {
  name: "rebilly-iban",
  data() {
    return { elementType: i.REBILLY_IBAN };
  },
  mixins: [s]
}, le = {
  name: "rebilly-google-pay",
  data() {
    return { elementType: i.REBILLY_GOOGLE_PAY };
  },
  mixins: [H]
}, me = {
  name: "rebilly-apple-pay",
  data() {
    return { elementType: i.REBILLY_APPLE_PAY };
  },
  mixins: [R]
}, de = {
  name: "rebilly-paypal",
  data() {
    return { elementType: i.REBILLY_PAYPAL };
  },
  mixins: [R]
}, ce = {
  install(e, t = {}) {
    g(), m(t);
  }
};
export {
  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,
  Q as RebillyForm,
  le as RebillyGooglePay,
  ae as RebillyIban,
  de as RebillyPaypal,
  Z as RebillyToken,
  z as createToken,
  ce as default,
  d as updateConfig
};