vue3-paystack
Version:
Paystack Plugin for Vue 3
294 lines (263 loc) • 8.42 kB
JavaScript
;var vue=require('vue');function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}var script = /*#__PURE__*/vue.defineComponent({
name: 'Vue3Paystack',
// vue component name
props: {
// styles
buttonClass: {
type: String,
default: ""
},
buttonText: {
type: String,
default: ""
},
// payment operations
publicKey: {
type: String,
requird: true
},
//required
email: {
type: String,
required: true
},
//required
amount: {
type: Number,
required: true
},
//required
reference: {
type: String,
required: true
},
//required
currency: {
type: String,
default: "NGN"
},
onSuccess: {
type: Function,
default: function _default(response) {
console.log(response);
}
},
onCancel: {
type: Function,
default: function _default() {
console.log("payment closed");
}
},
channels: {
type: Array,
default: function _default() {
return ["card", "bank", "ussd", "qr", "mobile_money"];
}
},
metadata: {
type: Object,
default: function _default() {
return {};
}
},
label: {
type: String,
default: ""
}
},
created: function created() {
var _this = this;
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_this.mountScript().then(function () {
_this.hasScriptLoaded = true;
});
case 1:
case "end":
return _context.stop();
}
}
}, _callee);
}))();
},
data: function data() {
return {
hasScriptLoaded: false
};
},
methods: {
mountScript: function mountScript() {
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
return _context2.abrupt("return", new Promise(function (res, rej) {
var script = document.createElement("script"); // add script source
// add script source
script.setAttribute("src", "https://js.paystack.co/v2/inline.js");
script.setAttribute("type", "text/javascript");
document.head.appendChild(script); // check if script is ready
// check if script is ready
script.onload = function () {
return res();
};
script.onerror = function () {
return rej();
};
}));
case 1:
case "end":
return _context2.stop();
}
}
}, _callee2);
}))();
},
payWithPaystack: function payWithPaystack() {
var _this2 = this;
// options
var paymentOptions = {
// general options
key: this.publicKey,
//required
email: this.email,
//required
amount: this.amount,
//required
reference: this.reference,
//required
currency: this.currency,
channels: this.channels,
metadata: this.metadata,
label: this.label,
onSuccess: function onSuccess(response) {
_this2.onSuccess(response);
},
onCanel: function onCanel() {
_this2.onCanel();
} // onBankTransferConfirmationPending: function(response) {
// this.onBankTransferConfirmationPending(response);
// },
// single split payments
//subaccount:this.subaccount, //required for single split
//transaction_charge:this.transaction_charge,
//bearer:this.bearer,
// multi-split payments
//split_code:this.split_code, //required for multi-split
// subscriptionss
// plan: this.plan, //required for subscriptions
// quantity: this.quantity,
};
var paystack = new window.PaystackPop();
paystack.newTransaction(paymentOptions);
}
}
});var _hoisted_1 = ["disabled"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("button", {
disabled: !_ctx.hasScriptLoaded,
class: vue.normalizeClass(_ctx.buttonClass),
onClick: _cache[0] || (_cache[0] = function () {
return _ctx.payWithPaystack && _ctx.payWithPaystack.apply(_ctx, arguments);
})
}, [vue.createElementVNode("span", null, vue.toDisplayString(_ctx.buttonText), 1)], 10, _hoisted_1);
}script.render = render;// Import vue component
// IIFE injects install function into component, allowing component
// to be registered via Vue.use() as well as Vue.component(),
var component = /*#__PURE__*/(function () {
// Get component instance
var installable = script; // Attach install function executed by Vue.use()
installable.install = function (app) {
app.component('Vue3Paystack', installable);
};
return installable;
})(); // It's possible to expose named exports when writing components that can
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = directive;
var namedExports=/*#__PURE__*/Object.freeze({__proto__:null,'default':component});// only expose one global var, with named exports exposed as properties of
// that global var (eg. plugin.namedExport)
Object.entries(namedExports).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
exportName = _ref2[0],
exported = _ref2[1];
if (exportName !== 'default') component[exportName] = exported;
});module.exports=component;