@rebilly/framepay-vue 1.2.0 → 2.0.0

package/README.md

@@ -18,7 +18,7 @@ This is the repo for the official Vue.js wrapper for Rebilly's [FramePay](https:
       - [On a component (rebilly-form, rebilly-card etc)](#on-a-component-rebilly-form-rebilly-card-etc)
       - [Lazy loading Framepay files](#lazy-loading-framepay-files)
     - [Usage](#usage)
-      - [Digital wallets](#digital-wallets)
+      - [Google Pay and Apple Pay](#google-pay-and-apple-pay)
       - [With rebilly-form](#with-rebilly-form)
       - [With rebilly-form and custom submit logic](#with-rebilly-form-and-custom-submit-logic)
       - [With rebilly-token](#with-rebilly-token)
@@ -165,26 +165,22 @@ The script will only be loaded the first time `created()` is called, so you can
 - `RebillyCard` automatically mounts the combined credit card payment method
 - `RebillyCardCvv`, `RebillycardExpiration`, and `RebillyCardNumber` mount three separate components for collecting credit info
 - `RebillyBankAccountNumber`, `RebillyBankAccountType`, and `RebillyBankRoutingNumber` mount the `ach` (bank account) payment method
-- `RebillyDigitalWallet` and `RebillyApplePay` mount Google Pay and Apple Pay respectively. These two methods are different from the rest, as they require additional inputs and emit the payment token with a separate event.
+- `RebillyGooglePay` and `RebillyApplePay` mount Google Pay and Apple Pay respectively. These two methods are different from the rest, as they require additional inputs and emit the payment token with a separate event.
 
 Two more components are also offered for convenience: 
 
 - `RebillyForm` wraps a regular HTML `form`. It automatically detects payment method components and performs token creation/injection when the form is submitted. It is the simplest way to get started with `framepay-vue`.
 - `RebillyToken` can be added to any standard form, and when present will automatically receive the token created by `createToken()`. You do not need to use `RebillyToken` if you are using `RebillyForm` already. 
 
-#### Digital wallets
-`RebillyDigitaWallet` and `RebillyApplePay` are used like so:
+#### Google Pay and Apple Pay
+`RebillyGooglePay` and `RebillyApplePay` are used like so:
 ```html
 <rebilly-apple-pay
-    :form="form"
-    :extraData="extraData"
     @token-ready="handleToken"
 />
 ```
 
 whereas:
-* `:form` is the DOM element of your payment form (this does not need to be `<rebilly-form>`, it could be any DOM element).
-* `:extraData` is an object containing any additional information you'd like to supply for the token creation.
 * `@token-ready` is an event emitted once the payment token has been generated and its payload contains the token object.
 
 #### With rebilly-form
@@ -213,7 +209,7 @@ Any DOM attributes you attach to `RebillyForm` will automatically be passed to t
 
 `@error` will expose the error message returned if the `Rebilly.createToken()` request failed. You can inspect `error.message` and `error.code`.
 
-`@token-ready` will expose the token object, if a digital wallet element was mounted in the form.
+`@token-ready` will expose the token object, if a Google/Apple Pay element was mounted in the form.
 
 See here for all arguments to `extraData`: https://rebilly.github.io/framepay-docs/reference/rebilly.html#extra-data.
 

package/dist/build.js

@@ -1,3 +1,5 @@
+import { h, markRaw } from 'vue';
+
 function MountError() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$message = _ref.message,
@@ -128,8 +130,9 @@ var REBILLY_BBAN_ACCOUNT_TYPE = 'accountType';
 var REBILLY_BBAN_ROUTING_NUMBER = 'routingNumber';
 var REBILLY_BBAN_ACCOUNT_NUMBER = 'accountNumber';
 var REBILLY_IBAN = 'iban';
-var REBILLY_DIGITAL_WALLET = 'digitalWallet';
+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,
@@ -139,8 +142,9 @@ var FIELD_TYPES = {
   REBILLY_BBAN_ROUTING_NUMBER: REBILLY_BBAN_ROUTING_NUMBER,
   REBILLY_BBAN_ACCOUNT_NUMBER: REBILLY_BBAN_ACCOUNT_NUMBER,
   REBILLY_IBAN: REBILLY_IBAN,
-  REBILLY_DIGITAL_WALLET: REBILLY_DIGITAL_WALLET,
-  REBILLY_APPLE_PAY: REBILLY_APPLE_PAY
+  REBILLY_GOOGLE_PAY: REBILLY_GOOGLE_PAY,
+  REBILLY_APPLE_PAY: REBILLY_APPLE_PAY,
+  REBILLY_PAYPAL: REBILLY_PAYPAL
 };
 
 function createToken (form, extraData) {
@@ -155,30 +159,14 @@ function createToken (form, extraData) {
   });
 }
 
-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 ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -186,24 +174,32 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    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));
@@ -211,7 +207,7 @@ function updateConfig (configuration) {
 }
 
 //
-var script = {
+var script$1 = {
   name: 'rebilly-form',
   props: {
     extraData: {},
@@ -330,10 +326,10 @@ function normalizeComponent(template, style, script, scopeId, isFunctionalTempla
 }
 
 /* script */
-const __vue_script__ = script;
+const __vue_script__$1 = script$1;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__$1 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -344,17 +340,17 @@ var __vue_render__ = function() {
     2
   )
 };
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+var __vue_staticRenderFns__$1 = [];
+__vue_render__$1._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = undefined;
+  const __vue_inject_styles__$1 = undefined;
   /* scoped */
-  const __vue_scope_id__ = undefined;
+  const __vue_scope_id__$1 = undefined;
   /* module identifier */
-  const __vue_module_identifier__ = undefined;
+  const __vue_module_identifier__$1 = undefined;
   /* functional template */
-  const __vue_is_functional_template__ = false;
+  const __vue_is_functional_template__$1 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -363,13 +359,13 @@ __vue_render__._withStripped = true;
   
 
   
-  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__,
+  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,
@@ -383,33 +379,33 @@ __vue_render__._withStripped = true;
 //
 //
 //
-var script$1 = {
+var script = {
   name: 'rebilly-token'
 };
 
 /* script */
-const __vue_script__$1 = script$1;
+const __vue_script__ = script;
 
 /* template */
-var __vue_render__$1 = function() {
+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" }
+    attrs: { id: "rebilly-token", "data-rebilly": "token", type: "hidden" },
   })
 };
-var __vue_staticRenderFns__$1 = [];
-__vue_render__$1._withStripped = true;
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$1 = undefined;
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__$1 = undefined;
+  const __vue_scope_id__ = undefined;
   /* module identifier */
-  const __vue_module_identifier__$1 = undefined;
+  const __vue_module_identifier__ = undefined;
   /* functional template */
-  const __vue_is_functional_template__$1 = false;
+  const __vue_is_functional_template__ = false;
   /* style inject */
   
   /* style inject SSR */
@@ -418,13 +414,13 @@ __vue_render__$1._withStripped = true;
   
 
   
-  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,
+  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,
@@ -432,8 +428,9 @@ __vue_render__$1._withStripped = true;
   );
 
 var BaseElementMixin = {
-  render: function render(createElement) {
-    return createElement('div', {
+  render: function render() {
+    return h('div', {
+      id: this.mountId,
       domProps: {
         id: this.mountId
       }
@@ -458,11 +455,11 @@ var BaseElementMixin = {
       initializeRebilly(this.configuration).then(function (Rebilly) {
         try {
           if (_this.elementType.startsWith('card')) {
-            _this.element = Rebilly.card.mount(selector, _this.elementType);
+            _this.element = markRaw(Rebilly.card.mount(selector, _this.elementType));
           } else if (_this.elementType === 'iban') {
-            _this.element = Rebilly.iban.mount(selector);
+            _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 = Rebilly.bban.mount(selector, _this.elementType);
+            _this.element = markRaw(Rebilly.bban.mount(selector, _this.elementType));
           }
 
           _this.element.on('ready', function () {
@@ -496,9 +493,10 @@ var BaseElementMixin = {
   }
 };
 
-var DigitalWalletMixin = {
-  render: function render(createElement) {
-    return createElement('div', {
+var GooglePayMixin = {
+  render: function render() {
+    return h('div', {
+      id: this.mountId,
       domProps: {
         id: this.mountId
       }
@@ -508,9 +506,7 @@ var DigitalWalletMixin = {
     id: {
       type: String
     },
-    configuration: {},
-    form: {},
-    extraData: {}
+    configuration: {}
   },
   data: function data() {
     return {
@@ -524,40 +520,27 @@ var DigitalWalletMixin = {
 
       initializeRebilly(this.configuration).then(function (Rebilly) {
         try {
-          var form = document.getElementById('rebilly-form') || _this.form;
-
-          if (_this.elementType === 'digitalWallet') {
-            _this.element = Rebilly.digitalWallet.mount(selector, {
-              type: 'googlePay',
-              form: form,
-              extraData: _this.extraData
-            });
-
-            _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');
-            });
-          } else if (_this.elementType === 'applePay') {
-            _this.element = Rebilly.applePay.mount(selector, {
-              form: form,
-              extraData: _this.extraData
-            });
-          }
+          _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
@@ -592,9 +575,10 @@ var DigitalWalletMixin = {
   }
 };
 
-var ApplePayMixin = {
-  render: function render(createElement) {
-    return createElement('div', {
+var NonIframeElementMixin = {
+  render: function render() {
+    return h('div', {
+      id: this.mountId,
       domProps: {
         id: this.mountId
       }
@@ -618,7 +602,15 @@ var ApplePayMixin = {
 
       initializeRebilly(this.configuration).then(function (Rebilly) {
         try {
-          _this.element = Rebilly.applePay.mount(selector);
+          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:
@@ -724,14 +716,14 @@ var RebillyIban = {
   },
   mixins: [BaseElementMixin]
 };
-var RebillyDigitalWallet = {
-  name: 'rebilly-digital-wallet',
+var RebillyGooglePay = {
+  name: 'rebilly-google-pay',
   data: function data() {
     return {
-      elementType: FIELD_TYPES.REBILLY_DIGITAL_WALLET
+      elementType: FIELD_TYPES.REBILLY_GOOGLE_PAY
     };
   },
-  mixins: [DigitalWalletMixin]
+  mixins: [GooglePayMixin]
 };
 var RebillyApplePay = {
   name: 'rebilly-apple-pay',
@@ -740,7 +732,16 @@ var RebillyApplePay = {
       elementType: FIELD_TYPES.REBILLY_APPLE_PAY
     };
   },
-  mixins: [ApplePayMixin]
+  mixins: [NonIframeElementMixin]
+};
+var RebillyPaypal = {
+  name: 'rebilly-paypal',
+  data: function data() {
+    return {
+      elementType: FIELD_TYPES.REBILLY_PAYPAL
+    };
+  },
+  mixins: [NonIframeElementMixin]
 };
 
 var FramePay = {
@@ -751,5 +752,4 @@ var FramePay = {
   }
 };
 
-export default FramePay;
-export { RebillyApplePay, RebillyBbanAccountNumber, RebillyBbanAccountType, RebillyBbanRoutingNumber, RebillyCard, RebillyCardCvv, RebillyCardExpiration, RebillyCardNumber, RebillyDigitalWallet, FIELD_TYPES as RebillyFieldTypes, __vue_component__ as RebillyForm, RebillyIban, __vue_component__$1 as RebillyToken, createToken, updateConfig };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/framepay-vue",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Official Vue wrapper for Rebilly FramePay",
   "author": "Rebilly",
   "repository": "https://github.com/Rebilly/framepay-vue",
@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@testing-library/cypress": "^7.0.2",
-    "@vue/cli-plugin-babel": "^4.5.9",
-    "@vue/cli-plugin-eslint": "^4.5.9",
-    "@vue/cli-plugin-unit-jest": "^4.5.9",
-    "@vue/cli-service": "^4.5.9",
+    "@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",
@@ -56,8 +56,8 @@
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "vue": "^2.4.0",
-    "vue-template-compiler": "^2.5.21"
+    "vue": "^2.7.10",
+    "vue-template-compiler": "^2.7.10"
   },
   "eslintConfig": {
     "root": true,