julien/vaquant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ (payment) add payment test to about page

Browse Source
This commit is contained in:
Julien Calixte
2020-02-23 01:29:18 +01:00
parent 9644852505
commit def7452a60
7 changed files with 105 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@@ -30,6 +30,7 @@
name="keywords" name="keywords"
content="budget,friends,family,vacation,holidays,shopping" content="budget,friends,family,vacation,holidays,shopping"
/> />
<script src="https://js.stripe.com/v3/"></script>
</head> </head>
<body> <body>

62
src/components/Payment.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div class="payment">
<Card
ref="stripeCard"
class="stripe-card"
:class="{ complete }"
stripe="pk_test_CO1FMasxNSwIX0P9FgzmDMyp"
@change="complete = $event.complete"
/>
<button class="button is-primary" @click="pay" :disabled="!complete">
Payer par carte bleue
</button>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {
Card,
createToken,
confirmPaymentIntent,
instance as Stripe
} from 'vue-stripe-elements-plus'
import IPaymentIntent from '@/models/IPaymentIntent'
import IPayment from '@/models/IPayment'
import notif from '@/utils/notif'
@Component({
components: {
Card
}
})
export default class Payment extends Vue {
private complete: boolean = false
private async pay() {
const paymentIntentResponse = await fetch('http://localhost:9000/payment')
const paymentIntent: IPaymentIntent = await paymentIntentResponse.json()
const data: IPayment | null = await createToken()
if (paymentIntent && data) {
try {
const result = await Stripe.confirmCardPayment(
paymentIntent.clientSecret,
{
payment_method: {
card: (this.$refs.stripeCard as any).$refs.element._element,
billing_details: {
name: 'Julien Calixte',
email: 'juliencalixte@gmail.com'
}
}
}
)
} catch (error) {
notif.error('une erreur est survenue lors de votre paiement')
}
}
}
}
</script>

2
src/messages/fr.ts
View File

@@ -35,7 +35,7 @@ export default {
}, },
about: { about: {
description: ` description: `
Vaquant est une application pour réaliser Vaquant est une application qui réalise
des balances équitables de vos budgets entre des balances équitables de vos budgets entre
amis lors de vos colocations, vacances, séjours, amis lors de vos colocations, vacances, séjours,
voyages, etc.` voyages, etc.`

33
src/models/IPayment.ts Normal file
View File

@@ -0,0 +1,33 @@
export default interface IPayment {
token: {
id: string
object: string
card: {
id: string
object: 'token'
address_city: string | null
address_country: string | null
address_line1: string | null
address_line1_check: string | null
address_line2: string | null
address_state: string | null
address_zip: string
address_zip_check: string
brand: string
country: string
cvc_check: string
dynamic_last4: string | null
exp_month: number
exp_year: number
funding: string
last4: string
name: string | null
tokenization_method: string | null
}
client_ip: string
created: number
livemode: boolean
type: string
used: boolean
}
}

3
src/models/IPaymentIntent.ts Normal file
View File

@@ -0,0 +1,3 @@
export default interface IPaymentIntent {
clientSecret: string
}

1
src/shims-vue.d.ts vendored
View File

@@ -9,3 +9,4 @@ declare module 'crypto-js/aes'
declare module 'crypto-js/enc-utf8' declare module 'crypto-js/enc-utf8'
declare module '@xkeshi/vue-qrcode' declare module '@xkeshi/vue-qrcode'
declare module 'font-color-contrast' declare module 'font-color-contrast'
declare module 'vue-stripe-elements-plus'

5
src/views/About.vue
View File

@@ -1,5 +1,6 @@
<template> <template>
<div class="about no-margin"> <div class="about no-margin">
<Payment />
<img class="logo" src="../assets/logo.svg" title="logo Vaquant" /> <img class="logo" src="../assets/logo.svg" title="logo Vaquant" />
<p class="simple-description" v-t="'about.description'"></p> <p class="simple-description" v-t="'about.description'"></p>
<hr /> <hr />
@@ -9,10 +10,12 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator' import { Component, Vue } from 'vue-property-decorator'
import Payment from '@/components/Payment.vue'
@Component({ @Component({
components: { components: {
'app-resume': () => import('@/components/AppResume.vue') 'app-resume': () => import('@/components/AppResume.vue'),
Payment
} }
}) })
export default class About extends Vue {} export default class About extends Vue {}