11484 sujets

JavaScript, DOM et API Web HTML5

Bonjour Smiley smile

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 Smiley ohwell

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 Smiley hum

J'ai trouvé comment créer ce Price Object ici mais je ne sais pas quand, comment et où le faire dans mon application Smiley confus

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>