66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<template>
|
|
<div class="payment">
|
|
<stripe-checkout
|
|
ref="checkoutRef"
|
|
:pk="publishableKey"
|
|
:items="items"
|
|
:successUrl="successUrl"
|
|
:cancelUrl="cancelUrl"
|
|
:clientReferenceId="clientReferenceId"
|
|
:customerEmail="email"
|
|
>
|
|
<template slot="checkout-button">
|
|
<button class="button is-primary" @click="pay">
|
|
Payer par carte bleue
|
|
</button>
|
|
</template>
|
|
</stripe-checkout>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
import { Action, Getter } from 'vuex-class'
|
|
import { StripeCheckout } from 'vue-stripe-checkout'
|
|
import IUser from '@/models/IUser'
|
|
import IPaymentIntent from '@/models/IPaymentIntent'
|
|
import IPayment from '@/models/IPayment'
|
|
import notif from '@/utils/notif'
|
|
|
|
@Component({
|
|
components: {
|
|
StripeCheckout
|
|
}
|
|
})
|
|
export default class Payment extends Vue {
|
|
@Getter
|
|
public user!: IUser | null
|
|
private publishableKey = 'pk_test_CO1FMasxNSwIX0P9FgzmDMyp'
|
|
private successUrl = window.location.href
|
|
private cancelUrl = window.location.href
|
|
private items = [
|
|
{
|
|
plan: 'plan_GmrqYW6obrGUE6',
|
|
quantity: 1
|
|
}
|
|
]
|
|
private checkoutRef: any = null
|
|
|
|
public async mounted() {
|
|
this.checkoutRef = this.$refs.checkoutRef
|
|
}
|
|
|
|
private async pay() {
|
|
this.checkoutRef.redirectToCheckout()
|
|
}
|
|
|
|
private get clientReferenceId() {
|
|
return this.user?.userId ?? ''
|
|
}
|
|
|
|
private get email() {
|
|
return this.user?.email ?? ''
|
|
}
|
|
}
|
|
</script>
|