Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

This repository is not maintained any more!!!

Feel free to fork it

Introduction

VueJS component wrapper for Khalti SDK

Demo

https://codesandbox.io/s/k574mxpl17

Installation

Install dependency

npm install khalti-web --save

Install component

npm install vue-khalti --save

Usage

Browser
<script src="dist/vue-khalti-min.js"></script>
<script src="path/to/vue.js"></script>
<script>
	Vue.use(VueKhalti)
</script>
Build
<script>
	import VueKhalti from 'vue-khalti'
	export default {
		components: { VueKhalti }
	}
</script>
<template>
	<div>
		<vue-khalti />
	</div>
</template>

Overwrite default config with your config

data () {
	return {
		khaltiConfig: {
			"publicKey": "YOUR_PUBLIC_KEY",
		    "productIdentity": "YOUR_PRODUCT_ID",
		    "productName": "YOUR_PRODUCT_NAME",
		    "productUrl": "YOUR_PRODUCT_URL",
		    "amount": 1000,
		    "eventHandler": {
		        onSuccess (payload) {
		            console.log(payload);
		        },
		        onError (error) {
		            console.log(error);
		        },
		        onClose () {
		            console.log('widget is closing');
		        }
		    }
		}
	}
}
<vue-khalti v-bind="khaltiConfig" />

Change apperance of the component

Wrap your code inside <vue-khalti>.
<vue-khalti ref="khaltiCheckout">
	<img
		src="https://d7vw40z4bofef.cloudfront.net/static/www/images/khaltilogo.png"
		@click="onKhaltiClick" />			
</vue-khalti>
Access the component via $refs. The default event handler is onClick.
methods: {
	onKhaltiClick () {
		const khaltiCheckout = this.$refs.khaltiCheckout
		khaltiCheckout.onClick()
	}
}

About

A Vue.js component that integrates Khalti Payment Gateway

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published