Bonjour
J'essaie d'intégrer Stripe dans mon application Vue CLI.
Pour ce faire, j'ai décidé d'utiliser le package vue-stripe-checkout.
Je précise que toutes les données nécessaires au bon déroulement du paiement sont stockées dans le store de mon application pendant la complétion d'un formulaire.
Au début, tout s'est bien passé, j'ai suivis l'exemple de la démo proposé par le package et j'ai parcourut la documentation de Stripe.
C'est à partir de là que je bloque
Le package demande différentes données comme "items". Le problème est que "items" nécessite un SKU, mais je n'en ai pas. J'ai donc préféré utiliser "lineItems" mais là aussi, je dois renseigner un Price Object que je n'ai pas
J'ai trouvé comment créer ce Price Object ici mais je ne sais pas quand, comment et où le faire dans mon application
Voici mon code
J'essaie d'intégrer Stripe dans mon application Vue CLI.
Pour ce faire, j'ai décidé d'utiliser le package vue-stripe-checkout.
Je précise que toutes les données nécessaires au bon déroulement du paiement sont stockées dans le store de mon application pendant la complétion d'un formulaire.
Au début, tout s'est bien passé, j'ai suivis l'exemple de la démo proposé par le package et j'ai parcourut la documentation de Stripe.
C'est à partir de là que je bloque
Le package demande différentes données comme "items". Le problème est que "items" nécessite un SKU, mais je n'en ai pas. J'ai donc préféré utiliser "lineItems" mais là aussi, je dois renseigner un Price Object que je n'ai pas
J'ai trouvé comment créer ce Price Object ici mais je ne sais pas quand, comment et où le faire dans mon application
Voici mon code
<template>
<stripe-checkout
ref="checkoutRef"
[langue]k="publishableKey"
:lineItems="lineItems"
:successUrl="successUrl"
:cancelUrl="cancelUrl"
>
<template slot="checkout-button">
<button @click="checkout">Payment</button>
</template>
</stripe-checkout>
</template>
<script>
import { StripeCheckout } from 'vue-stripe-checkout';
export default {
components: {
StripeCheckout
},
data() {
return {
loading: false,
publishableKey: 'pk_test',
// redirectToCheckout
lineItems: [
{
price: '', // Price Object
quantity: 1,
}
],
mode: 'payment',
customerEmail: null, // Assigned in created lifecycle hook
successUrl: 'https://success_url.com',
cancelUrl: 'https://cancel_url.com',
};
},
methods: {
checkout() {
this.$refs.checkoutRef.redirectToCheckout();
}
}
}
</script>