diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/.env | 1 | ||||
| -rw-r--r-- | client/src/views/Checkout.vue | 38 |
2 files changed, 37 insertions, 2 deletions
diff --git a/client/.env b/client/.env index d9bd11d..127cc55 100644 --- a/client/.env +++ b/client/.env @@ -1 +1,2 @@ VUE_APP_ROOT_API=http://localhost:3000/api +VUE_APP_PAYPAL_CLIENT_ID=your-paypal-client-id diff --git a/client/src/views/Checkout.vue b/client/src/views/Checkout.vue index 8adeb4a..f93fba0 100644 --- a/client/src/views/Checkout.vue +++ b/client/src/views/Checkout.vue @@ -1,8 +1,8 @@ <template> <div class="mt-5"> <div class="row d-flex justify-content-center"> - <div class="col-md-6"> - <ul class="list-group"> + <div class="col-md-6 card"> + <ul class="list-group list-group-flush"> <li v-for="item in cart" :key="item.id" class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> @@ -15,13 +15,24 @@ </ul> <p class="text-center my-3 fw-bold">You can buy {{ cartSize }} items for ${{ cartPrice }}.</p> </div> + <div class="col-md-4 card p-2"> + <div ref="paypal"></div> + </div> </div> </div> </template> <script> +import axios from 'axios'; + export default { name: 'Checkout', + mounted() { + const script = document.createElement("script"); + script.src = `https://www.paypal.com/sdk/js?client-id=${process.env.VUE_APP_PAYPAL_CLIENT_ID}&disable-funding=credit`; + script.addEventListener("load", this.paypalLoaded); + document.body.appendChild(script); + }, computed: { cart() { return this.$store.getters.getCart; @@ -36,6 +47,29 @@ export default { methods: { remove(id) { this.$store.commit('removeFromCart', id); + }, + paypalLoaded() { + const checkoutRequest = {items: this.$store.getters.getCart}; + + window.paypal.Buttons({ + async createOrder() { + const orderId = await axios + .post(`${process.env.VUE_APP_ROOT_API}/transaction/setup`, checkoutRequest) + .then(response => response.data.orderId) + .catch(err => console.error(err)); + + return orderId; + }, + async onApprove(data) { + await axios + .post(`${process.env.VUE_APP_ROOT_API}/transaction/capture`, {orderId: data.orderID}) + .then(() => console.log('Paid successfully!')) + .catch(err => console.error(err)); + }, + onError(err) { + console.error(err); + } + }).render(this.$refs.paypal); } } } |