paystack-vue

VUE 3 Paystack Plugin

A vue 3 component for integrating the paystack payment gateway

Features

• 💚 Vue 3

• ⚡️ Vite - Instant HMR

• 🔥 The <script setup> syntax

• 🦾 TypeScript, of course

Installation

NPM

npm install paystack-vue

USAGE

main.ts

    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="[e-mail]"
                    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