Skip to content

Instantly share code, notes, and snippets.

@hypeJunction
Last active July 25, 2019 18:14
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save hypeJunction/d38a01d8ac758e09eff47956f21d3815 to your computer and use it in GitHub Desktop.
Submit Form
<template>
<div>
<div v-if="isSuccess">
{{ isSuccess }}
</div>
<n-form v-else @submit="submitForm">
<n-stripe-card
v-model="model.stripeToken"
label="Secure Payment Info"
:rules="rules.stripeToken"
:options="stripeOptions"
/>
</n-form>
</div>
</template>
<script>
export default {
data () {
return {
isSuccess: null,
price: 20000,
model: {
stripeToken: null,
},
stripeOptions: {
hidePostalCode: true,
},
};
},
methods: {
submitForm () {
const confirmPayment = (data) => {
return this.$axios.post('/api/courses/confirmPayment', data).then((response) => {
this.isSuccess = response.data.message;
});
};
return this.$axios.post('/api/courses/enrol', {
token: this.model.stripeToken,
price: this.price,
}).then(async (response) => {
if (response.data.payment.requiresAction) {
// We have a payment intent with a payment method that requires 3D secure confirmation
const stripe = await this.$stripe.load().then((stripe) => stripe(this.$stripe.publishableKey));
const result = await stripe.handleCardAction(response.data.payment.paymentIntentClientSecret);
if (result.error) {
// 3D secure failed
return confirmPayment({
paymentIntentId: null,
});
} else {
// 3D Secure succeeded
return confirmPayment({
paymentIntentId: response.data.payment.paymentIntentId,
});
}
} else {
// Payment method does not require any further actions
return confirmPayment({
paymentIntentId: response.data.payment.paymentIntentId,
});
}
}).catch(this.$error);
},
},
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment