@rebilly/framepay-vue 1.2.0 → 1.4.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

@@ -128,8 +128,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 +140,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) {
@@ -496,7 +498,7 @@ var BaseElementMixin = {
   }
 };
 
-var DigitalWalletMixin = {
+var GooglePayMixin = {
   render: function render(createElement) {
     return createElement('div', {
       domProps: {
@@ -508,9 +510,7 @@ var DigitalWalletMixin = {
     id: {
       type: String
     },
-    configuration: {},
-    form: {},
-    extraData: {}
+    configuration: {}
   },
   data: function data() {
     return {
@@ -524,40 +524,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 = 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,7 +579,7 @@ var DigitalWalletMixin = {
   }
 };
 
-var ApplePayMixin = {
+var NonIframeElementMixin = {
   render: function render(createElement) {
     return createElement('div', {
       domProps: {
@@ -618,7 +605,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 = 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 +719,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 +735,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 = {
@@ -752,4 +756,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__ as RebillyForm, RebillyGooglePay, RebillyIban, RebillyPaypal, __vue_component__$1 as RebillyToken, createToken, updateConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/framepay-vue",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Official Vue wrapper for Rebilly FramePay",
   "author": "Rebilly",
   "repository": "https://github.com/Rebilly/framepay-vue",