@rebilly/framepay-vue 1.1.6 → 1.2.0

package/README.md

@@ -4,53 +4,55 @@
 
 Supported: Vue 2.4+
 
-This is the repo for the official Vue.js wrapper for Rebilly's [FramePay](https://rebilly.github.io/framepay-docs/). 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/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.
 
 ## Table of Contents
-- [Table of Contents](#table-of-contents)
-- [FramePay Documentation](#framepay-documentation)
-- [Demos](#demos)
-- [Installation](#installation)
-- [Getting Started](#getting-started)
-  - [Initialization](#initialization)
-    - [At startup](#at-startup)
-    - [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)
-    - [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)
-    - [Handle token manually](#handle-token-manually)
-- [Advanced Options](#advanced-options)
-  - [Multiple Payment Methods](#multiple-payment-methods)
-    - [v-if](#v-if)
-    - [v-show](#v-show)
-  - [Styling](#styling)
-    - [Built in Styling](#built-in-styling)
-    - [Custom Styling](#custom-styling)
-  - [Events](#events)
-    - [`rebilly-form`](#rebilly-form)
-    - [on payment method components](#on-payment-method-components)
-  - [Validation](#validation)
-  - [Element IDs](#element-ids)
-- [Available Components and Methods](#available-components-and-methods)
-  - [Methods](#methods)
-    - [`createToken` Proxy Method](#createtoken-proxy-method)
-    - [The `Rebilly` Object](#the-rebilly-object)
-  - [Components](#components)
-    - [`RebillyForm`](#rebillyform)
-    - [`RebillyToken`](#rebillytoken)
-    - [Payment Method Components](#payment-method-components)
-      - [Combined Credit Card field](#combined-credit-card-field)
-      - [Separate Credit Card fields](#separate-credit-card-fields)
-      - [Separate Bank Account fields](#separate-bank-account-fields)
-      - [IBAN (International Bank Account Number) field](#iban-international-bank-account-number-field)
-      - [Props](#props)
-- [Further Reading](#further-reading)
+- [framepay-vue](#framepay-vue)
+  - [Table of Contents](#table-of-contents)
+  - [FramePay Documentation](#framepay-documentation)
+  - [Demos](#demos)
+  - [Installation](#installation)
+  - [Getting Started](#getting-started)
+    - [Initialization](#initialization)
+      - [At startup](#at-startup)
+      - [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)
+      - [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)
+      - [Handle token manually](#handle-token-manually)
+  - [Advanced Options](#advanced-options)
+    - [Multiple Payment Methods](#multiple-payment-methods)
+      - [v-if](#v-if)
+      - [v-show](#v-show)
+    - [Styling](#styling)
+      - [Built in Styling](#built-in-styling)
+      - [Custom Styling](#custom-styling)
+    - [Events](#events)
+      - [`rebilly-form`](#rebilly-form)
+      - [on payment method components](#on-payment-method-components)
+    - [Validation](#validation)
+    - [Element IDs](#element-ids)
+  - [Available Components and Methods](#available-components-and-methods)
+    - [Methods](#methods)
+      - [`createToken` Proxy Method](#createtoken-proxy-method)
+      - [The `Rebilly` Object](#the-rebilly-object)
+    - [Components](#components)
+      - [`RebillyForm`](#rebillyform)
+      - [`RebillyToken`](#rebillytoken)
+      - [Payment Method Components](#payment-method-components)
+        - [Combined Credit Card field](#combined-credit-card-field)
+        - [Separate Credit Card fields](#separate-credit-card-fields)
+        - [Separate Bank Account fields](#separate-bank-account-fields)
+        - [IBAN (International Bank Account Number) field](#iban-international-bank-account-number-field)
+        - [Props](#props)
+  - [Further Reading](#further-reading)
 
 ## FramePay Documentation
 
-For more information on FramePay see its [official documentation](https://rebilly.github.io/framepay-docs/) or [repository](https://github.com/Rebilly/framepay-docs).
+For more information on FramePay see its [official documentation](https://www.rebilly.com/docs/developer-docs/framepay/).
 
 ## Demos
 - [Basic card example](https://codesandbox.io/s/framepay-vue-basic-card-example-ydr7s)
@@ -161,20 +163,36 @@ The script will only be loaded the first time `created()` is called, so you can
 `framepay-vue` offers three sets of payment method components:
 
 - `RebillyCard` automatically mounts the combined credit card payment method
-- `RebillyCardCvv`, `RebillyCardExpiry`, and `RebillyCardNumber` mount three separate components for collecting credit info
+- `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.
 
 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:
+```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
 
 The default behavior of `RebillyForm` is to intercept the regular submit event, execute `Rebilly.createToken()`, and then submit the form with the newly created token attached. Any inputs that include `data-rebilly` attribute with the appropriate value will be sent to `Rebilly.createToken()`.
 
 ```html
-<rebilly-form @error="" :extraData="{}">
+<rebilly-form @error="" @token-ready="" :extraData="{}">
 	<input data-rebilly="firstName">
 	<input data-rebilly="lastName">
 	<rebilly-card></rebilly-card>
@@ -195,6 +213,8 @@ 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.
+
 See here for all arguments to `extraData`: https://rebilly.github.io/framepay-docs/reference/rebilly.html#extra-data.
 
 See here for list of `data-rebilly` types: https://rebilly.github.io/framepay-docs/reference/rebilly.html#data-rebilly-fields.
@@ -466,14 +486,14 @@ These components handle the mount/unmount lifecycle of a Framepay field, and can
 
 ##### Combined Credit Card field
 
-- `RebillyCard` - mounts a combined payment card field for card number, CVV and expiry
+- `RebillyCard` - mounts a combined payment card field for card number, CVV and expiration
 
 ##### Separate Credit Card fields
 
 These elements must all be mounted in the same form in order to successfully create a token.
 
 - `RebillyCardCvv` - mounts a CVV field
-- `RebillyCardExpiry` - mounts a credit card expiry field
+- `RebillycardExpiration` - mounts a credit card expiration field
 - `RebillyCardNumber` - mounts a credit card number field
 
 ##### Separate Bank Account fields

package/dist/build.js

@@ -110,7 +110,9 @@ function initializeRebilly () {
           Rebilly.initialize(configuration);
         }
       } catch (e) {
-        throw new InitializeError();
+        throw new InitializeError({
+          details: e
+        });
       }
     });
   });
@@ -121,11 +123,13 @@ function initializeRebilly () {
 var REBILLY_CARD = 'card';
 var REBILLY_CARD_CVV = 'cardCvv';
 var REBILLY_CARD_NUMBER = 'cardNumber';
-var REBILLY_CARD_EXPIRATION = 'cardExpiry';
+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_DIGITAL_WALLET = 'digitalWallet';
+var REBILLY_APPLE_PAY = 'applePay';
 var FIELD_TYPES = {
   REBILLY_CARD: REBILLY_CARD,
   REBILLY_CARD_CVV: REBILLY_CARD_CVV,
@@ -134,7 +138,9 @@ var FIELD_TYPES = {
   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_IBAN: REBILLY_IBAN,
+  REBILLY_DIGITAL_WALLET: REBILLY_DIGITAL_WALLET,
+  REBILLY_APPLE_PAY: REBILLY_APPLE_PAY
 };
 
 function createToken (form, extraData) {
@@ -183,13 +189,13 @@ function _objectSpread2(target) {
     var source = arguments[i] != null ? arguments[i] : {};
 
     if (i % 2) {
-      ownKeys(source, true).forEach(function (key) {
+      ownKeys(Object(source), true).forEach(function (key) {
         _defineProperty(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys(source).forEach(function (key) {
+      ownKeys(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -297,8 +303,8 @@ function normalizeComponent(template, style, script, scopeId, isFunctionalTempla
 
     options._ssrRegister = hook;
   } else if (style) {
-    hook = shadowMode ? function () {
-      style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
+    hook = shadowMode ? function (context) {
+      style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
     } : function (context) {
       style.call(this, createInjector(context));
     };
@@ -323,8 +329,6 @@ function normalizeComponent(template, style, script, scopeId, isFunctionalTempla
   return script;
 }
 
-var normalizeComponent_1 = normalizeComponent;
-
 /* script */
 const __vue_script__ = script;
 
@@ -355,15 +359,19 @@ __vue_render__._withStripped = true;
   
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var RebillyForm = normalizeComponent_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,
     undefined
   );
@@ -406,20 +414,23 @@ __vue_render__$1._withStripped = true;
   
   /* style inject SSR */
   
+  /* style inject shadow dom */
+  
 
   
-  var RebillyToken = normalizeComponent_1(
+  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
   );
 
-/* eslint-disable func-names */
 var BaseElementMixin = {
   render: function render(createElement) {
     return createElement('div', {
@@ -485,6 +496,162 @@ var BaseElementMixin = {
   }
 };
 
+var DigitalWalletMixin = {
+  render: function render(createElement) {
+    return createElement('div', {
+      domProps: {
+        id: this.mountId
+      }
+    });
+  },
+  props: {
+    id: {
+      type: String
+    },
+    configuration: {},
+    form: {},
+    extraData: {}
+  },
+  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 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
+            });
+          }
+
+          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
+          });
+        }
+      });
+    }
+  },
+  watch: {
+    configuration: function configuration(value) {
+      if (value) {
+        updateConfig(value);
+      }
+    }
+  },
+  created: function created() {
+    this.mountElement("#".concat(this.mountId));
+  },
+  beforeDestroy: function beforeDestroy() {
+    if (this.element) {
+      this.element.destroy();
+    }
+  }
+};
+
+var ApplePayMixin = {
+  render: function render(createElement) {
+    return createElement('div', {
+      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 = Rebilly.applePay.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
+          });
+        }
+      });
+    }
+  },
+  watch: {
+    configuration: function configuration(value) {
+      if (value) {
+        updateConfig(value);
+      }
+    }
+  },
+  created: function created() {
+    this.mountElement("#".concat(this.mountId));
+  },
+  beforeDestroy: function beforeDestroy() {
+    if (this.element) {
+      this.element.destroy();
+    }
+  }
+};
+
 var RebillyCard = {
   name: 'rebilly-card',
   data: function data() {
@@ -504,7 +671,7 @@ var RebillyCardCvv = {
   mixins: [BaseElementMixin]
 };
 var RebillyCardExpiration = {
-  name: 'rebilly-card-expiry',
+  name: 'rebilly-card-expiration',
   data: function data() {
     return {
       elementType: FIELD_TYPES.REBILLY_CARD_EXPIRATION
@@ -557,6 +724,24 @@ var RebillyIban = {
   },
   mixins: [BaseElementMixin]
 };
+var RebillyDigitalWallet = {
+  name: 'rebilly-digital-wallet',
+  data: function data() {
+    return {
+      elementType: FIELD_TYPES.REBILLY_DIGITAL_WALLET
+    };
+  },
+  mixins: [DigitalWalletMixin]
+};
+var RebillyApplePay = {
+  name: 'rebilly-apple-pay',
+  data: function data() {
+    return {
+      elementType: FIELD_TYPES.REBILLY_APPLE_PAY
+    };
+  },
+  mixins: [ApplePayMixin]
+};
 
 var FramePay = {
   install: function install(Vue) {
@@ -567,4 +752,4 @@ var FramePay = {
 };
 
 export default FramePay;
-export { RebillyBbanAccountNumber, RebillyBbanAccountType, RebillyBbanRoutingNumber, RebillyCard, RebillyCardCvv, RebillyCardExpiration, RebillyCardNumber, FIELD_TYPES as RebillyFieldTypes, RebillyForm, RebillyIban, RebillyToken, createToken, updateConfig };
+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 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@rebilly/framepay-vue",
-  "version": "1.1.6",
-  "description": "Official Vue wrapper for Rebilly Framepay",
-  "author": "Mathew Sonke <mathew.sonke@rebilly.com>",
+  "version": "1.2.0",
+  "description": "Official Vue wrapper for Rebilly FramePay",
+  "author": "Rebilly",
   "repository": "https://github.com/Rebilly/framepay-vue",
   "license": "MIT",
   "main": "dist/build.js",
@@ -18,37 +18,44 @@
     "framepay-vue"
   ],
   "scripts": {
-    "serve": "cd ./dev-app && vue-cli-service serve",
     "build": "rollup -c",
+    "cypress:headless": "cypress run",
+    "cypress:gui": "cypress open",
     "lint": "vue-cli-service lint",
-    "test": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
+    "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"
   },
   "peerDependencies": {
     "vue": "^2.4.0"
   },
   "dependencies": {
-    "core-js": "^2.6.5",
+    "core-js": "^3.8.0",
     "dotenv": "^8.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-plugin-e2e-cypress": "^3.7.0",
-    "@vue/cli-plugin-eslint": "^3.7.0",
-    "@vue/cli-plugin-unit-jest": "^3.8.0",
-    "@vue/cli-service": "^3.7.0",
-    "@vue/eslint-config-airbnb": "^4.0.0",
-    "@vue/test-utils": "1.0.0-beta.29",
+    "@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/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": "^23.6.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "rollup": "^1.12.3",
+    "babel-jest": "^26.6.3",
+    "cypress": "^6.0.1",
+    "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.0.0",
+    "rollup-plugin-vue": "^5.1.9",
     "vue": "^2.4.0",
     "vue-template-compiler": "^2.5.21"
   },
@@ -59,13 +66,15 @@
     },
     "extends": [
       "plugin:vue/essential",
+      "plugin:cypress/recommended",
       "@vue/airbnb"
     ],
     "rules": {
       "indent": [
         "error",
         4
-      ]
+      ],
+      "func-names": "off"
     },
     "parserOptions": {
       "parser": "babel-eslint"