@chargebee/chargebee-js-vue-wrapper
Version:
Vue wrapper for Chargebee.js Components
2 lines (1 loc) • 4.85 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var s=require("vue");function c(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){var t=Math.random()*16|0,n=e=="x"?t:t&3|8;return n.toString(16)})}function m(e){if(e){const t=e.site,n=e.publishableKey;return!(!(t&&typeof t=="string"&&t.length>0)||!(n&&typeof n=="string"&&n.length>0))}else return!1}typeof window!="undefined"&&(window.CbJsSource="vue");const d={props:{fonts:{type:Array,default:()=>[]},classes:{type:Object,default:()=>({})},styles:{type:Object,default:()=>({})},placeholder:{type:Object,default:()=>({})},icon:{type:Boolean,default:!0},locale:{type:String,default:"en"},currency:{type:String,default:"USD"}},data(){return{cbInstance:null,cbComponent:null,moduleLoaded:!1,elementId:""}},computed:{componentOptions:function(){return{fonts:this.fonts,classes:this.classes,locale:this.locale,style:this.styles,placeholder:this.placeholder,icon:this.icon,currency:this.currency}}},provide(){return{cbComponent:s.computed(()=>this.cbComponent)}},methods:{tokenize(e){return this.cbComponent.tokenize(e)},authorizeWith3ds(e,t,n){return this.cbComponent.authorizeWith3ds(e,t,n)},focus(){this.cbComponent.focus()},blur(){this.cbComponent.blur()},clear(){this.cbComponent.clear()},setCbComponent(e){this.cbComponent=e}},mounted(){this.$nextTick(()=>{this.elementId=`card-component-${c()}`;let e=Chargebee.getInstance(),t=this.componentOptions;e.load("components").then(()=>{this.cbInstance=e;const n=this.cbInstance.createComponent("card",t);this.setCbComponent(n),this.moduleLoaded=!0,["ready","focus","blur","change"].map(o=>{this.cbComponent.on(o,i=>{this.$emit(o,i)})}),this.$nextTick(()=>{this.cbComponent.mount(`#${this.elementId}`)})})})},watch:{componentOptions(){this.cbComponent&&this.cbComponent.update(this.componentOptions)}},render(){let e=this.$slots.default?this.$slots.default():[];return s.h("div",{id:this.elementId,class:this.class},e)}},r={data(){return{field:null,initialized:!1}},props:{styles:{type:Object,default:()=>({})},placeholder:{type:String,default:()=>""}},computed:{fieldOptions:function(){return{style:this.styles||{},placeholder:this.placeholder}},elementId:function(){return`card-${this.id}-${c()}`}},methods:{getField(){return this.field},attachListener(e){this.field.on(e,t=>{this.$emit(e,t)})},initializeField(e){if(e){const t=this.fieldOptions;this.field=e.createField(this.id,t).at(`#${this.elementId}`),this.$parent.onMount&&this.$parent.onMount(),this.attachListener("ready"),this.attachListener("focus"),this.attachListener("blur"),this.attachListener("change"),this.initialized=!0}},focus(){this.field.focus()},blur(){this.field.blur()},clear(){this.field.clear()}},watch:{fieldOptions(){if(this.field){const e=this.fieldOptions;this.field.update(e)}},cbComponent(e,t){!t&&e&&(this.initialized||this.initializeField(e))}},inject:["cbComponent"],mounted(){this.initializeField()}};var a=(e,t)=>{const n=e.__vccOpts||e;for(const[o,i]of t)n[o]=i;return n};const b={name:"CardNumber",mixins:[r],props:{styles:{type:Object,default:()=>({})},placeholder:{type:String,default:()=>""}},data(){return{id:"number",loaded:!1,classname:this.class}}},y=["id"];function C(e,t,n,o,i,l){return s.openBlock(),s.createElementBlock("div",{id:e.elementId,class:s.normalizeClass(i.classname)},[s.renderSlot(e.$slots,"default")],10,y)}var u=a(b,[["render",C]]);const x={name:"CardExpiry",props:{styles:{type:Object,default:()=>({})},placeholder:{type:String,default:()=>""}},data(){return{id:"expiry",loaded:!1,classname:this.class}},mixins:[r]},v=["id"];function $(e,t,n,o,i,l){return s.openBlock(),s.createElementBlock("div",{id:e.elementId,class:s.normalizeClass(i.classname)},[s.renderSlot(e.$slots,"default")],10,v)}var p=a(x,[["render",$]]);const _={name:"CardCvv",props:{styles:{type:Object,default:()=>({})},placeholder:{type:String,default:()=>""}},data(){return{id:"cvv",loaded:!1,classname:this.class}},mixins:[r]},g=["id"];function S(e,t,n,o,i,l){return s.openBlock(),s.createElementBlock("div",{id:e.elementId,class:s.normalizeClass(i.classname)},[s.renderSlot(e.$slots,"default")],10,g)}var h=a(_,[["render",S]]);const f={name:"Provider",props:{cbInstance:{type:Object,default:null}},created(){typeof window!="undefined"&&(window.CbJsSource="vue",console.log("Vue wrapper Provider: Set CbJsSource to vue"))},render(){return m(this.cbInstance)?this.$slots.default():null}};typeof window!="undefined"&&(window.CbJsSource="vue",console.log("Vue wrapper module: Set CbJsSource to vue"));var O={install(e){e.component("card-component",d),e.component("card-number",u),e.component("card-expiry",p),e.component("card-cvv",h),e.component("provider",f)}};exports.CardComponent=d;exports.CardCvv=h;exports.CardExpiry=p;exports.CardNumber=u;exports.Provider=f;exports.default=O;