-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of https://github.com/waiap/vue_example
- Loading branch information
Showing
14 changed files
with
323 additions
and
257 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,40 @@ | ||
| # vue_integration | ||
| # Vuejs example integration for WAIAP Payment Wall | ||
|
|
||
| ## Project setup | ||
|
|
||
| You need to pre-install the project's dependencies. | ||
|
|
||
| ``` | ||
| npm install | ||
| ``` | ||
|
|
||
| ### Compiles and hot-reloads for development | ||
|
|
||
| This serves the front-end app. | ||
|
|
||
| ``` | ||
| npm run serve | ||
| ``` | ||
|
|
||
| ### hot-reload node backend | ||
|
|
||
| This serves an API backend | ||
|
|
||
| ``` | ||
| node src/server.js | ||
| npm run serve_api | ||
| ``` | ||
|
|
||
| ### follow instrucctions to run ngrok - required for local environment | ||
|
|
||
| Needs to run the application with a valid url. | ||
|
|
||
| For testing ngrok can be used. | ||
| For testing ngrok can be used. | ||
|
|
||
| ``` | ||
| https://dashboard.ngrok.com/get-started | ||
| ``` | ||
|
|
||
| Update the generated ngrok url in ./src/server.js const _notify_url='<generated-ngrok-url>' | ||
|
|
||
|
|
||
| <!-- ### Compiles and minifies for production | ||
| ``` | ||
| npm run build | ||
| ``` | ||
| ### Lints and fixes files | ||
| ``` | ||
| npm run lint | ||
| ``` | ||
| ## Configuration | ||
|
|
||
| ### Customize configuration | ||
| See [Configuration Reference](https://cli.vuejs.org/config/). --> | ||
| Setup notify_url to your NGROK's public URL each time before launching the api | ||
| service or the front-end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| const CONFIG = { | ||
| endpoint: "https://sandbox.sipay.es/pwall/api/v1/actions", | ||
| key: "your-key", | ||
| identity: "your-identity", | ||
| secret: "your-secret", | ||
| resource: "your-resource", | ||
| mode: "sha256", | ||
| notify_url: "https://url.ngrok.com/checkout" | ||
| }; | ||
|
|
||
| module.exports = CONFIG; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,58 @@ | ||
| <template> | ||
| <div> | ||
| <div id="app"> | ||
| </div> | ||
| <table id=result class="table table-dark" style="display: none"> | ||
| <tr><td>Tarjeta</td><td id=masked_card></td></tr> | ||
| <tr><td>Ticket</td><td id=order></td></tr> | ||
| <tr><td>Banco</td><td id=authorizator></td></tr> | ||
| <tr><td>Moneda</td><td id=currency></td></tr> | ||
| <tr><td>ID Interno</td><td id=transaction_id></td></tr> | ||
| <div id="app"></div> | ||
| <table id="result" class="table table-dark" style="display: none"> | ||
| <tr> | ||
| <td>Tarjeta</td> | ||
| <td id="masked_card"></td> | ||
| </tr> | ||
| <tr> | ||
| <td>Ticket</td> | ||
| <td id="order"></td> | ||
| </tr> | ||
| <tr> | ||
| <td>Banco</td> | ||
| <td id="authorizator"></td> | ||
| </tr> | ||
| <tr> | ||
| <td>Moneda</td> | ||
| <td id="currency"></td> | ||
| </tr> | ||
| <tr> | ||
| <td>ID Interno</td> | ||
| <td id="transaction_id"></td> | ||
| </tr> | ||
| </table> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'Pwall', | ||
| name: "Pwall", | ||
| mounted() { | ||
| let vm = this; | ||
| document.dispatchEvent(new Event('payment_wall_load_app')); | ||
| // THIS IS REQUIRED for all integrations. | ||
| // This makes all redirect-based methods to finish its operation | ||
| document.getElementById('app').addEventListener( | ||
| 'payment_wall_drawn', | ||
| function() { | ||
| if (vm.$route.query.request_id || vm.$route.query.reference_id) { | ||
| document.getElementById('app').dispatchEvent( | ||
| new CustomEvent('payment_wall_process_redirect', { | ||
| detail: { | ||
| request_id: vm.$route.query.request_id || vm.$route.query.reference_id, | ||
| method: vm.$route.query.method | ||
| } | ||
| }) | ||
| ); | ||
| } | ||
| }); | ||
| let vm = this; | ||
| document.dispatchEvent(new Event("payment_wall_load_app")); | ||
| // THIS IS REQUIRED for all integrations. | ||
| // This makes all redirect-based methods to finish its operation | ||
| document | ||
| .getElementById("app") | ||
| .addEventListener("payment_wall_drawn", function() { | ||
| if (vm.$route.query.request_id || vm.$route.query.reference_id) { | ||
| document.getElementById("app").dispatchEvent( | ||
| new CustomEvent("payment_wall_process_redirect", { | ||
| detail: { | ||
| request_id: | ||
| vm.$route.query.request_id || vm.$route.query.reference_id, | ||
| method: vm.$route.query.method, | ||
| error: vm.$route.query.error || null | ||
| } | ||
| }) | ||
| ); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <!-- Add "scoped" attribute to limit CSS to this component only --> | ||
| <style scoped> | ||
| </style> | ||
| <style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,12 @@ | ||
| import Vue from 'vue' | ||
| import App from './App.vue' | ||
| import router from './router' | ||
| import store from './store' | ||
| import Vue from "vue"; | ||
| import App from "./App.vue"; | ||
| import router from "./router"; | ||
| import store from "./store"; | ||
|
|
||
| Vue.config.productionTip = false | ||
| Vue.config.productionTip = false; | ||
|
|
||
| new Vue({ | ||
| router, | ||
| store, | ||
| render: h => h(App) | ||
| }).$mount('#app2') | ||
| }).$mount("#app2"); |
Oops, something went wrong.