Use postmessage api to update attributes.

Author: libitx

package.json

@@ -28,7 +28,6 @@
     "karma-jasmine": "^1.1.2",
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-webpack": "^3.0.5",
-    "qs": "^6.5.2",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.6.2",
     "tachyons": "^4.11.1",

readme.md

@@ -59,13 +59,15 @@ The following properties can be set on the component:
 | `editable`    | `Boolean`                 | `false` |
 | `currency`    | `String`                  | `'USD'` |
 | `label`       | `String`                  | `null`  |
+| `successMessage` | `String`               | `null`  |
 | `opReturn`    | `String`                  | `null`  |
 | `outputs`     | `Array`                   | `[]`    |
 | `clientIdentifier` | `String`             | `null`  |
 | `buttonId`    | `String` or `Number`      | `null`  |
 | `buttonData`  | `String` or `Number`      | `null`  |
 | `type`        | `String` - `buy` or `tip` | `'buy'` |
 | `devMode`     | `Boolean`                 | `false` |
+| `disabled`    | `Boolean`                 | `false` |
 
 An array of `outputs` can be set **instead of the `to`, `amount` and `currency` properties**. Each output output object has the following parameters:
 

src/components/MoneyButton.vue

@@ -23,7 +23,6 @@
 </template>
 
 <script>
-import qs from 'qs'
 import config from 'config'
 import Popup from 'components/Popup.vue'
 import LoaderIcon from 'components/Loader.vue'
@@ -35,13 +34,15 @@ export default {
     editable:         { type: Boolean, default: undefined },
     currency:         { type: String, default: 'USD' },
     label:            { type: String, required: true },
+    successMessage:   String,
     opReturn:         String,
     outputs:          { type: Array, default: () => [] },
     clientIdentifier: String,
     buttonId:         true,
     buttonData:       true,
     type:             { type: String, default: 'buy' },
-    devMode:          { type: Boolean, default: undefined }
+    devMode:          { type: Boolean, default: undefined },
+    disabled:         { type: Boolean, default: undefined }
   },
 
   data() {
@@ -51,64 +52,70 @@ export default {
       size: {
         width: '280px',
         height: '50px'
-      }
+      },
+      iframeSrc: config.iframeUrl.concat('?', 'format=postmessage')
     }
   },
 
   mounted() {
-    window.addEventListener('message', this.handleMessage, false);
+    window.addEventListener('message', this.handleMessage, false)
   },
 
   destroyed() {
-    window.removeEventListener('message', this.handleMessage, false);
-  },
-
-  watch: {
-    iframeSrc(val) {
-      this.loading = true;
-    }
+    window.removeEventListener('message', this.handleMessage, false)
   },
 
   computed: {
-    iframeSrc() {
-      return config.iframeUrl.concat('?', qs.stringify(this.queryParams));
-    },
-
     queryParams() {
       return {
-        to:   this.to,
-        amt:  this.amount,
-        edt:  this.editable,
-        ccy:  this.outputs.length ? undefined : this.currency,
-        lbl:  this.label,
-        opd:  this.opReturn,
-        os:   this.outputs.length ? JSON.stringify(this.outputs) : undefined,
-        cid:  this.clientIdentifier,
-        bid:  this.buttonId,
-        bdt:  this.buttonData,
-        t:    this.type,
-        dev:  this.devMode
+        to:     this.to,
+        amt:    this.amount,
+        edt:    this.editable,
+        ccy:    this.outputs.length ? undefined : this.currency,
+        lbl:    this.label,
+        scsmsg: this.successMessage,
+        opd:    this.opReturn,
+        os:     this.outputs.length ? JSON.stringify(this.outputs) : undefined,
+        cid:    this.clientIdentifier,
+        bid:    this.buttonId,
+        bdt:    this.buttonData,
+        t:      this.type,
+        dev:    this.devMode,
+        dsbd:   this.disabled
       }
     },
   },
 
+  watch: {
+    queryParams(params) {
+      this.postMessage('attributes-updated', params)
+    }
+  },
+
   methods: {
     loaded(e) {
+      this.postMessage('attributes-updated', this.queryParams)
       setTimeout(() => { this.loading = false }, 2000)
     },
 
+    postMessage(topic, payload) {
+      this.$refs.iframe.contentWindow.postMessage({
+        v1: { topic, payload }
+      }, config.iframeUrl)
+    },
+
     handleMessage(e) {
       if ( this.$refs['iframe'] && e.source === this.$refs['iframe'].contentWindow ) {
         const { error, size, payment, popup } = e.data;
 
         // Check valid iframe origin
         if ( e.origin !== config.iframeOrigin) {
-          console.log(`vue-money-button: postMessage: wrong origin: ${e.origin} should be ${config.iframeOrigin}`);
+          console.log(`vue-money-button: postMessage: wrong origin: ${e.origin} should be ${config.iframeOrigin}`)
           return
         }
 
         if (process.env.NODE_ENV === 'development')
-          console.log('vue-money-button: Received message', e.data);
+          console.log('vue-money-button: Received message', e.data)
 
         // If popup
         if ( popup ) {

src/demo/App.vue

@@ -34,7 +34,7 @@
         to="74"
         :amount="amount"
         :label="label"
-        type="tip"
+        success-message="Yehah!"
 
         @payment="onPayment"
         @error="onError"

yarn.lock

@@ -4079,7 +4079,7 @@ qs@6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
 
-qs@6.5.2, qs@^6.5.2, qs@~6.5.2:
+qs@6.5.2, qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"