@dakingindanorf/hive/plugins/hive-stripe.js

A template for creating a nuxt generated static site using Netlify CMS to power the backend. Individual site components can be managed through Bit

import Vue from 'vue'
import { loadStripe } from '@stripe/stripe-js'

const HiveStripe = ({ app }, inject) => {
    let stripe
    let elements
    let paymentIntent
    let card

    /*
    * initHiveStripe
    * Called on drawer mount to init Stripe
    */
    const initHiveStripe = async() => {
        stripe = await loadStripe(`${process.env.STRIPE_PUBLISHABLE_KEY}`)
    }
    inject('initHiveStripe', initHiveStripe)

    /*
    * initElements
    * Called on drawer mount so Stripe Elements can load
    */
    const initElements = async() => {
        const style = {
            base: {
                'color': '#32325d',
                'fontFamily': 'Arial, sans-serif',
                'fontSmoothing': 'antialiased',
                'fontSize': '16px',
                '::placeholder': {
                    color: '#32325d'
                }
            },
            invalid: {
                'fontFamily': 'Arial, sans-serif',
                'color': '#fa755a',
                'iconColor': '#fa755a'
            }
        }
        elements = await stripe.elements()
        await elements.create('card', { style })
        card = await elements.getElement('card')
        card.mount('#card-element')
    }
    inject('initElements', initElements)

    const createIntent = async(email, quantity) => {
        paymentIntent = await app.$axios.post('/.netlify/functions/stripe-payment-intent',
            {
                quantity,
                email
            }
        )

        return paymentIntent
    }
    inject('createIntent', createIntent)

    const updateIntent = async(item, value) => {
        paymentIntent = await stripe.paymentIntents.update(
            paymentIntent.client_secret,
            {
                params: {
                    item: value
                }
            }
        )
    }
    inject('updateIntent', updateIntent)

    const stripePay = async(name, email) => {
        await stripe.confirmCardPayment(paymentIntent.data.client_secret, {
            payment_method: {
                card,
                billing_details: {
                    name,
                    email
                }
            },
            receipt_email: email
        }).then((result) => {
            app.$generateLicense(email)
        })
    }
    inject('stripePay', stripePay)
}

export default HiveStripe

if (typeof window !== 'undefined' && window.Vue) {
    Vue.use(HiveStripe)
}