    import { createApp } from 'vue'

    import App from './App.vue'
    import PayStack from 'paystack-vue'
    const paystackKey = "pk_test_27c1ac1537f006ecefc74402138941790c586e67"

    const app = createApp(App)

    app.use(PayStack, {key: paystackKey})

    app.mount('#app')

App.vue(or any component)

    <script setup lang="ts">
    const callback = (response) => {
    alert(`Ref: ${response.reference}, status: ${response.status}`)
    }
    const onClose = () => {
    alert("Payment modal closed")
    }
    </script>
    <template>
        <header>

            <div class="wrapper">
                <PayStack
                    :embedInModal="false"
                    :amount="200"
                    :callback="callback"
                    :onClose="onClose"
                    email="eve@mail.com"
                    firstName="firstname"
                    lastName="lastname"
                    paymentButtonClass="payment-button"
                />
            </div>
        </header>
    </template>
    <style>
    .payment-button{
        width: 100%;
        background-color: green;
        border-radius: 10px
    }
    </style>

Example configuration file for npm global usage

For more options checkout the paystack documentation

Deployment

Keys used in this plugin are test keys only. Do well to change them to production ready keys.

Contributing

Fork the repository
Create your feature branch: git checkout -b feature-name
Commit your changes: git commit -am 'Some commit message'
Push to the branch: git push origin feature-name
Submit a pull request

You can reach me on twitter at Utitofon Udoekong

Dont forget to leave a star if you found this useful.

Special shout out to @iamraphson