├── .gitignore ├── chargebee-js-react ├── .gitignore ├── .npmrc ├── .eslintignore ├── .babelrc ├── src │ ├── components │ │ ├── CardComponent.tsx │ │ ├── Provider.tsx │ │ ├── CardCVV.tsx │ │ ├── CardExpiry.tsx │ │ ├── CardNumber.tsx │ │ ├── ComponentGroup.tsx │ │ ├── Element.tsx │ │ └── FieldContainer.tsx │ ├── index.ts │ └── utils │ │ └── index.ts ├── .eslintrc ├── rollup.config.js ├── tsconfig.json ├── LICENSE ├── CHANGELOG.md ├── package.json └── README.md ├── chargebee-js-vue ├── .babelrc ├── src │ ├── components │ │ ├── CardCvv.vue │ │ ├── Provider.vue │ │ ├── CardExpiry.vue │ │ ├── CardNumber.vue │ │ ├── Element.vue │ │ └── CardComponent.vue │ ├── utils │ │ └── index.js │ └── index.js ├── vite.config.js ├── LICENSE ├── CHANGELOG.md ├── package.json ├── dist │ ├── chargebee-js-vue-wrapper.cjs.js │ └── chargebee-js-vue-wrapper.es.js ├── README.md └── package-lock.json ├── .pre-commit-config.yaml ├── chargebee-js-angular ├── projects │ └── chargebee-js-angular-wrapper │ │ ├── ng-package.json │ │ ├── tslint.json │ │ ├── tsconfig.spec.json │ │ ├── src │ │ ├── public-api.ts │ │ ├── test.ts │ │ ├── lib │ │ │ ├── directives │ │ │ │ ├── provider.directive.ts │ │ │ │ ├── number-field.directive.ts │ │ │ │ ├── cvv-field.directive.ts │ │ │ │ ├── expiry-field.directive.ts │ │ │ │ └── card-field.directive.ts │ │ │ └── types.ts │ │ └── utils │ │ │ └── index.ts │ │ ├── tsconfig.lib.json │ │ ├── package.json │ │ ├── karma.conf.js │ │ ├── LICENSE │ │ ├── CHANGELOG.md │ │ ├── package-lock.json │ │ └── README.md ├── .editorconfig ├── tsconfig.json ├── .gitignore ├── angular.json ├── package.json ├── tslint.json └── README.md ├── .github └── workflows │ └── gitleaks.yml ├── SECURITY.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ -------------------------------------------------------------------------------- /chargebee-js-react/.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ -------------------------------------------------------------------------------- /chargebee-js-react/.npmrc: -------------------------------------------------------------------------------- 1 | //registry.npmjs.org/:_authToken=${NPM_TOKEN} -------------------------------------------------------------------------------- /chargebee-js-react/.eslintignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ 3 | package*.json 4 | rollup*.js 5 | -------------------------------------------------------------------------------- /chargebee-js-vue/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/preset-env", { 4 | "modules": false 5 | }] 6 | ] 7 | } -------------------------------------------------------------------------------- /.pre-commit-config.yaml: -------------------------------------------------------------------------------- 1 | repos: 2 | - repo: https://github.com/gitleaks/gitleaks 3 | rev: v8.18.2 4 | hooks: 5 | - id: gitleaks 6 | -------------------------------------------------------------------------------- /chargebee-js-react/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-react", 4 | ["@babel/preset-env", { 5 | "modules": false 6 | }] 7 | ] 8 | } -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/chargebee-js-angular-wrapper", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /.github/workflows/gitleaks.yml: -------------------------------------------------------------------------------- 1 | name: CB Secret PR Scan 2 | 3 | on: 4 | pull_request: 5 | types: [opened, synchronize, reopened] 6 | 7 | jobs: 8 | SecretScanning: 9 | uses: chargebee/cb-secrets-scanner/.github/workflows/cb-secret-scan.yml@main 10 | secrets: inherit -------------------------------------------------------------------------------- /chargebee-js-angular/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "lib", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "lib", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /chargebee-js-react/src/components/CardComponent.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import ComponentGroup, { ChargebeeComponentProps } from './ComponentGroup' 3 | import FieldContainer from "./FieldContainer"; 4 | 5 | export default React.forwardRef((props: ChargebeeComponentProps, ref: React.LegacyRef) => ( 6 | 7 | )); 8 | -------------------------------------------------------------------------------- /chargebee-js-react/src/index.ts: -------------------------------------------------------------------------------- 1 | import CardNumber from './components/CardNumber' 2 | import CardExpiry from './components/CardExpiry' 3 | import CardCVV from './components/CardCVV' 4 | import CardComponent from './components/CardComponent' 5 | import Provider from './components/Provider' 6 | 7 | export { 8 | CardNumber, 9 | CardExpiry, 10 | CardCVV, 11 | CardComponent, 12 | Provider, 13 | } 14 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of chargebee-js-angular-wrapper 3 | */ 4 | 5 | export * from './lib/directives/card-field.directive'; 6 | export * from './lib/directives/number-field.directive'; 7 | export * from './lib/directives/expiry-field.directive'; 8 | export * from './lib/directives/cvv-field.directive'; 9 | export * from './lib/directives/provider.directive'; 10 | -------------------------------------------------------------------------------- /chargebee-js-react/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "ecmaVersion": 6, 4 | "sourceType": "module", 5 | "ecmaFeatures": { 6 | "jsx": true 7 | } 8 | }, 9 | "env": { 10 | "browser": true 11 | }, 12 | "plugins": [ 13 | "react" 14 | ], 15 | "extends": [ 16 | "eslint:recommended", 17 | "plugin:react/recommended" 18 | ], 19 | "settings": { 20 | "react": { 21 | "pragma": "React", 22 | "version": "detect" 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /chargebee-js-react/src/components/Provider.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ChargebeeInstance } from '@chargebee/chargebee-js-types'; 3 | import { validateCbInstance } from '../utils/'; 4 | 5 | interface ProviderProps { 6 | cbInstance: ChargebeeInstance; 7 | children: React.ReactChild; 8 | } 9 | 10 | export default React.forwardRef((props: ProviderProps, ref) => { 11 | if (props.cbInstance && validateCbInstance(props.cbInstance)) { 12 | return ( 13 | <> 14 | {props.children} 15 | 16 | ); 17 | } else { 18 | return null; 19 | } 20 | }); 21 | 22 | -------------------------------------------------------------------------------- /chargebee-js-vue/src/components/CardCvv.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /chargebee-js-vue/src/components/Provider.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chargebee-js-react/rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel'; 2 | import commonjs from 'rollup-plugin-commonjs'; 3 | import typescript from '@rollup/plugin-typescript'; 4 | 5 | export default { 6 | input: 'src/index.ts', 7 | output: [ 8 | { 9 | file: 'dist/chargebee-js-react-wrapper.esm.js', 10 | format: 'es' 11 | }, 12 | { 13 | file: 'dist/chargebee-js-react-wrapper.common.js', 14 | format: 'cjs' 15 | } 16 | ], 17 | plugins: [ 18 | babel({ 19 | exclude: 'node_modules/**' // only transpile our source code 20 | }), 21 | commonjs(), 22 | typescript() 23 | ], 24 | external: [ 'react', 'react-dom' ] 25 | }; -------------------------------------------------------------------------------- /chargebee-js-vue/src/utils/index.js: -------------------------------------------------------------------------------- 1 | export function genUUID() { 2 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { 3 | var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); 4 | return v.toString(16); 5 | }); 6 | } 7 | 8 | export function validateCbInstance(cbInstance) { 9 | if (cbInstance) { 10 | const site = cbInstance.site; 11 | const key = cbInstance.publishableKey; 12 | 13 | if (!(site && typeof site == "string" && site.length > 0)) 14 | return false; 15 | 16 | if (!(key && typeof key == "string" && key.length > 0)) 17 | return false; 18 | 19 | return true; 20 | } else { 21 | return false; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /chargebee-js-vue/src/components/CardExpiry.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | 37 | 40 | -------------------------------------------------------------------------------- /chargebee-js-vue/src/components/CardNumber.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 37 | 38 | 41 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | At Chargebee, we take data integrity and security very seriously. Due to the nature of the product and service we provide, we are committed to working with individuals to stay updated on the latest security techniques and fix any security weakness in our application or infrastructure reported to us responsibly by external parties. 4 | 5 | https://www.chargebee.com/security/responsible-disclosure-policy/ 6 | 7 | ## Reporting a vulnerability 8 | Reach out to us at security@chargebee.com. Please do not open GitHub issues or pull requests as this makes the problem immediately visible to everyone, including malicious actors. Chargebee's security team will triage your report and respond according to its impact. 9 | -------------------------------------------------------------------------------- /chargebee-js-vue/vite.config.js: -------------------------------------------------------------------------------- 1 | // vite.config.js 2 | const path = require('path') 3 | const { defineConfig } = require('vite') 4 | const vue = require('@vitejs/plugin-vue'); 5 | 6 | module.exports = defineConfig({ 7 | build: { 8 | lib: { 9 | entry: path.resolve(__dirname, 'src/index.js'), 10 | name: 'chargebee-js-vue-wrapper', 11 | fileName: (format) => `chargebee-js-vue-wrapper.${format}.js`, 12 | formats: ['cjs', 'es' ] 13 | }, 14 | rollupOptions: { 15 | external: ['vue'], 16 | plugins: [ 17 | ], 18 | output: { 19 | exports: "named", 20 | globals: { 21 | vue: 'Vue' 22 | } 23 | } 24 | } 25 | }, 26 | plugins: [ vue() ], 27 | }) 28 | -------------------------------------------------------------------------------- /chargebee-js-angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "experimentalDecorators": true, 11 | "importHelpers": true, 12 | "target": "es2020", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2018", 18 | "dom" 19 | ], 20 | "paths": { 21 | "chargebee-js-angular-wrapper": [ 22 | "dist/chargebee-js-angular-wrapper" 23 | ], 24 | "chargebee-js-angular-wrapper/*": [ 25 | "dist/chargebee-js-angular-wrapper/*" 26 | ] 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /chargebee-js-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "moduleResolution": "node", 5 | "module": "ESNext", 6 | "declaration": true, 7 | "noLib": false, 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "sourceMap": true, 11 | "pretty": true, 12 | "allowUnreachableCode": true, 13 | "allowUnusedLabels": true, 14 | "noImplicitAny": true, 15 | "noImplicitReturns": false, 16 | "noImplicitUseStrict": false, 17 | "noEmitOnError": true, 18 | "outDir": "dist/", 19 | "baseUrl": "src/", 20 | "listFiles": false, 21 | "noEmitHelpers": true, 22 | "jsx": "react" 23 | }, 24 | "include": ["src/**/*"], 25 | "exclude": ["node_modules"], 26 | "compileOnSave": false 27 | } 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Chargebee Components 2 | 3 | ## Wrappers for Chargebee Components 4 | 5 | * [Angular](https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-angular#readme) 6 | * [React](https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-react#readme) 7 | * [Vue](https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-vue#readme) 8 | 9 | ## Docs: 10 | [Chargebee Components - JS Docs](https://chargebee.com/checkout-portal-docs/components-fields-integrations.html#quick-start-integration) 11 | 12 | ## Support 13 | Have any queries regarding the implementation? Reach out to [support@chargebee.com](mailto:support@chargebee.com) 14 | 15 | ### Setup Pre-commit Hooks 16 | Install & setup pre-commit framework in developer machine 17 | ``` 18 | brew install pre-commit 19 | pre-commit install 20 | ``` -------------------------------------------------------------------------------- /chargebee-js-angular/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /tmp 5 | /out-tsc 6 | /dist 7 | 8 | # Only exists if Bazel was run 9 | /bazel-out 10 | 11 | # dependencies 12 | /node_modules 13 | 14 | # profiling files 15 | chrome-profiler-events.json 16 | speed-measure-plugin.json 17 | 18 | # IDEs and editors 19 | /.idea 20 | .project 21 | .classpath 22 | .c9/ 23 | *.launch 24 | .settings/ 25 | *.sublime-workspace 26 | 27 | # IDE - VSCode 28 | .vscode/* 29 | !.vscode/settings.json 30 | !.vscode/tasks.json 31 | !.vscode/launch.json 32 | !.vscode/extensions.json 33 | .history/* 34 | 35 | # misc 36 | /.angular/cache 37 | /.sass-cache 38 | /connect.lock 39 | /coverage 40 | /libpeerconnection.log 41 | npm-debug.log 42 | yarn-error.log 43 | testem.log 44 | /typings 45 | 46 | # System Files 47 | .DS_Store 48 | Thumbs.db 49 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'core-js/es7/reflect'; 4 | import 'zone.js'; 5 | import 'zone.js/testing'; 6 | import { getTestBed } from '@angular/core/testing'; 7 | import { 8 | BrowserDynamicTestingModule, 9 | platformBrowserDynamicTesting 10 | } from '@angular/platform-browser-dynamic/testing'; 11 | 12 | declare const require: any; 13 | 14 | // First, initialize the Angular testing environment. 15 | getTestBed().initTestEnvironment( 16 | BrowserDynamicTestingModule, 17 | platformBrowserDynamicTesting(), { 18 | teardown: { destroyAfterEach: false } 19 | } 20 | ); 21 | // Then we find all the tests. 22 | const context = require.context('./', true, /\.spec\.ts$/); 23 | // And load the modules. 24 | context.keys().map(context); 25 | -------------------------------------------------------------------------------- /chargebee-js-react/src/components/CardCVV.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import Element, { ElementProps } from './Element'; 3 | import { ComponentContext } from "./FieldContainer"; 4 | 5 | export interface CardCVVProps extends ElementProps { 6 | onBlur?: React.MouseEventHandler; 7 | onChange?: React.ChangeEventHandler; 8 | onFocus?: React.FocusEventHandler; 9 | onReady?: React.EventHandler; 10 | }; 11 | 12 | export default React.forwardRef((props: CardCVVProps, ref: React.LegacyRef) => { 13 | const {onBlur, onChange, onFocus, onReady, ...rest} = props; 14 | const listeners = {onBlur, onChange, onFocus, onReady}; 15 | 16 | return ( 17 | 18 | { ctx => } 19 | 20 | ) 21 | }); 22 | -------------------------------------------------------------------------------- /chargebee-js-react/src/components/CardExpiry.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import Element, { ElementProps } from './Element'; 3 | import { ComponentContext } from "./FieldContainer"; 4 | 5 | export interface CardExpiryProps extends ElementProps { 6 | onBlur?: React.MouseEventHandler; 7 | onChange?: React.ChangeEventHandler; 8 | onFocus?: React.FocusEventHandler; 9 | onReady?: React.EventHandler; 10 | }; 11 | 12 | export default React.forwardRef((props: CardExpiryProps, ref: React.LegacyRef) => { 13 | const {onBlur, onChange, onFocus, onReady, ...rest} = props; 14 | const listeners = {onBlur, onChange, onFocus, onReady}; 15 | 16 | return ( 17 | 18 | { ctx => } 19 | 20 | ) 21 | }); 22 | -------------------------------------------------------------------------------- /chargebee-js-react/src/components/CardNumber.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import Element, { ElementProps } from './Element'; 3 | import { ComponentContext } from "./FieldContainer"; 4 | 5 | export interface CardNumberProps extends ElementProps { 6 | onBlur?: React.MouseEventHandler; 7 | onChange?: React.ChangeEventHandler; 8 | onFocus?: React.FocusEventHandler; 9 | onReady?: React.EventHandler; 10 | }; 11 | 12 | export default React.forwardRef((props: CardNumberProps, ref: React.LegacyRef) => { 13 | const {onBlur, onChange, onFocus, onReady, ...rest} = props; 14 | const listeners = {onBlur, onChange, onFocus, onReady}; 15 | 16 | return ( 17 | 18 | { ctx => } 19 | 20 | ) 21 | }); 22 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "declarationMap": true, 6 | "target": "es2020", 7 | "module": "es2015", 8 | "moduleResolution": "node", 9 | "declaration": true, 10 | "sourceMap": true, 11 | "inlineSources": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": [ 16 | "dom", 17 | "es2018" 18 | ] 19 | }, 20 | "angularCompilerOptions": { 21 | "annotateForClosureCompiler": true, 22 | "compilationMode": "partial", 23 | "skipTemplateCodegen": true, 24 | "strictMetadataEmit": true, 25 | "fullTemplateTypeCheck": true, 26 | "strictInjectionParameters": true, 27 | "enableResourceInlining": true 28 | }, 29 | "exclude": [ 30 | "src/test.ts", 31 | "**/*.spec.ts" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /chargebee-js-vue/src/index.js: -------------------------------------------------------------------------------- 1 | // Set source for Chargebee.js KVL logging immediately when module loads 2 | if (typeof window !== 'undefined') { 3 | window.CbJsSource = 'vue'; 4 | } 5 | 6 | import CardComponent from './components/CardComponent.vue' 7 | import CardNumber from './components/CardNumber.vue' 8 | import CardExpiry from './components/CardExpiry.vue' 9 | import CardCvv from './components/CardCvv.vue' 10 | import Provider from './components/Provider.vue' 11 | 12 | const components = { 13 | CardComponent, 14 | CardNumber, 15 | CardExpiry, 16 | CardCvv, 17 | Provider 18 | } 19 | 20 | export default { 21 | install (Vue) { 22 | Vue.component('card-component', CardComponent); 23 | Vue.component('card-number', CardNumber); 24 | Vue.component('card-expiry', CardExpiry); 25 | Vue.component('card-cvv', CardCvv); 26 | Vue.component('provider', Provider); 27 | } 28 | } 29 | 30 | export { 31 | CardComponent, 32 | CardNumber, 33 | CardExpiry, 34 | CardCvv, 35 | Provider 36 | } 37 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@chargebee/chargebee-js-angular-wrapper", 3 | "version": "5.0.1", 4 | "description": "Angular wrapper for Chargebee.js Components", 5 | "homepage": "https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-angular#readme", 6 | "bugs": { 7 | "url": "https://github.com/chargebee/chargebee-js-wrappers/issues", 8 | "email": "support@chargebee.com" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/chargebee/chargebee-js-wrappers.git" 13 | }, 14 | "license": "MIT", 15 | "author": "Vivek ", 16 | "contributors": [ 17 | "Dinesh " 18 | ], 19 | "keywords": [ 20 | "chargebee", 21 | "chargebee.js", 22 | "chargebee components", 23 | "chargebee angular", 24 | "chargebee angular wrapper", 25 | "chargebee.js angular" 26 | ], 27 | "peerDependencies": { 28 | "@angular/common": "^18.2.13", 29 | "@angular/core": "^18.2.13" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/src/lib/directives/provider.directive.ts: -------------------------------------------------------------------------------- 1 | import { Input, Component, Output, EventEmitter, Directive, ElementRef, OnChanges, SimpleChanges, OnInit, ContentChildren, Renderer2, ViewChildren, QueryList, ContentChild, TemplateRef, ViewChild } from '@angular/core'; 2 | import { validateCbInstance } from '../../utils'; 3 | 4 | @Component({ 5 | selector: '[cbProvider]', 6 | template: ` 7 | 8 | 9 | 10 | 11 | ` 12 | }) 13 | export class Provider implements OnChanges { 14 | @Input() cbInstance?: object; 15 | validated: boolean = false; 16 | 17 | constructor() { 18 | // Set Angular wrapper source for KVL tracking 19 | (window as any).CbJsSource = 'angular'; 20 | } 21 | 22 | ngOnChanges(changes: SimpleChanges) { 23 | if (validateCbInstance(this.cbInstance)) 24 | this.validated = true; 25 | else { 26 | this.validated = false; 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /chargebee-js-react/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011-2019 ChargeBee, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person 6 | obtaining a copy of this software and associated documentation 7 | files (the "Software"), to deal in the Software without 8 | restriction, including without limitation the rights to use, 9 | copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the 11 | Software is furnished to do so, subject to the following 12 | conditions: 13 | 14 | The above copyright notice and this permission notice shall be 15 | included in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 21 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 22 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 23 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 24 | OTHER DEALINGS IN THE SOFTWARE. 25 | -------------------------------------------------------------------------------- /chargebee-js-vue/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011-2019 ChargeBee, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person 6 | obtaining a copy of this software and associated documentation 7 | files (the "Software"), to deal in the Software without 8 | restriction, including without limitation the rights to use, 9 | copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the 11 | Software is furnished to do so, subject to the following 12 | conditions: 13 | 14 | The above copyright notice and this permission notice shall be 15 | included in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 21 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 22 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 23 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 24 | OTHER DEALINGS IN THE SOFTWARE. 25 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage/chargebee-js-angular-wrapper'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011-2019 ChargeBee, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person 6 | obtaining a copy of this software and associated documentation 7 | files (the "Software"), to deal in the Software without 8 | restriction, including without limitation the rights to use, 9 | copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the 11 | Software is furnished to do so, subject to the following 12 | conditions: 13 | 14 | The above copyright notice and this permission notice shall be 15 | included in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 21 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 22 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 23 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 24 | OTHER DEALINGS IN THE SOFTWARE. 25 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### v5.0.0 (2025-01-03) 2 | *** 3 | * Adds support for Angular 18 and standalone directives 4 | 5 | ### v4.0.0 (2024-07-10) 6 | *** 7 | * Adds support for Angular 17 8 | 9 | ### v3.0.0 (2024-04-30) 10 | *** 11 | * Adds support for Angular 16 12 | 13 | ### v2.0.0 (2023-08-01) 14 | *** 15 | * Adds support for Angular 15 16 | 17 | ### v1.0.1 (2023-01-09) 18 | *** 19 | * Fixes build dependency issue on installing 1.0.0 20 | 21 | ### v1.0.0 (2022-12-15) 22 | *** 23 | * Support for Angular 14. 24 | 25 | ### v0.3.1 (2021-03-26) 26 | *** 27 | * Support for Server Side Rendering using wrapper component compatible with Angular Universal Framework (with prerendering) 28 | 29 | ### v0.3.0 (2020-09-16) 30 | *** 31 | * Security updates 32 | 33 | ### v0.2.0 (2019-09-07) 34 | * * * 35 | * Support for 3DS Authorization 36 | * Support for passing additional info in tokenize method 37 | 38 | ### v0.1.4 (2019-05-17) 39 | * * * 40 | * Added currency support 41 | * Updated README 42 | 43 | ### v0.1.3 (2019-05-09) 44 | * * * 45 | * Mount new syntax 46 | 47 | ### v0.1.1 (2019-04-28) 48 | * * * 49 | * Updated build 50 | 51 | ### v0.1.1 (2019-04-28) 52 | * * * 53 | * Added card icon 54 | 55 | ### v0.1.0 (2019-04-28) 56 | * * * 57 | Initial version of ChargeBee.js Angular Wrapper. 58 | -------------------------------------------------------------------------------- /chargebee-js-vue/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### v0.3.2 (2023-08-08) 2 | * * * 3 | * Bumps vue 3.2 to 3.3 4 | * Security vulnerability fixes in dependencies 5 | * Adds note in readme for using Fields mode in Vue 3.2 6 | 7 | ### v0.3.1 (2023-01-11) 8 | * * * 9 | * Bugfixes - Fields & combined mode to work in Vue3. 10 | 11 | ### v0.3.0 (2022-06-27) 12 | * * * 13 | * Added support for Vue 3 14 | * Removed support for Vue 2 15 | 16 | ### v0.2.2 (2021-03-23) 17 | * * * 18 | * Support for Server Side Rendering using Wrapper Component compatible with NuxtJS Framework 19 | 20 | ### v0.2.1 (2020-09-16) 21 | * * * 22 | * Security fixes 23 | 24 | ### v0.2.0 (2019-09-07) 25 | * * * 26 | * Support for 3DS 27 | * Support for passing additional data in tokenize function 28 | 29 | ### v0.1.8 (2019-07-05) 30 | * * * 31 | * Bugfixes - Multiple components mounting on same element 32 | 33 | ### v0.1.7 (2019-05-17) 34 | * * * 35 | * Added currency support 36 | * Updated README 37 | 38 | ### v0.1.6 (2019-05-09) 39 | * * * 40 | * Mount new syntax 41 | 42 | ### v0.1.4 (2019-04-28) 43 | * * * 44 | * Added locale update support 45 | 46 | ### v0.1.3 (2019-04-28) 47 | * * * 48 | * SSR Support 49 | 50 | ### v0.1.1 (2019-04-28) 51 | * * * 52 | * Added hooks to card component and fields 53 | 54 | ### v0.1.0 (2019-04-28) 55 | * * * 56 | Initial version of ChargeBee.js Vue Wrapper. 57 | -------------------------------------------------------------------------------- /chargebee-js-angular/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "chargebee-js-angular-wrapper": { 7 | "root": "projects/chargebee-js-angular-wrapper", 8 | "sourceRoot": "projects/chargebee-js-angular-wrapper/src", 9 | "projectType": "library", 10 | "prefix": "lib", 11 | "architect": { 12 | "build": { 13 | "builder": "@angular-devkit/build-angular:ng-packagr", 14 | "options": { 15 | "tsConfig": "projects/chargebee-js-angular-wrapper/tsconfig.lib.json", 16 | "project": "projects/chargebee-js-angular-wrapper/ng-package.json" 17 | }, 18 | "configurations": { 19 | "production": { 20 | "project": "projects/chargebee-js-angular-wrapper/ng-package.json" 21 | } 22 | } 23 | }, 24 | "test": { 25 | "builder": "@angular-devkit/build-angular:karma", 26 | "options": { 27 | "main": "projects/chargebee-js-angular-wrapper/src/test.ts", 28 | "tsConfig": "projects/chargebee-js-angular-wrapper/tsconfig.spec.json", 29 | "karmaConfig": "projects/chargebee-js-angular-wrapper/karma.conf.js" 30 | } 31 | } 32 | } 33 | } 34 | } 35 | } -------------------------------------------------------------------------------- /chargebee-js-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@chargebee/chargebee-js-vue-wrapper", 3 | "version": "0.3.3", 4 | "description": "Vue wrapper for Chargebee.js Components", 5 | "homepage": "https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-vue#readme", 6 | "bugs": { 7 | "url": "https://github.com/chargebee/chargebee-js-wrappers/issues", 8 | "email": "support@chargebee.com" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/chargebee/chargebee-js-wrappers.git" 13 | }, 14 | "main": "dist/chargebee-js-vue-wrapper.cjs.js", 15 | "module": "dist/chargebee-js-vue-wrapper.es.js", 16 | "files": [ 17 | "dist/*", 18 | "src/*" 19 | ], 20 | "scripts": { 21 | "dev": "vite build --watch", 22 | "build": "vite build" 23 | }, 24 | "peerDependencies": { 25 | "vue": "^3.3.4" 26 | }, 27 | "devDependencies": { 28 | "@vitejs/plugin-vue": "^2.3.3", 29 | "@vue/compiler-sfc": "^3.2.37", 30 | "vite": "^2.9.9", 31 | "vue": "^3.3.4" 32 | }, 33 | "license": "MIT", 34 | "author": "Vivek ", 35 | "contributors": [ 36 | "Dinesh " 37 | ], 38 | "keywords": [ 39 | "chargebee", 40 | "chargebee.js", 41 | "chargebee components", 42 | "chargebee vue", 43 | "chargebee vue wrapper", 44 | "chargebee.js vue" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/src/lib/directives/number-field.directive.ts: -------------------------------------------------------------------------------- 1 | import {Input, Output, EventEmitter, Directive, ElementRef, OnChanges, SimpleChanges } from '@angular/core'; 2 | import { getPropChanges } from '../../utils'; 3 | 4 | @Directive({ 5 | selector: '[cbNumberField]', 6 | standalone: true, 7 | }) 8 | export class NumberFieldDirective implements OnChanges { 9 | @Input() styles?: object; 10 | @Input() placeholder?: string; 11 | 12 | @Output() ready: EventEmitter = new EventEmitter(); 13 | @Output() focus: EventEmitter = new EventEmitter(); 14 | @Output() blur: EventEmitter = new EventEmitter(); 15 | @Output() change: EventEmitter = new EventEmitter(); 16 | 17 | id = ''; 18 | field = null; 19 | type = 'number'; 20 | 21 | constructor(el: ElementRef) { 22 | if (el.nativeElement) { 23 | this.id = el.nativeElement.id; 24 | } 25 | } 26 | 27 | onFocus = (status: any) => { 28 | this.focus.emit(status); 29 | } 30 | 31 | onBlur = (status: any) => { 32 | this.blur.emit(status); 33 | } 34 | 35 | onReady = (el: any) => { 36 | this.ready.emit(el); 37 | } 38 | 39 | onChange = (status: any) => { 40 | this.change.emit(status); 41 | } 42 | 43 | ngOnChanges(changes: SimpleChanges) { 44 | if (this.field) { 45 | const props = ['placeholder', 'styles']; 46 | const { hasChanged, currentOptions } = getPropChanges(changes, props); 47 | 48 | if (hasChanged) { 49 | this.field.update(currentOptions); 50 | } 51 | } 52 | } 53 | 54 | } 55 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/src/lib/directives/cvv-field.directive.ts: -------------------------------------------------------------------------------- 1 | import { Input, Directive, ElementRef, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core'; 2 | import { getPropChanges } from '../../utils'; 3 | 4 | @Directive({ 5 | selector: '[cbCvvField]', 6 | standalone: true, 7 | }) 8 | export class CvvFieldDirective implements OnChanges { 9 | cbComponent = null; 10 | @Input() styles?: object; 11 | @Input() placeholder?: string; 12 | 13 | @Output() ready: EventEmitter = new EventEmitter(); 14 | @Output() focus: EventEmitter = new EventEmitter(); 15 | @Output() blur: EventEmitter = new EventEmitter(); 16 | @Output() change: EventEmitter = new EventEmitter(); 17 | 18 | id = ''; 19 | field = null; 20 | type = 'cvv'; 21 | 22 | constructor(el: ElementRef) { 23 | if (el.nativeElement) { 24 | this.id = el.nativeElement.id; 25 | } 26 | } 27 | 28 | onFocus = (status: any) => { 29 | this.focus.emit(status); 30 | } 31 | 32 | onBlur = (status: any) => { 33 | this.blur.emit(status); 34 | } 35 | 36 | onReady = (el: any) => { 37 | this.ready.emit(el); 38 | } 39 | 40 | onChange = (status: any) => { 41 | this.change.emit(status); 42 | } 43 | 44 | ngOnChanges(changes: SimpleChanges) { 45 | if (this.field) { 46 | const props = ['placeholder', 'styles']; 47 | const { hasChanged, currentOptions } = getPropChanges(changes, props); 48 | 49 | if (hasChanged) { 50 | this.field.update(currentOptions); 51 | } 52 | } 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/src/lib/directives/expiry-field.directive.ts: -------------------------------------------------------------------------------- 1 | import { Input, Output, EventEmitter, Directive, ElementRef, OnChanges, SimpleChanges } from '@angular/core'; 2 | import { getPropChanges } from '../../utils'; 3 | 4 | @Directive({ 5 | selector: '[cbExpiryField]', 6 | standalone: true, 7 | }) 8 | export class ExpiryFieldDirective implements OnChanges { 9 | @Input() cbComponent; 10 | @Input() styles?: object; 11 | @Input() placeholder?: string; 12 | 13 | @Output() ready: EventEmitter = new EventEmitter(); 14 | @Output() focus: EventEmitter = new EventEmitter(); 15 | @Output() blur: EventEmitter = new EventEmitter(); 16 | @Output() change: EventEmitter = new EventEmitter(); 17 | 18 | id = ''; 19 | field = null; 20 | type = 'expiry'; 21 | 22 | constructor(el: ElementRef) { 23 | if (el.nativeElement) { 24 | this.id = el.nativeElement.id; 25 | } 26 | } 27 | 28 | onFocus = (status: any) => { 29 | this.focus.emit(status); 30 | } 31 | 32 | onBlur = (status: any) => { 33 | this.blur.emit(status); 34 | } 35 | 36 | onReady = (el: any) => { 37 | this.ready.emit(el); 38 | } 39 | 40 | onChange = (status: any) => { 41 | this.change.emit(status); 42 | } 43 | 44 | ngOnChanges(changes: SimpleChanges) { 45 | if (this.field) { 46 | const props = ['placeholder', 'styles']; 47 | const { hasChanged, currentOptions } = getPropChanges(changes, props); 48 | 49 | if (hasChanged) { 50 | this.field.update(currentOptions); 51 | } 52 | } 53 | } 54 | 55 | } 56 | 57 | -------------------------------------------------------------------------------- /chargebee-js-angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chargebee-js-angular-wrapper", 3 | "version": "5.0.1", 4 | "private": true, 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e" 12 | }, 13 | "description": "Angular wrapper for Chargebee.js Components", 14 | "dependencies": { 15 | "@angular/animations": "^18.2.13", 16 | "@angular/common": "^18.2.13", 17 | "@angular/compiler": "^18.2.13", 18 | "@angular/core": "^18.2.13", 19 | "@angular/forms": "^18.2.13", 20 | "@angular/platform-browser": "^18.2.13", 21 | "@angular/platform-browser-dynamic": "^18.2.13", 22 | "@angular/router": "^18.2.13", 23 | "core-js": "^3.6.5", 24 | "rxjs": "~6.6.3", 25 | "tslib": "^2.4.1", 26 | "zone.js": "~0.14.10" 27 | }, 28 | "devDependencies": { 29 | "@angular-devkit/build-angular": "^18.2.12", 30 | "@angular/cli": "^18.2.12", 31 | "@angular/compiler-cli": "^18.2.13", 32 | "@angular/language-service": "^18.2.13", 33 | "@types/jasmine": "~3.6.0", 34 | "@types/jasminewd2": "~2.0.3", 35 | "@types/node": "^20.4.5", 36 | "codelyzer": "^6.0.2", 37 | "jasmine-core": "~3.8.0", 38 | "jasmine-spec-reporter": "~5.0.0", 39 | "karma": "~6.4.1", 40 | "karma-chrome-launcher": "~3.1.0", 41 | "karma-coverage-istanbul-reporter": "~3.0.3", 42 | "karma-jasmine": "~4.0.0", 43 | "karma-jasmine-html-reporter": "^1.5.0", 44 | "ng-packagr": "^18.2.1", 45 | "ts-node": "~9.0.0", 46 | "tslint": "~6.1.3", 47 | "typescript": "^5.5.4" 48 | } 49 | } -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/src/lib/types.ts: -------------------------------------------------------------------------------- 1 | 2 | export interface PaymentIntent { 3 | id: string; 4 | status: PaymentIntentStatus; 5 | amount: number; 6 | currency_code: string; 7 | gateway_account_id: string; 8 | gateway: Gateway; 9 | active_payment_attempt?: PaymentAttempt; 10 | customer_id?: string; 11 | reference_id?: string; 12 | } 13 | 14 | export enum PaymentIntentStatus { 15 | INITED = 'inited', 16 | IN_PROGRESS = 'in_progress', 17 | AUTHORIZED = 'authorized', 18 | CONSUMED = 'consumed' 19 | } 20 | 21 | 22 | export enum PaymentAttemptStatus { 23 | INITED = 'inited', 24 | REQUIRES_IDENTIFICATION = 'requires_identification', 25 | REQUIRES_CHALLENGE = 'requires_challenge', 26 | REQUIRES_REDIRECTION = 'requires_redirection', 27 | AUTHORIZED = 'authorized', 28 | REFUSED = 'refused' 29 | } 30 | 31 | 32 | export interface PaymentAttempt { 33 | status: PaymentAttemptStatus; 34 | type: string; 35 | active: boolean; 36 | id_at_gateway?: string; 37 | action_payload: any; 38 | error_code?: string; 39 | error_text?: string; 40 | error_msg?: string; 41 | } 42 | 43 | export enum Gateway { 44 | STRIPE = 'stripe', 45 | ADYEN = 'adyen', 46 | BRAINTREE = 'braintree', 47 | SPREEDLY = 'spreedly', 48 | } 49 | 50 | export interface AdditionalData { 51 | billingAddress?: Address; 52 | shippingAddress?: Address; 53 | email?: string; 54 | phone?: string; 55 | } 56 | 57 | export interface Callbacks { 58 | success?: (intent: PaymentIntent) => void; 59 | error?: (intent: PaymentIntent, error: any) => void; 60 | change?: (intent: PaymentIntent) => void; 61 | } 62 | 63 | export interface Address { 64 | firstName?: string; 65 | lastName?: string; 66 | phone?: string; 67 | addressLine1?: string; 68 | addressLine2?: string; 69 | addressLine3?: string; 70 | city?: string; 71 | state?: string; 72 | stateCode?: string; 73 | countryCode?: string; 74 | zip?: string; 75 | } 76 | -------------------------------------------------------------------------------- /chargebee-js-angular/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rulesDirectory": [ 4 | "codelyzer" 5 | ], 6 | "rules": { 7 | "array-type": false, 8 | "arrow-parens": false, 9 | "deprecation": { 10 | "severity": "warn" 11 | }, 12 | "import-blacklist": [ 13 | true, 14 | "rxjs/Rx" 15 | ], 16 | "interface-name": false, 17 | "max-classes-per-file": false, 18 | "max-line-length": [ 19 | true, 20 | 140 21 | ], 22 | "member-access": false, 23 | "member-ordering": [ 24 | true, 25 | { 26 | "order": [ 27 | "static-field", 28 | "instance-field", 29 | "static-method", 30 | "instance-method" 31 | ] 32 | } 33 | ], 34 | "no-consecutive-blank-lines": false, 35 | "no-console": [ 36 | true, 37 | "debug", 38 | "info", 39 | "time", 40 | "timeEnd", 41 | "trace" 42 | ], 43 | "no-empty": false, 44 | "no-inferrable-types": [ 45 | true, 46 | "ignore-params" 47 | ], 48 | "no-non-null-assertion": true, 49 | "no-redundant-jsdoc": true, 50 | "no-switch-case-fall-through": true, 51 | "no-use-before-declare": true, 52 | "no-var-requires": false, 53 | "object-literal-key-quotes": [ 54 | true, 55 | "as-needed" 56 | ], 57 | "object-literal-sort-keys": false, 58 | "ordered-imports": false, 59 | "quotemark": [ 60 | true, 61 | "single" 62 | ], 63 | "trailing-comma": false, 64 | "no-output-on-prefix": true, 65 | "use-input-property-decorator": true, 66 | "use-output-property-decorator": true, 67 | "use-host-property-decorator": true, 68 | "no-input-rename": true, 69 | "no-output-rename": true, 70 | "use-life-cycle-interface": true, 71 | "use-pipe-transform-interface": true, 72 | "component-class-suffix": true, 73 | "directive-class-suffix": true 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /chargebee-js-react/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### v0.6.7 (2025-04-15) 2 | * * * 3 | * Added support for react 19. 4 | 5 | ### v0.6.6 (2024-11-18) 6 | * * * 7 | * Fix for double render in strict mode. 8 | 9 | ### v0.6.5 (2024-05-20) 10 | * * * 11 | * Removed Publishable Key from ReadME. 12 | 13 | ### v0.6.4 (2024-04-29) 14 | * * * 15 | * Added `showTestCards` option for `CardComponent`. 16 | 17 | ### v0.6.3 (2023-02-01) 18 | * * * 19 | * Added `onKeyPress` option for `CardComponent`. 20 | 21 | ### v0.6.2 (2023-01-24) 22 | * * * 23 | * Add type for react children. 24 | 25 | ### v0.6.1 (2023-01-19) 26 | * * * 27 | * Added declaration file for react wrappers. 28 | 29 | ### v0.6.0 (2022-12-12) 30 | * * * 31 | * Typescript support for react wrappers 32 | 33 | ### v0.5.0 (2022-06-27) 34 | * * * 35 | * Added support for react 18 36 | * Removed support for react 16 37 | 38 | ### v0.4.3 (2021-07-30) 39 | * * * 40 | * Added support for react 17 41 | 42 | ### v0.4.2 (2021-03-23) 43 | * * * 44 | * Added support for Server Side Rendering using Wrapper Component compatible with NextJS Framework 45 | 46 | ### v0.4.1 (2021-03-12) 47 | * * * 48 | * Added support for lineHeight & ariaLables 49 | 50 | ### v0.4.0 (2020-09-16) 51 | * * * 52 | * Removed deprecated lifecycle hooks 53 | * Added linting 54 | 55 | ### v0.3.1 (2020-07-14) 56 | * * * 57 | * Updated dependencies 58 | 59 | ### v0.2.1 (2019-09-07) 60 | * * * 61 | * Updated README 62 | 63 | ### v0.2.0 (2019-09-07) 64 | * * * 65 | * Support for 3DS 66 | * Support for passing additional data in tokenization 67 | 68 | ### v0.1.5 (2019-07-05) 69 | * * * 70 | * Bugfixes - Multiple components mounting on same element 71 | 72 | ### v0.1.4 (2019-05-17) 73 | * * * 74 | * Added currency support 75 | * Updated README 76 | 77 | ### v0.1.3 (2019-05-09) 78 | * * * 79 | * Mount new syntax 80 | 81 | ### v0.1.1 (2019-04-28) 82 | * * * 83 | * Added Focus, blur, clear hooks 84 | 85 | ### v0.1.0 (2019-04-28) 86 | * * * 87 | Initial version of ChargeBee.js React Wrapper. 88 | 89 | -------------------------------------------------------------------------------- /chargebee-js-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@chargebee/chargebee-js-react-wrapper", 3 | "version": "0.6.8", 4 | "main": "dist/chargebee-js-react-wrapper.common.js", 5 | "module": "dist/chargebee-js-react-wrapper.esm.js", 6 | "types": "dist/index.d.ts", 7 | "files": [ 8 | "dist/*", 9 | "src/*" 10 | ], 11 | "description": "React wrapper for Chargebee.js Components", 12 | "homepage": "https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-react#readme", 13 | "bugs": { 14 | "url": "https://github.com/chargebee/chargebee-js-wrappers/issues", 15 | "email": "support@chargebee.com" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/chargebee/chargebee-js-wrappers.git" 20 | }, 21 | "scripts": { 22 | "build": "rollup -c", 23 | "dev": "rollup -c -w", 24 | "lint": "eslint ." 25 | }, 26 | "peerDependencies": { 27 | "react": "^19.0.0 || ^18.0.0 || ^17.0.0", 28 | "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0" 29 | }, 30 | "devDependencies": { 31 | "@babel/core": "^7.10.2", 32 | "@babel/preset-env": "^7.24.4", 33 | "@babel/preset-react": "^7.10.1", 34 | "@chargebee/chargebee-js-types": "^1.0.0", 35 | "@rollup/plugin-typescript": "^9.0.2", 36 | "@types/node": "^18.11.9", 37 | "@types/react": "^16.9.49", 38 | "@types/react-dom": "^16.9.8", 39 | "eslint": "^7.11.0", 40 | "eslint-plugin-react": "^7.20.6", 41 | "react": "19.1.0", 42 | "react-dom": "19.1.0", 43 | "rollup": "^2.14.0", 44 | "rollup-plugin-babel": "^4.4.0", 45 | "rollup-plugin-commonjs": "^9.3.4", 46 | "rollup-watch": "^4.3.1", 47 | "tslib": "^2.4.1", 48 | "typescript": "^4.8.4" 49 | }, 50 | "license": "MIT", 51 | "author": "Vivek ", 52 | "contributors": [ 53 | "Dinesh ", 54 | "Abhishek " 55 | ], 56 | "keywords": [ 57 | "chargebee", 58 | "chargebee.js", 59 | "chargebee components", 60 | "chargebee react", 61 | "chargebee react wrapper", 62 | "chargebee.js react" 63 | ] 64 | } 65 | -------------------------------------------------------------------------------- /chargebee-js-vue/src/components/Element.vue: -------------------------------------------------------------------------------- 1 | 100 | -------------------------------------------------------------------------------- /chargebee-js-react/src/components/ComponentGroup.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | AriaLabel, 4 | ChargebeeInstance, 5 | Classes, 6 | Fonts, 7 | Placeholder, 8 | Styles 9 | } from "../types"; 10 | import FieldContainer from "./FieldContainer"; 11 | import { CancellablePromise, makeCancelablePromise } from 'utils'; 12 | 13 | 14 | // Set source for Chargebee.js KVL logging immediately when module loads 15 | if (typeof window !== 'undefined') { 16 | (window as any).CbJsSource = 'react'; 17 | } 18 | 19 | 20 | export interface ChargebeeComponentProps { 21 | children?: React.ReactNode; 22 | type?: string; 23 | fonts?: Fonts; 24 | classes?: Classes; 25 | icon?: boolean; 26 | styles?: Styles; 27 | showTestCards?: boolean; 28 | locale?: string; 29 | placeholder?: Placeholder; 30 | currency?: string; 31 | ariaLabel?: AriaLabel; 32 | className?: string; 33 | onBlur?: React.MouseEventHandler; 34 | onChange?: React.ChangeEventHandler; 35 | onFocus?: React.FocusEventHandler; 36 | onReady?: React.EventHandler; 37 | onKeyPress?: Function; 38 | forwardedRef?: React.LegacyRef; 39 | } 40 | interface ChargebeeComponentState { 41 | moduleLoaded: Boolean; 42 | cbInstance: ChargebeeInstance; 43 | } 44 | 45 | 46 | export default class ChargebeeComponents extends React.Component { 47 | private loader: CancellablePromise; 48 | 49 | constructor(props: ChargebeeComponentProps) { 50 | super(props); 51 | this.state = { 52 | moduleLoaded: false, 53 | cbInstance: null, 54 | } 55 | } 56 | 57 | componentWillUnmount() { 58 | this.loader.cancel(); 59 | } 60 | 61 | componentDidMount() { 62 | // @ts-ignore 63 | const cbInstance = Chargebee.getInstance(); 64 | this.loader = makeCancelablePromise(cbInstance.load("components")); 65 | this.loader.promise.then(({isCancelled}) => { 66 | if (isCancelled) { 67 | return; 68 | } 69 | this.setState({ 70 | cbInstance: cbInstance, 71 | moduleLoaded: true 72 | }); 73 | }); 74 | } 75 | 76 | render() { 77 | const {forwardedRef, ...rest} = this.props; 78 | return ( 79 | <> 80 | {this.state.moduleLoaded ? : ''} 81 | 82 | ) 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@chargebee/chargebee-js-angular-wrapper", 3 | "version": "4.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "@chargebee/chargebee-js-angular-wrapper", 9 | "version": "4.0.0", 10 | "license": "MIT", 11 | "peerDependencies": { 12 | "@angular/common": "^17.3.11", 13 | "@angular/core": "^17.3.11" 14 | } 15 | }, 16 | "node_modules/@angular/common": { 17 | "version": "17.3.11", 18 | "resolved": "https://registry.npmjs.org/@angular/common/-/common-17.3.11.tgz", 19 | "integrity": "sha512-WG+HQjUaQziYLGdbcv2aW+G73uroN5VF9yk4qWYcolW+VB8SV/DOAol8uFVgCF21cIOl5+wfJZvA4r5oG3dYaw==", 20 | "peer": true, 21 | "dependencies": { 22 | "tslib": "^2.3.0" 23 | }, 24 | "engines": { 25 | "node": "^18.13.0 || >=20.9.0" 26 | }, 27 | "peerDependencies": { 28 | "@angular/core": "17.3.11", 29 | "rxjs": "^6.5.3 || ^7.4.0" 30 | } 31 | }, 32 | "node_modules/@angular/core": { 33 | "version": "17.3.11", 34 | "resolved": "https://registry.npmjs.org/@angular/core/-/core-17.3.11.tgz", 35 | "integrity": "sha512-2wPZwXFei3kVxK2ylIH6CdGebrC4kvooFx7qoX+250OITAEFMODJGdh/e3x0DpFUjlRvQtIFQ+YpQlfC5JnL4g==", 36 | "peer": true, 37 | "dependencies": { 38 | "tslib": "^2.3.0" 39 | }, 40 | "engines": { 41 | "node": "^18.13.0 || >=20.9.0" 42 | }, 43 | "peerDependencies": { 44 | "rxjs": "^6.5.3 || ^7.4.0", 45 | "zone.js": "~0.14.0" 46 | } 47 | }, 48 | "node_modules/rxjs": { 49 | "version": "7.8.1", 50 | "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz", 51 | "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==", 52 | "peer": true, 53 | "dependencies": { 54 | "tslib": "^2.1.0" 55 | } 56 | }, 57 | "node_modules/tslib": { 58 | "version": "2.6.3", 59 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", 60 | "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==", 61 | "peer": true 62 | }, 63 | "node_modules/zone.js": { 64 | "version": "0.14.7", 65 | "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.7.tgz", 66 | "integrity": "sha512-0w6DGkX2BPuiK/NLf+4A8FLE43QwBfuqz2dVgi/40Rj1WmqUskCqj329O/pwrqFJLG5X8wkeG2RhIAro441xtg==", 67 | "peer": true 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /chargebee-js-react/src/components/Element.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { AriaLabel, Component, Placeholder, Styles } from '@chargebee/chargebee-js-types'; 3 | import { isEqual, genUUID } from '../utils/'; 4 | 5 | interface Listeners { 6 | onBlur: React.MouseEventHandler; 7 | onChange: React.ChangeEventHandler; 8 | onFocus: React.FocusEventHandler; 9 | onReady: React.EventHandler; 10 | } 11 | export interface ElementProps { 12 | type?: string; 13 | cbComponent?: Component; 14 | listeners?: Listeners; 15 | icon?: boolean; 16 | styles?: Styles; 17 | placeholder?: Placeholder; 18 | ariaLabel?: AriaLabel; 19 | className?: string; 20 | }; 21 | 22 | export default class Element extends React.Component { 23 | private id: string; 24 | private field: any; 25 | private ElementRef: React.LegacyRef; 26 | 27 | constructor(props: ElementProps) { 28 | super(props); 29 | this.field = null; 30 | this.id = `card-${props.type}-${genUUID()}`; 31 | this.ElementRef = React.createRef(); 32 | } 33 | 34 | componentDidMount() { 35 | const { cbComponent, type, listeners } = this.props; 36 | const options = this.getPropOptions(this.props); 37 | this.field = cbComponent.createField(type, options).at(`#${this.id}`); 38 | 39 | // Attaching listeners if any 40 | if(listeners) { 41 | if(listeners.onBlur) this.field.on('blur', listeners.onBlur); 42 | if(listeners.onFocus) this.field.on('focus', listeners.onFocus); 43 | if(listeners.onReady) this.field.on('ready', listeners.onReady); 44 | if(listeners.onChange) this.field.on('change', listeners.onChange); 45 | } 46 | } 47 | 48 | getPropOptions(props: React.PropsWithRef) { 49 | const { icon, styles: style, placeholder, ariaLabel } = props; 50 | return { 51 | icon, 52 | style, 53 | placeholder, 54 | ariaLabel 55 | } 56 | } 57 | 58 | componentDidUpdate(prevProps: ElementProps) { 59 | const prevOptions = this.getPropOptions(prevProps); 60 | const currentOptions = this.getPropOptions(this.props); 61 | 62 | if(!isEqual(prevOptions, currentOptions) && this.field) { 63 | this.field.update(currentOptions) 64 | } 65 | } 66 | 67 | componentWillUnmount() { 68 | this.field.destroy(); 69 | } 70 | 71 | focus() { 72 | this.field.focus(); 73 | } 74 | 75 | blur() { 76 | this.field.blur(); 77 | } 78 | 79 | clear() { 80 | this.field.clear(); 81 | } 82 | 83 | render() { 84 | const { className } = this.props; 85 | return ( 86 |
87 | {this.props.children} 88 |
89 | ) 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | import { SimpleChanges, SimpleChange } from '@angular/core'; 2 | 3 | // Equality comparison for objects 4 | export function isEqual(left: any, right: any): boolean { 5 | const OBJECT_STRING = '[object Object]'; 6 | 7 | if (typeof left !== 'object' || typeof right !== 'object') { 8 | return left === right; 9 | } 10 | 11 | if (left === null || right === null) { 12 | return left === right; 13 | } 14 | 15 | const leftArray = Array.isArray(left); 16 | const rightArray = Array.isArray(right); 17 | 18 | if (leftArray !== rightArray) { 19 | return false; 20 | } 21 | 22 | const leftPlainObject = 23 | Object.prototype.toString.call(left) === OBJECT_STRING; 24 | const rightPlainObject = 25 | Object.prototype.toString.call(right) === OBJECT_STRING; 26 | 27 | if (leftPlainObject !== rightPlainObject) { 28 | return false; 29 | } 30 | 31 | if (!leftPlainObject && !leftArray) { 32 | return false; 33 | } 34 | 35 | const leftKeys = Object.keys(left); 36 | const rightKeys = Object.keys(right); 37 | 38 | if (leftKeys.length !== rightKeys.length) { 39 | return false; 40 | } 41 | 42 | const keySet = {}; 43 | for (const key of leftKeys) { 44 | keySet[key] = true; 45 | } 46 | for (const key of rightKeys) { 47 | keySet[key] = true; 48 | } 49 | const allKeys = Object.keys(keySet); 50 | if (allKeys.length !== leftKeys.length) { 51 | return false; 52 | } 53 | 54 | const l = left; 55 | const r = right; 56 | const pred = (key) => { 57 | return isEqual(l[key], r[key]); 58 | }; 59 | 60 | return allKeys.every(pred); 61 | } 62 | 63 | export function getPropChanges(changes: SimpleChanges, props: string[]): { 64 | hasChanged: boolean; 65 | currentOptions: object; 66 | prevOptions: object; 67 | } { 68 | const changedProps = Object.keys(changes).filter(key => props.indexOf(key) >= 0); 69 | const prevOptions = {}; 70 | const currentOptions = {}; 71 | 72 | changedProps.map(prop => { 73 | const change: SimpleChange = changes[prop]; 74 | if (prop === 'styles') { 75 | prop = 'style'; 76 | } 77 | prevOptions[prop] = change.previousValue; 78 | currentOptions[prop] = change.currentValue; 79 | }); 80 | 81 | return { 82 | hasChanged: !isEqual(prevOptions, currentOptions), 83 | currentOptions, 84 | prevOptions, 85 | }; 86 | } 87 | 88 | export function validateCbInstance(cbInstance) { 89 | if (cbInstance != null) { 90 | const site = cbInstance.site; 91 | const key = cbInstance.publishableKey; 92 | 93 | if (!(site != null && typeof site == "string" && site.length > 0)) 94 | return false; 95 | 96 | if (!(key != null && typeof key == "string" && key.length > 0)) 97 | return false; 98 | 99 | return true; 100 | } else 101 | return false; 102 | } -------------------------------------------------------------------------------- /chargebee-js-react/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | interface KeyObject extends Object { 2 | [key: number]: any; 3 | } 4 | interface KeySetObject extends Object { 5 | [key: number]: any; 6 | } 7 | 8 | // Equality comparison for objects 9 | export function isEqual (left: KeyObject, right: KeyObject): Array | boolean { 10 | const OBJECT_STRING = '[object Object]'; 11 | 12 | if (typeof left !== 'object' || typeof right !== 'object') { 13 | return left === right; 14 | } 15 | 16 | if (left === null || right === null) return left === right; 17 | 18 | const leftArray = Array.isArray(left); 19 | const rightArray = Array.isArray(right); 20 | 21 | if (leftArray !== rightArray) return false; 22 | 23 | const leftPlainObject = 24 | Object.prototype.toString.call(left) === OBJECT_STRING; 25 | const rightPlainObject = 26 | Object.prototype.toString.call(right) === OBJECT_STRING; 27 | 28 | if (leftPlainObject !== rightPlainObject) return false; 29 | 30 | if (!leftPlainObject && !leftArray) return false; 31 | 32 | const leftKeys: Array = Object.keys(left); 33 | const rightKeys: Array = Object.keys(right); 34 | 35 | if (leftKeys.length !== rightKeys.length) return false; 36 | 37 | const keySet: KeySetObject = {}; 38 | for (let i = 0; i < leftKeys.length; i += 1) { 39 | keySet[leftKeys[i]] = true; 40 | } 41 | for (let i = 0; i < rightKeys.length; i += 1) { 42 | keySet[rightKeys[i]] = true; 43 | } 44 | const allKeys = Object.keys(keySet); 45 | if (allKeys.length !== leftKeys.length) { 46 | return false; 47 | } 48 | 49 | const l = left; 50 | const r = right; 51 | const pred = (key: any) => { 52 | return isEqual(l[key], r[key]); 53 | }; 54 | 55 | return allKeys.every(pred); 56 | } 57 | 58 | export function genUUID() { 59 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { 60 | var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); 61 | return v.toString(16); 62 | }); 63 | } 64 | 65 | export function validateCbInstance(cbInstance: any) { 66 | if (cbInstance != null) { 67 | const site = cbInstance.site; 68 | const key = cbInstance.publishableKey; 69 | 70 | if (!(site != null && typeof site == "string" && site.length > 0)) 71 | return false; 72 | 73 | if (!(key != null && typeof key == "string" && key.length > 0)) 74 | return false; 75 | 76 | return true; 77 | } else 78 | return false; 79 | } 80 | 81 | 82 | type CancellablePromiseResponse = { 83 | isCancelled: boolean; 84 | value?: T 85 | error?: any 86 | } 87 | 88 | export type CancellablePromise = { 89 | promise: Promise>, 90 | cancel: () => void 91 | } 92 | 93 | export function makeCancelablePromise(promise: Promise): CancellablePromise { 94 | let isCancelled = false; 95 | let _resolve: (payload: CancellablePromiseResponse) => void; 96 | 97 | const wrappedPromise: Promise> = new Promise((resolve, reject) => { 98 | _resolve = resolve; 99 | promise 100 | .then((value) => resolve({ isCancelled, value})) 101 | .catch((error) => reject({ isCancelled, error})); 102 | }); 103 | 104 | return { 105 | promise: wrappedPromise, 106 | cancel() { 107 | isCancelled = true; 108 | _resolve({ isCancelled }) 109 | }, 110 | }; 111 | } -------------------------------------------------------------------------------- /chargebee-js-vue/src/components/CardComponent.vue: -------------------------------------------------------------------------------- 1 | 139 | -------------------------------------------------------------------------------- /chargebee-js-vue/dist/chargebee-js-vue-wrapper.cjs.js: -------------------------------------------------------------------------------- 1 | "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; 2 | -------------------------------------------------------------------------------- /chargebee-js-react/src/components/FieldContainer.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { AdditionalData, AriaLabel, Callbacks, ChargebeeInstance, Classes, Fonts, PaymentIntent, Placeholder, Styles } from "@chargebee/chargebee-js-types"; 3 | import {genUUID, isEqual} from '../utils/'; 4 | 5 | 6 | interface ComponentContext { 7 | cbComponent: any; 8 | } 9 | 10 | const ComponentDefaultContext: ComponentContext = { 11 | cbComponent: null 12 | } 13 | 14 | export const ComponentContext = React.createContext(ComponentDefaultContext); 15 | 16 | export function getPropOptions(props: FieldContainerProps) { 17 | const { fonts, classes, icon, styles: style, showTestCards, locale, placeholder, currency, ariaLabel } = props; 18 | return { 19 | fonts, 20 | classes, 21 | locale, 22 | style, 23 | showTestCards, 24 | placeholder, 25 | ariaLabel, 26 | icon, 27 | currency, 28 | } 29 | } 30 | 31 | export interface FieldContainerProps { 32 | children?: React.ReactNode; 33 | type?: string; 34 | fonts?: Fonts; 35 | classes?: Classes; 36 | icon?: boolean; 37 | styles?: Styles; 38 | showTestCards?: boolean; 39 | locale?: string; 40 | placeholder?: Placeholder; 41 | currency?: string; 42 | ariaLabel?: AriaLabel; 43 | className?: string; 44 | onBlur?: React.MouseEventHandler; 45 | onChange?: React.ChangeEventHandler; 46 | onFocus?: React.FocusEventHandler; 47 | onReady?: React.EventHandler; 48 | onKeyPress?: Function; 49 | cbInstance?: any; 50 | } 51 | interface FieldContainerState { 52 | cbComponent: any; 53 | cbInstance: ChargebeeInstance; 54 | id: string; 55 | ready: boolean; 56 | } 57 | 58 | export default class FieldContainer extends React.Component { 59 | private id: string; 60 | private containerRef = React.createRef(); 61 | 62 | constructor(props: FieldContainerProps) { 63 | super(props); 64 | this.id = `${this.props.type}-field-${genUUID()}`; 65 | this.state = { 66 | cbComponent: null, 67 | cbInstance: this.props.cbInstance, 68 | id: this.id, 69 | ready: false 70 | } 71 | } 72 | 73 | createCardComponent() { 74 | const {type, onBlur, onChange, onFocus, onReady, onKeyPress} = this.props; 75 | const options = getPropOptions(this.props); 76 | 77 | let cbComponent = this.props.cbInstance.createComponent(type, options) 78 | // Attach listeners if specified (only applicable for combined field) 79 | if(onReady) cbComponent.on('ready', onReady); 80 | if(onBlur) cbComponent.on('blur', onBlur); 81 | if(onFocus) cbComponent.on('focus', onFocus); 82 | if(onChange) cbComponent.on('change', onChange); 83 | if(onKeyPress) cbComponent.on('keyPress', onKeyPress); 84 | 85 | return cbComponent; 86 | } 87 | 88 | componentWillUnmount() { 89 | if (this.state.cbComponent) { 90 | this.state.cbComponent.destroy(); 91 | } 92 | } 93 | 94 | componentDidUpdate(prevProps: FieldContainerProps) { 95 | const cbComponent = this.state.cbComponent; 96 | 97 | const prevOptions = getPropOptions(prevProps); 98 | const currentOptions = getPropOptions(this.props); 99 | 100 | if (!isEqual(prevOptions, currentOptions) && cbComponent) { 101 | cbComponent.update(currentOptions); 102 | } 103 | } 104 | 105 | componentDidMount() { 106 | const cbComponent = this.createCardComponent(); 107 | this.setState({ cbComponent, ready: true }, () => { 108 | if (this.state.cbComponent && this.state.cbComponent.status === 0) { 109 | if (this.containerRef.current) { 110 | this.state.cbComponent.mount(this.containerRef.current); 111 | } 112 | } 113 | }); 114 | } 115 | 116 | tokenize(additionalData: AdditionalData) { 117 | const { cbComponent } = this.state; 118 | return cbComponent.tokenize(additionalData) 119 | } 120 | 121 | authorizeWith3ds(paymentIntent: PaymentIntent, additionalData: AdditionalData, callbacks: Callbacks) { 122 | const { cbComponent } = this.state; 123 | return cbComponent.authorizeWith3ds(paymentIntent, additionalData, callbacks) 124 | } 125 | 126 | focus() { 127 | const { cbComponent } = this.state; 128 | cbComponent.focus(); 129 | } 130 | 131 | blur() { 132 | const { cbComponent } = this.state; 133 | cbComponent.blur(); 134 | } 135 | 136 | clear() { 137 | const { cbComponent } = this.state; 138 | cbComponent.clear(); 139 | } 140 | 141 | render() { 142 | const { ready } = this.state; // Destructure ready state 143 | 144 | return ( 145 | 146 |
147 | {ready && this.props.children || []} 148 |
149 | 150 | ); 151 | } 152 | } 153 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/src/lib/directives/card-field.directive.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Input, 3 | Directive, 4 | Output, 5 | EventEmitter, 6 | ContentChild, 7 | ElementRef, 8 | OnInit, 9 | OnChanges, 10 | SimpleChanges, 11 | } from "@angular/core"; 12 | import { NumberFieldDirective } from "./number-field.directive"; 13 | import { ExpiryFieldDirective } from "./expiry-field.directive"; 14 | import { CvvFieldDirective } from "./cvv-field.directive"; 15 | import { getPropChanges } from "../../utils"; 16 | import { PaymentIntent, AdditionalData, Callbacks } from "../types"; 17 | 18 | declare var Chargebee: any; 19 | 20 | // Set source for Chargebee.js KVL logging immediately when module loads 21 | if (typeof window !== 'undefined') { 22 | (window as any).CbJsSource = 'angular'; 23 | } 24 | 25 | @Directive({ 26 | selector: "[cbCardField]", 27 | standalone: true, 28 | }) 29 | export class CardFieldDirective implements OnInit, OnChanges { 30 | id = ""; 31 | cbInstance = null; 32 | cbComponent = null; 33 | 34 | @Input() icon?: boolean; 35 | @Input() classes?: object; 36 | @Input() fonts?: object; 37 | @Input() styles?: object; 38 | @Input() locale?: string; 39 | @Input() showTestCards?: boolean; 40 | @Input() currency?: string; 41 | @Input() placeholder?: { 42 | number?: string; 43 | expiry?: string; 44 | cvv?: string; 45 | }; 46 | 47 | @ContentChild(NumberFieldDirective, { static: true }) numberComponent; 48 | @ContentChild(ExpiryFieldDirective, { static: true }) expiryComponent; 49 | @ContentChild(CvvFieldDirective, { static: true }) cvvComponent; 50 | 51 | // Below events only for combined-field 52 | @Output() ready: EventEmitter = new EventEmitter(); 53 | @Output() focus: EventEmitter = new EventEmitter(); 54 | @Output() blur: EventEmitter = new EventEmitter(); 55 | @Output() change: EventEmitter = new EventEmitter(); 56 | 57 | load: Promise; 58 | initialization: Promise; 59 | 60 | constructor(el: ElementRef) { 61 | if (el.nativeElement) { 62 | this.id = el.nativeElement.id; 63 | } 64 | } 65 | 66 | onReady = (cardComponent: any, field: any) => { 67 | let data: any; 68 | if (field) { 69 | // Emit allows only one argument (Spec deviation) 70 | data = { cardComponent, field }; 71 | } else { 72 | data = cardComponent; 73 | } 74 | this.ready.emit(data); 75 | }; 76 | 77 | // Below events only for Combined field 78 | onFocus = (status: any) => { 79 | this.focus.emit(status); 80 | }; 81 | onBlur = (status: any) => { 82 | this.blur.emit(status); 83 | }; 84 | onChange = (status: any) => { 85 | this.change.emit(status); 86 | }; 87 | 88 | ngOnInit() { 89 | if ( 90 | typeof window !== "undefined" && 91 | typeof window["Chargebee"] !== "undefined" 92 | ) { 93 | const options = { 94 | icon: typeof this.icon === "boolean" ? this.icon : true, 95 | fonts: this.fonts || [], 96 | style: this.styles || {}, 97 | locale: this.locale || "en", 98 | showTestCards: this.showTestCards ?? false, 99 | classes: this.classes || {}, 100 | currency: this.currency || "USD", 101 | placeholder: this.placeholder || {}, 102 | }; 103 | 104 | this.cbInstance = window["Chargebee"].getInstance(); 105 | 106 | this.cbInstance.load("components").then(() => { 107 | this.cbComponent = this.cbInstance.createComponent("card", options); 108 | 109 | // Attaching listeners if any (only applicable for combined field) 110 | this.cbComponent.on("ready", this.onReady); 111 | this.cbComponent.on("focus", this.onFocus); 112 | this.cbComponent.on("blur", this.onBlur); 113 | this.cbComponent.on("change", this.onChange); 114 | 115 | // Initialize inidividual fields (if present) 116 | this.initializeField(this.cbComponent, this.numberComponent); 117 | this.initializeField(this.cbComponent, this.expiryComponent); 118 | this.initializeField(this.cbComponent, this.cvvComponent); 119 | 120 | this.cbComponent.mount(`#${this.id}`); 121 | }); 122 | } 123 | } 124 | 125 | initializeField(cbComponent, fieldElement) { 126 | if (cbComponent && fieldElement) { 127 | const fieldInstance = cbComponent 128 | .createField(fieldElement.type, { 129 | style: fieldElement.styles || {}, 130 | placeholder: fieldElement.placeholder || "", 131 | }) 132 | .at(`#${fieldElement.id}`); 133 | 134 | fieldElement.field = fieldInstance; 135 | 136 | // attach listeners 137 | fieldInstance.on("ready", fieldElement.onReady); 138 | fieldInstance.on("focus", fieldElement.onFocus); 139 | fieldInstance.on("blur", fieldElement.onBlur); 140 | fieldInstance.on("change", fieldElement.onChange); 141 | return fieldInstance; 142 | } 143 | return null; 144 | } 145 | 146 | public tokenize(additionalData: any) { 147 | return this.cbComponent.tokenize(additionalData); 148 | } 149 | 150 | public authorizeWith3ds( 151 | paymentIntent: PaymentIntent, 152 | additionalData: AdditionalData, 153 | callbacks: Callbacks 154 | ) { 155 | return this.cbComponent.authorizeWith3ds( 156 | paymentIntent, 157 | additionalData, 158 | callbacks 159 | ); 160 | } 161 | 162 | ngOnChanges(changes: SimpleChanges) { 163 | if (this.cbComponent) { 164 | const props = [ 165 | "icon", 166 | "classes", 167 | "fonts", 168 | "locale", 169 | "showTestCards", 170 | "styles", 171 | "placeholder", 172 | ]; 173 | const { currentOptions, hasChanged } = getPropChanges(changes, props); 174 | 175 | if (hasChanged) { 176 | this.cbComponent.update(currentOptions); 177 | } 178 | } 179 | } 180 | } 181 | -------------------------------------------------------------------------------- /chargebee-js-vue/dist/chargebee-js-vue-wrapper.es.js: -------------------------------------------------------------------------------- 1 | import { computed, h, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue"; 2 | function genUUID() { 3 | return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) { 4 | var r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8; 5 | return v.toString(16); 6 | }); 7 | } 8 | function validateCbInstance(cbInstance) { 9 | if (cbInstance) { 10 | const site = cbInstance.site; 11 | const key = cbInstance.publishableKey; 12 | if (!(site && typeof site == "string" && site.length > 0)) 13 | return false; 14 | if (!(key && typeof key == "string" && key.length > 0)) 15 | return false; 16 | return true; 17 | } else { 18 | return false; 19 | } 20 | } 21 | if (typeof window !== "undefined") { 22 | window.CbJsSource = "vue"; 23 | } 24 | const _sfc_main$5 = { 25 | props: { 26 | fonts: { 27 | type: Array, 28 | default: () => [] 29 | }, 30 | classes: { 31 | type: Object, 32 | default: () => ({}) 33 | }, 34 | styles: { 35 | type: Object, 36 | default: () => ({}) 37 | }, 38 | placeholder: { 39 | type: Object, 40 | default: () => ({}) 41 | }, 42 | icon: { 43 | type: Boolean, 44 | default: true 45 | }, 46 | locale: { 47 | type: String, 48 | default: "en" 49 | }, 50 | currency: { 51 | type: String, 52 | default: "USD" 53 | } 54 | }, 55 | data() { 56 | return { 57 | cbInstance: null, 58 | cbComponent: null, 59 | moduleLoaded: false, 60 | elementId: "" 61 | }; 62 | }, 63 | computed: { 64 | componentOptions: function() { 65 | return { 66 | fonts: this.fonts, 67 | classes: this.classes, 68 | locale: this.locale, 69 | style: this.styles, 70 | placeholder: this.placeholder, 71 | icon: this.icon, 72 | currency: this.currency 73 | }; 74 | } 75 | }, 76 | provide() { 77 | return { 78 | cbComponent: computed(() => this.cbComponent) 79 | }; 80 | }, 81 | methods: { 82 | tokenize(additionalData) { 83 | return this.cbComponent.tokenize(additionalData); 84 | }, 85 | authorizeWith3ds(paymentIntent, additionalData, callbacks) { 86 | return this.cbComponent.authorizeWith3ds(paymentIntent, additionalData, callbacks); 87 | }, 88 | focus() { 89 | this.cbComponent.focus(); 90 | }, 91 | blur() { 92 | this.cbComponent.blur(); 93 | }, 94 | clear() { 95 | this.cbComponent.clear(); 96 | }, 97 | setCbComponent(cbComponent) { 98 | this.cbComponent = cbComponent; 99 | } 100 | }, 101 | mounted() { 102 | this.$nextTick(() => { 103 | this.elementId = `card-component-${genUUID()}`; 104 | let cbInstance = Chargebee.getInstance(); 105 | let options = this.componentOptions; 106 | cbInstance.load("components").then(() => { 107 | this.cbInstance = cbInstance; 108 | const cbComponent = this.cbInstance.createComponent("card", options); 109 | this.setCbComponent(cbComponent); 110 | this.moduleLoaded = true; 111 | ["ready", "focus", "blur", "change"].map((listener) => { 112 | this.cbComponent.on(listener, (data) => { 113 | this.$emit(listener, data); 114 | }); 115 | }); 116 | this.$nextTick(() => { 117 | this.cbComponent.mount(`#${this.elementId}`); 118 | }); 119 | }); 120 | }); 121 | }, 122 | watch: { 123 | componentOptions() { 124 | if (this.cbComponent) { 125 | this.cbComponent.update(this.componentOptions); 126 | } 127 | } 128 | }, 129 | render() { 130 | let children = this.$slots.default ? this.$slots.default() : []; 131 | return h("div", { id: this.elementId, class: this.class }, children); 132 | } 133 | }; 134 | const _sfc_main$4 = { 135 | data() { 136 | return { 137 | field: null, 138 | initialized: false 139 | }; 140 | }, 141 | props: { 142 | styles: { 143 | type: Object, 144 | default: () => ({}) 145 | }, 146 | placeholder: { 147 | type: String, 148 | default: () => "" 149 | } 150 | }, 151 | computed: { 152 | fieldOptions: function() { 153 | return { 154 | style: this.styles || {}, 155 | placeholder: this.placeholder 156 | }; 157 | }, 158 | elementId: function() { 159 | return `card-${this.id}-${genUUID()}`; 160 | } 161 | }, 162 | methods: { 163 | getField() { 164 | return this.field; 165 | }, 166 | attachListener(listener) { 167 | this.field.on(listener, (data) => { 168 | this.$emit(listener, data); 169 | }); 170 | }, 171 | initializeField(cbComponent) { 172 | if (cbComponent) { 173 | const options = this.fieldOptions; 174 | this.field = cbComponent.createField(this.id, options).at(`#${this.elementId}`); 175 | if (this.$parent.onMount) 176 | this.$parent.onMount(); 177 | this.attachListener("ready"); 178 | this.attachListener("focus"); 179 | this.attachListener("blur"); 180 | this.attachListener("change"); 181 | this.initialized = true; 182 | } 183 | }, 184 | focus() { 185 | this.field.focus(); 186 | }, 187 | blur() { 188 | this.field.blur(); 189 | }, 190 | clear() { 191 | this.field.clear(); 192 | } 193 | }, 194 | watch: { 195 | fieldOptions() { 196 | if (this.field) { 197 | const options = this.fieldOptions; 198 | this.field.update(options); 199 | } 200 | }, 201 | cbComponent(newValue, oldValue) { 202 | if (!oldValue && newValue) { 203 | if (!this.initialized) { 204 | this.initializeField(newValue); 205 | } 206 | } 207 | } 208 | }, 209 | inject: ["cbComponent"], 210 | mounted() { 211 | this.initializeField(); 212 | } 213 | }; 214 | var _export_sfc = (sfc, props) => { 215 | const target = sfc.__vccOpts || sfc; 216 | for (const [key, val] of props) { 217 | target[key] = val; 218 | } 219 | return target; 220 | }; 221 | const _sfc_main$3 = { 222 | name: "CardNumber", 223 | mixins: [_sfc_main$4], 224 | props: { 225 | styles: { 226 | type: Object, 227 | default: () => ({}) 228 | }, 229 | placeholder: { 230 | type: String, 231 | default: () => "" 232 | } 233 | }, 234 | data() { 235 | return { 236 | id: "number", 237 | loaded: false, 238 | classname: this.class 239 | }; 240 | } 241 | }; 242 | const _hoisted_1$2 = ["id"]; 243 | function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) { 244 | return openBlock(), createElementBlock("div", { 245 | id: _ctx.elementId, 246 | class: normalizeClass($data.classname) 247 | }, [ 248 | renderSlot(_ctx.$slots, "default") 249 | ], 10, _hoisted_1$2); 250 | } 251 | var CardNumber = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]); 252 | const _sfc_main$2 = { 253 | name: "CardExpiry", 254 | props: { 255 | styles: { 256 | type: Object, 257 | default: () => ({}) 258 | }, 259 | placeholder: { 260 | type: String, 261 | default: () => "" 262 | } 263 | }, 264 | data() { 265 | return { 266 | id: "expiry", 267 | loaded: false, 268 | classname: this.class 269 | }; 270 | }, 271 | mixins: [_sfc_main$4] 272 | }; 273 | const _hoisted_1$1 = ["id"]; 274 | function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) { 275 | return openBlock(), createElementBlock("div", { 276 | id: _ctx.elementId, 277 | class: normalizeClass($data.classname) 278 | }, [ 279 | renderSlot(_ctx.$slots, "default") 280 | ], 10, _hoisted_1$1); 281 | } 282 | var CardExpiry = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]); 283 | const _sfc_main$1 = { 284 | name: "CardCvv", 285 | props: { 286 | styles: { 287 | type: Object, 288 | default: () => ({}) 289 | }, 290 | placeholder: { 291 | type: String, 292 | default: () => "" 293 | } 294 | }, 295 | data() { 296 | return { 297 | id: "cvv", 298 | loaded: false, 299 | classname: this.class 300 | }; 301 | }, 302 | mixins: [_sfc_main$4] 303 | }; 304 | const _hoisted_1 = ["id"]; 305 | function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { 306 | return openBlock(), createElementBlock("div", { 307 | id: _ctx.elementId, 308 | class: normalizeClass($data.classname) 309 | }, [ 310 | renderSlot(_ctx.$slots, "default") 311 | ], 10, _hoisted_1); 312 | } 313 | var CardCvv = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]); 314 | const _sfc_main = { 315 | name: "Provider", 316 | props: { 317 | cbInstance: { 318 | type: Object, 319 | default: null 320 | } 321 | }, 322 | created() { 323 | if (typeof window !== "undefined") { 324 | window.CbJsSource = "vue"; 325 | } 326 | }, 327 | render() { 328 | if (validateCbInstance(this.cbInstance)) 329 | return this.$slots.default(); 330 | else 331 | return null; 332 | } 333 | }; 334 | if (typeof window !== "undefined") { 335 | window.CbJsSource = "vue"; 336 | } 337 | var index = { 338 | install(Vue) { 339 | Vue.component("card-component", _sfc_main$5); 340 | Vue.component("card-number", CardNumber); 341 | Vue.component("card-expiry", CardExpiry); 342 | Vue.component("card-cvv", CardCvv); 343 | Vue.component("provider", _sfc_main); 344 | } 345 | }; 346 | export { _sfc_main$5 as CardComponent, CardCvv, CardExpiry, CardNumber, _sfc_main as Provider, index as default }; 347 | -------------------------------------------------------------------------------- /chargebee-js-vue/README.md: -------------------------------------------------------------------------------- 1 | # Chargebee JS Vue Wrapper 2 | Vue wrapper for Chargebee Components 3 | 4 | ## Examples 5 | For detailed examples: [Click here](https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/vue/cb-components-examples#readme) 6 | 7 | ## Live Demo 8 | View live demo [here](https://www.recur.in/components-examples/vue/#/example1) 9 | 10 | ## Installation 11 | Install from npm: 12 | ```bash 13 | npm install @chargebee/chargebee-js-vue-wrapper 14 | ``` 15 | 16 | ## Usage 17 | Chargebee Components requires you to initialize chargebee js with `site` and `publishableKey` 18 | 19 | > Wondering where to obtain your publishable API key? [Refer here](https://www.chargebee.com/docs/api_keys.html) 20 | 21 | In your `index.html`: 22 | ```html 23 | 24 | 25 | ... 26 | 27 | 33 | 34 | 35 |
36 | 37 | 38 | ``` 39 | 40 | ### Basic usage 41 | In your vue component 42 | ```js 43 | 55 | 56 | 76 | ``` 77 | 78 | ### A more complex example: 79 | 80 | >Note: If vue version is 3.2 or less, please add the following line to your Vue application bootstrap 81 | > `app.config.unwrapInjectedRef = true` 82 | > [Reference documentation](https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity) 83 | 84 | 85 | ```js 86 | 108 | 109 | 199 | 200 | ``` 201 | 202 | 203 | ### 3DS Authorization 204 | In your vue component 205 | ```js 206 | 218 | 219 | 260 | ``` 261 | 262 | ## Components and APIs 263 | 264 | #### Card Component ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-component-object)) 265 | Props | Description | Datatype 266 | ------|-------------|--------- 267 | `class` | CSS Class name for the container element | String 268 | `fonts` | An array of font faces or links | [Fonts](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) 269 | `classes` | Set of CSS classnames that get substituted for various [events](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on) | [Classes](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) 270 | `locale` | Language code | [Locale](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) 271 | `styles` | Set of style customizations | [Styles](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) 272 | `placeholder` | Set of placeholders for the card fields | [Placeholder](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) 273 | `ref` | Vue reference(ref) for card component | [Vue ref](https://vuejs.org/v2/api/#vm-refs) 274 | 275 | ##### Events ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on)) 276 | Props | Description | Arguments 277 | ------|-------------|--------- 278 | `@ready` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) 279 | `@change` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 280 | `@focus` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 281 | `@blur` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 282 | 283 | #### Field Components ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object)) 284 | * CardNumber 285 | * CardExpiry 286 | * CardCVV 287 | 288 | Props | Description | Datatype 289 | ------|-------------|--------- 290 | `class` | CSS Classname for container element | String 291 | `styles` | Styles for inidividual field | [Styles](http://localhost:8081/checkout-portal-docs/components-fields-reference.html#parameters-5) 292 | `placeholder` | Placeholder for the field | String 293 | 294 | ##### Event Props ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on-2)) 295 | Props | Description | Arguments 296 | ------|-------------|--------- 297 | `@ready` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) 298 | `@change` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 299 | `@focus` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 300 | `@blur` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 301 | 302 | ## Reference: 303 | [Chargebee Components - JS Docs](https://chargebee.com/checkout-portal-docs/components-fields-integrations.html#quick-start-integration) 304 | 305 | ## Support 306 | Have any queries regarding the implementation? Reach out to [support@chargebee.com](mailto:support@chargebee.com) 307 | -------------------------------------------------------------------------------- /chargebee-js-angular/README.md: -------------------------------------------------------------------------------- 1 | # Chargebee JS Angular Wrapper 2 | 3 | Angular wrapper for Chargebee Components 4 | 5 | ## Examples 6 | 7 | For detailed examples: [Click here](https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/angular-app#readme) 8 | 9 | ## Live Demo 10 | 11 | View live demo [here](https://www.recur.in/components-examples/angular/#/example1) 12 | 13 | ## Installation 14 | 15 | Install from npm: 16 | 17 | ```bash 18 | npm install @chargebee/chargebee-js-angular-wrapper 19 | ``` 20 | 21 | ## Usage 22 | 23 | Chargebee Components requires you to initialize chargebee js with `site` and `publishableKey` 24 | 25 | > Wondering where to obtain your publishable API key? [Refer here](https://www.chargebee.com/docs/api_keys.html) 26 | 27 | In your `index.html`: 28 | 29 | ```html 30 | 31 | 32 | ... 33 | 34 | 35 | 36 |
37 | 38 | 39 | ``` 40 | 41 | ### Basic usage 42 | 43 | In your angular component 44 | 45 | component.html 46 | 47 | ```html 48 |
49 |
50 |
51 | 52 |
53 |
54 | ``` 55 | 56 | component.ts 57 | 58 | ```js 59 | import { Component } from '@angular/core'; 60 | 61 | declare var Chargebee; 62 | @Component({ 63 | selector: 'app-root', 64 | templateUrl: './app.component.html', 65 | styleUrls: ['./app.component.css'], 66 | standalone: true, 67 | imports: [ 68 | RouterOutlet, 69 | CardFieldDirective, 70 | CvvFieldDirective, 71 | NumberFieldDirective, 72 | ExpiryFieldDirective, 73 | ], 74 | }) 75 | export class AppComponent { 76 | cardComponent = null; 77 | 78 | constructor(...) { 79 | ... 80 | Chargebee.init({ 81 | site: 'your-site' 82 | publishableKey: 'your-publishable-key' 83 | }) 84 | } 85 | 86 | onReady = (cardComponent) => { 87 | this.cardComponent = cardComponent; 88 | } 89 | 90 | onTokenize = (event) => { 91 | event.preventDefault(); 92 | 93 | this.cardComponent.tokenize().then(data => { 94 | console.log('chargebee token', data.token) 95 | }); 96 | } 97 | } 98 | 99 | ``` 100 | 101 | ### A more complex example: 102 | 103 | component.html 104 | 105 | ```html 106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
{{errorMessage}}
114 | 115 |
116 |
117 | ``` 118 | 119 | component.ts 120 | 121 | ```js 122 | import { Component, ChangeDetectorRef, HostListener } from "@angular/core"; 123 | declare var Chargebee; 124 | 125 | @Component({ 126 | selector: "app-root", 127 | templateUrl: "./app.component.html", 128 | styleUrls: ["./app.component.css"], 129 | standalone: true, 130 | imports: [ 131 | RouterOutlet, 132 | CardFieldDirective, 133 | CvvFieldDirective, 134 | NumberFieldDirective, 135 | ExpiryFieldDirective, 136 | ], 137 | }) 138 | export class AppComponent { 139 | errorMessage = ""; 140 | changeDetectorRef: ChangeDetectorRef; 141 | cardComponent = null; 142 | 143 | constructor(changeDetectorRef: ChangeDetectorRef) { 144 | this.changeDetectorRef = changeDetectorRef; 145 | } 146 | 147 | errors = {}; 148 | classes = { 149 | focus: "focus", 150 | complete: "complete-custom-class", 151 | invalid: "invalid", 152 | empty: "empty", 153 | }; 154 | fonts = ["https://fonts.googleapis.com/css?family=Open+Sans"]; 155 | styles = { 156 | base: { 157 | color: "#fff", 158 | fontWeight: 600, 159 | fontFamily: "Quicksand, Open Sans, Segoe UI, sans-serif", 160 | fontSize: "16px", 161 | fontSmoothing: "antialiased", 162 | 163 | ":focus": { 164 | color: "#424770", 165 | }, 166 | 167 | "::placeholder": { 168 | color: "#9BACC8", 169 | }, 170 | 171 | ":focus::placeholder": { 172 | color: "#CFD7DF", 173 | }, 174 | }, 175 | invalid: { 176 | color: "#fff", 177 | ":focus": { 178 | color: "#FA755A", 179 | }, 180 | "::placeholder": { 181 | color: "#FFCCA5", 182 | }, 183 | }, 184 | }; 185 | 186 | onReady = (cardComponent) => { 187 | this.cardComponent = cardComponent; 188 | }; 189 | 190 | setFocus(field) { 191 | field.focus(); 192 | } 193 | 194 | onChange = (status) => { 195 | let errors = { 196 | ...this.errors, 197 | [status.field]: status.error, 198 | }; 199 | this.errors = errors; 200 | let { message } = 201 | Object.values(errors) 202 | .filter((message) => !!message) 203 | .pop() || {}; 204 | this.errorMessage = message; 205 | this.changeDetectorRef.detectChanges(); 206 | }; 207 | 208 | onSubmit = (event) => { 209 | event.preventDefault(); 210 | this.cardComponent.tokenize().then((data) => { 211 | console.log("chargebee token", data.token); 212 | }); 213 | }; 214 | } 215 | ``` 216 | 217 | 218 | ### 3DS Authorization 219 | 220 | In your angular component 221 | 222 | component.html 223 | 224 | ```html 225 |
226 |
227 |
228 | 229 |
230 |
231 | ``` 232 | 233 | component.ts 234 | 235 | ```js 236 | import { Component } from '@angular/core'; 237 | 238 | @Component({ 239 | selector: 'app-root', 240 | templateUrl: './app.component.html', 241 | styleUrls: ['./app.component.css'], 242 | standalone: true, 243 | imports: [ 244 | RouterOutlet, 245 | CardFieldDirective, 246 | CvvFieldDirective, 247 | NumberFieldDirective, 248 | ExpiryFieldDirective, 249 | ], 250 | }) 251 | export class AppComponent { 252 | cardComponent = null; 253 | intent = null; 254 | additionalData = { 255 | // Additional data to improve the chances of frictionless flow 256 | } 257 | 258 | onReady = (cardComponent) => { 259 | this.cardComponent = cardComponent; 260 | } 261 | 262 | createPaymentIntent() { 263 | // make ajax call to your server to create a paymentIntent 264 | ... 265 | this.intent = paymentIntent 266 | } 267 | 268 | authorize = (event) => { 269 | event.preventDefault(); 270 | 271 | this.cardComponent.authorizeWith3ds(this.intent, this.additionalData).then(authorizedIntent => { 272 | console.log('3DS Authorization success', authorizedIntent.id) 273 | }); 274 | } 275 | } 276 | 277 | ``` 278 | 279 | ## Directives and APIs 280 | 281 | #### cbCardField Directive ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-component-object)) 282 | 283 | | Attributes | Description | Datatype | 284 | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | 285 | | `fonts` | An array of font faces or links | [Fonts](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | 286 | | `classes` | Set of CSS classnames that get substituted for various [events](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on) | [Classes](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | 287 | | `locale` | Language code | [Locale](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | 288 | | `showTestCards` | Add ability to show test cards on test sites | Boolean | 289 | | `styles` | Set of style customizations | [Styles](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | 290 | | `placeholder` | Set of placeholders for the card fields | [Placeholder](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | 291 | 292 | ##### Events ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on)) 293 | 294 | | Props | Description | Arguments | 295 | | ---------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- | 296 | | `(ready)` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) | 297 | | `(change)` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | 298 | | `(focus)` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | 299 | | `(blur)` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | 300 | 301 | #### Individual Field directives ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object)) 302 | 303 | - cbNumberField 304 | - cbExpiryField 305 | - cbCvvField 306 | 307 | | Props | Description | Datatype | 308 | | ------------- | ---------------------------- | -------------------------------------------------------------------------------------------------- | 309 | | `styles` | Styles for inidividual field | [Styles](http://localhost:8081/checkout-portal-docs/components-fields-reference.html#parameters-5) | 310 | | `placeholder` | Placeholder for the field | String | 311 | 312 | ##### Event Props ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on-2)) 313 | 314 | | Props | Description | Arguments | 315 | | ---------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- | 316 | | `(ready)` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) | 317 | | `(change)` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | 318 | | `(focus)` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | 319 | | `(blur)` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | 320 | 321 | ## Reference: 322 | 323 | [Chargebee Components - JS Docs](https://chargebee.com/checkout-portal-docs/components-fields-integrations.html#quick-start-integration) 324 | 325 | ## Support 326 | 327 | Have any queries regarding the implementation? Reach out to [support@chargebee.com](mailto:support@chargebee.com) 328 | -------------------------------------------------------------------------------- /chargebee-js-angular/projects/chargebee-js-angular-wrapper/README.md: -------------------------------------------------------------------------------- 1 | # Chargebee JS Angular Wrapper 2 | 3 | Angular wrapper for Chargebee Components 4 | 5 | ## Examples 6 | 7 | For detailed examples: [Click here](https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/angular-app#readme) 8 | 9 | ## Live Demo 10 | 11 | View live demo [here](https://www.recur.in/components-examples/angular/#/example1) 12 | 13 | ## Installation 14 | 15 | Install from npm: 16 | 17 | ```bash 18 | npm install @chargebee/chargebee-js-angular-wrapper 19 | ``` 20 | 21 | ## Usage 22 | 23 | Chargebee Components requires you to initialize chargebee js with `site` and `publishableKey` 24 | 25 | > Wondering where to obtain your publishable API key? [Refer here](https://www.chargebee.com/docs/api_keys.html) 26 | 27 | In your `index.html`: 28 | 29 | ```html 30 | 31 | 32 | ... 33 | 34 | 35 | 36 |
37 | 38 | 39 | ``` 40 | 41 | ### Basic usage 42 | 43 | In your angular component 44 | 45 | component.html 46 | 47 | ```html 48 |
49 |
50 |
51 | 52 |
53 |
54 | ``` 55 | 56 | component.ts 57 | 58 | ```js 59 | import { Component } from '@angular/core'; 60 | 61 | declare var Chargebee; 62 | @Component({ 63 | selector: 'app-root', 64 | templateUrl: './app.component.html', 65 | styleUrls: ['./app.component.css'], 66 | standalone: true, 67 | imports: [ 68 | RouterOutlet, 69 | CardFieldDirective, 70 | CvvFieldDirective, 71 | NumberFieldDirective, 72 | ExpiryFieldDirective, 73 | ], 74 | }) 75 | export class AppComponent { 76 | cardComponent = null; 77 | 78 | constructor(...) { 79 | ... 80 | Chargebee.init({ 81 | site: 'your-site' 82 | publishableKey: 'your-publishable-key' 83 | }) 84 | } 85 | 86 | onReady = (cardComponent) => { 87 | this.cardComponent = cardComponent; 88 | } 89 | 90 | onTokenize = (event) => { 91 | event.preventDefault(); 92 | 93 | this.cardComponent.tokenize().then(data => { 94 | console.log('chargebee token', data.token) 95 | }); 96 | } 97 | } 98 | 99 | ``` 100 | 101 | ### A more complex example: 102 | 103 | component.html 104 | 105 | ```html 106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
{{errorMessage}}
114 | 115 |
116 |
117 | ``` 118 | 119 | component.ts 120 | 121 | ```js 122 | import { Component, ChangeDetectorRef, HostListener } from "@angular/core"; 123 | declare var Chargebee; 124 | 125 | @Component({ 126 | selector: "app-root", 127 | templateUrl: "./app.component.html", 128 | styleUrls: ["./app.component.css"], 129 | standalone: true, 130 | imports: [ 131 | RouterOutlet, 132 | CardFieldDirective, 133 | CvvFieldDirective, 134 | NumberFieldDirective, 135 | ExpiryFieldDirective, 136 | ], 137 | }) 138 | export class AppComponent { 139 | errorMessage = ""; 140 | changeDetectorRef: ChangeDetectorRef; 141 | cardComponent = null; 142 | 143 | constructor(changeDetectorRef: ChangeDetectorRef) { 144 | this.changeDetectorRef = changeDetectorRef; 145 | } 146 | 147 | errors = {}; 148 | classes = { 149 | focus: "focus", 150 | complete: "complete-custom-class", 151 | invalid: "invalid", 152 | empty: "empty", 153 | }; 154 | fonts = ["https://fonts.googleapis.com/css?family=Open+Sans"]; 155 | styles = { 156 | base: { 157 | color: "#fff", 158 | fontWeight: 600, 159 | fontFamily: "Quicksand, Open Sans, Segoe UI, sans-serif", 160 | fontSize: "16px", 161 | fontSmoothing: "antialiased", 162 | 163 | ":focus": { 164 | color: "#424770", 165 | }, 166 | 167 | "::placeholder": { 168 | color: "#9BACC8", 169 | }, 170 | 171 | ":focus::placeholder": { 172 | color: "#CFD7DF", 173 | }, 174 | }, 175 | invalid: { 176 | color: "#fff", 177 | ":focus": { 178 | color: "#FA755A", 179 | }, 180 | "::placeholder": { 181 | color: "#FFCCA5", 182 | }, 183 | }, 184 | }; 185 | 186 | onReady = (cardComponent) => { 187 | this.cardComponent = cardComponent; 188 | }; 189 | 190 | setFocus(field) { 191 | field.focus(); 192 | } 193 | 194 | onChange = (status) => { 195 | let errors = { 196 | ...this.errors, 197 | [status.field]: status.error, 198 | }; 199 | this.errors = errors; 200 | let { message } = 201 | Object.values(errors) 202 | .filter((message) => !!message) 203 | .pop() || {}; 204 | this.errorMessage = message; 205 | this.changeDetectorRef.detectChanges(); 206 | }; 207 | 208 | onSubmit = (event) => { 209 | event.preventDefault(); 210 | this.cardComponent.tokenize().then((data) => { 211 | console.log("chargebee token", data.token); 212 | }); 213 | }; 214 | } 215 | ``` 216 | 217 | 218 | ### 3DS Authorization 219 | 220 | In your angular component 221 | 222 | component.html 223 | 224 | ```html 225 |
226 |
227 |
228 | 229 |
230 |
231 | ``` 232 | 233 | component.ts 234 | 235 | ```js 236 | import { Component } from '@angular/core'; 237 | 238 | @Component({ 239 | selector: 'app-root', 240 | templateUrl: './app.component.html', 241 | styleUrls: ['./app.component.css'], 242 | standalone: true, 243 | imports: [ 244 | RouterOutlet, 245 | CardFieldDirective, 246 | CvvFieldDirective, 247 | NumberFieldDirective, 248 | ExpiryFieldDirective, 249 | ], 250 | }) 251 | export class AppComponent { 252 | cardComponent = null; 253 | intent = null; 254 | additionalData = { 255 | // Additional data to improve the chances of frictionless flow 256 | } 257 | 258 | onReady = (cardComponent) => { 259 | this.cardComponent = cardComponent; 260 | } 261 | 262 | createPaymentIntent() { 263 | // make ajax call to your server to create a paymentIntent 264 | ... 265 | this.intent = paymentIntent 266 | } 267 | 268 | authorize = (event) => { 269 | event.preventDefault(); 270 | 271 | this.cardComponent.authorizeWith3ds(this.intent, this.additionalData).then(authorizedIntent => { 272 | console.log('3DS Authorization success', authorizedIntent.id) 273 | }); 274 | } 275 | } 276 | 277 | ``` 278 | 279 | ## Directives and APIs 280 | 281 | #### cbCardField Directive ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-component-object)) 282 | 283 | | Attributes | Description | Datatype | 284 | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | 285 | | `fonts` | An array of font faces or links | [Fonts](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | 286 | | `classes` | Set of CSS classnames that get substituted for various [events](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on) | [Classes](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | 287 | | `locale` | Language code | [Locale](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | 288 | | `showTestCards` | Add ability to show test cards on test sites | Boolean | 289 | | `styles` | Set of style customizations | [Styles](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | 290 | | `placeholder` | Set of placeholders for the card fields | [Placeholder](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | 291 | 292 | ##### Events ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on)) 293 | 294 | | Props | Description | Arguments | 295 | | ---------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- | 296 | | `(ready)` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) | 297 | | `(change)` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | 298 | | `(focus)` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | 299 | | `(blur)` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | 300 | 301 | #### Individual Field directives ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object)) 302 | 303 | - cbNumberField 304 | - cbExpiryField 305 | - cbCvvField 306 | 307 | | Props | Description | Datatype | 308 | | ------------- | ---------------------------- | -------------------------------------------------------------------------------------------------- | 309 | | `styles` | Styles for inidividual field | [Styles](http://localhost:8081/checkout-portal-docs/components-fields-reference.html#parameters-5) | 310 | | `placeholder` | Placeholder for the field | String | 311 | 312 | ##### Event Props ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on-2)) 313 | 314 | | Props | Description | Arguments | 315 | | ---------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- | 316 | | `(ready)` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) | 317 | | `(change)` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | 318 | | `(focus)` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | 319 | | `(blur)` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | 320 | 321 | ## Reference: 322 | 323 | [Chargebee Components - JS Docs](https://chargebee.com/checkout-portal-docs/components-fields-integrations.html#quick-start-integration) 324 | 325 | ## Support 326 | 327 | Have any queries regarding the implementation? Reach out to [support@chargebee.com](mailto:support@chargebee.com) 328 | -------------------------------------------------------------------------------- /chargebee-js-react/README.md: -------------------------------------------------------------------------------- 1 | # Chargebee JS React Wrapper 2 | React wrapper for Chargebee Components 3 | 4 | ## Examples 5 | For detailed examples: [Click here](https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/react-app#readme) 6 | 7 | ## Live Demo 8 | View live demo [here](https://www.recur.in/components-examples/react/#/example1) 9 | 10 | ## Installation 11 | Install from npm: 12 | ```bash 13 | npm install @chargebee/chargebee-js-react-wrapper 14 | ``` 15 | 16 | ## Usage 17 | Chargebee Components requires you to initialize chargebee js with `site` and `publishableKey` 18 | 19 | > Wondering where to obtain your publishable API key? [Refer here](https://www.chargebee.com/docs/api_keys.html) 20 | 21 | In your `index.html`: 22 | ```html 23 | 24 | 25 | ... 26 | 27 | 33 | 34 | 35 |
36 | 37 | 38 | ``` 39 | 40 | ### Basic usage 41 | In your react component 42 | ```jsx 43 | import { CardComponent } from '@chargebee/chargebee-js-react-wrapper'; 44 | 45 | class App extends React.Component { 46 | cardRef = React.createRef() 47 | ... 48 | onSubmit = (e) => { 49 | if(e) e.preventDefault() 50 | this.cardRef.current.tokenize() 51 | .then((data) => { 52 | console.log('chargebee token', data.token) 53 | }); 54 | } 55 | ... 56 | render() { 57 | // Using combined mode 58 | return( 59 |
60 |
61 | ... 62 | 63 | 64 | ... 65 | 66 |
67 | ) 68 | } 69 | } 70 | ``` 71 | 72 | ### A more complex example: 73 | ```jsx 74 | import {CardComponent, CardNumber, CardExpiry, CardCVV} from "react-cb"; 75 | import './App.css' 76 | 77 | class App extends Component { 78 | cardRef = React.createRef() 79 | 80 | state = { 81 | errors: {}, 82 | errorMessage: '', 83 | // CSS class names for field's status 84 | classes: { 85 | 'focus': 'focus-css-class', 86 | 'complete': 'complete-css-class', 87 | 'invalid': 'invalid-css-class', 88 | 'empty': 'empty-css-class', 89 | }, 90 | // Google Fonts and other whitelisted fonts 91 | fonts: [ 92 | 'https://fonts.googleapis.com/css?family=Open+Sans' 93 | ], 94 | // Style customizations 95 | styles: { 96 | base: { 97 | color: '#fff', 98 | fontWeight: 600, 99 | fontFamily: 'Quicksand, Open Sans, Segoe UI, sans-serif', 100 | fontSize: '16px', 101 | fontSmoothing: 'antialiased', 102 | 103 | ':focus': { 104 | color: '#424770', 105 | }, 106 | 107 | '::placeholder': { 108 | color: '#9BACC8', 109 | }, 110 | 111 | ':focus::placeholder': { 112 | color: '#CFD7DF', 113 | }, 114 | }, 115 | invalid: { 116 | color: '#fff', 117 | ':focus': { 118 | color: '#FA755A', 119 | }, 120 | '::placeholder': { 121 | color: '#FFCCA5', 122 | }, 123 | }, 124 | } 125 | } 126 | 127 | onSubmit = (e) => { 128 | if(e) e.preventDefault() 129 | if(this.cardRef) { 130 | // Call tokenize method on card element 131 | this.cardRef.current.tokenize().then((data) => { 132 | console.log('chargebee token', data.token) 133 | }); 134 | } 135 | } 136 | 137 | onChange = (status) => { 138 | let errors = { 139 | ...this.state.errors, 140 | [status.field]: status.error 141 | }; 142 | let errMessages = Object.values(errors).filter(message => !!message); 143 | this.setState({ 144 | errors, 145 | errorMessage: errMessages.pop() || '', 146 | }) 147 | } 148 | 149 | onReady = (el) => { 150 | el.focus(); 151 | } 152 | 153 | render() { 154 | const { fonts, styles, classes, locale } = this.state; 155 | // Using individual fields mode 156 | return ( 157 |
158 |
159 |
160 |
161 | 170 | 171 | 172 | 173 | 174 |
175 | 176 |
177 |
{this.state.errorMessage}
178 |
179 |
180 | ); 181 | } 182 | } 183 | 184 | ``` 185 | 186 | ## Server Side Rendering using NextJS 187 | #### Pre-requisites: 188 | The chargebee instance should be initialized with `site` and `API Key` and the initiated cb instance should be passed as props to the `Provider` component. A validation is done to check 3 things: 189 | * Passed `site` as non-empty string, during initialization call 190 | * Passed `API Key` as non-empty string, during initialization call 191 | * cbInstance initialized status 192 | 193 | Also, a project using `NextJS` should be setup 194 | 195 | #### Usage: 196 | 1. Load `chargebee.js script` before any other code/script execution(generally `index.html`). This is to enable `Chargebee` be a part of client side browser `window` 197 | ```html 198 | 199 | ``` 200 | 201 | 2. Initialize chargebee inside componentDidMount(), do not use it in constructor() or render() when using SSR 202 | ```jsx 203 | componentDidMount() { 204 | .. 205 | // initialize with site, publishableKey 206 | window.Chargebee.init({ 207 | site: "...", 208 | publishableKey: "..." 209 | }); 210 | 211 | // get cb Instance 212 | cbInstance = window.Chargebee.getInstance(); 213 | .. 214 | } 215 | ``` 216 | 217 | 3. Import the Provider, CardComponent, etc. components from the module 218 | ```jsx 219 | import {CardComponent, CardNumber, CardExpiry, CardCVV, Provider} from "@chargebee/chargebee-js-react-wrapper"; 220 | ``` 221 | 222 | 4. Within your custom component, wrap the `CardComponent` inside a `Provider` component, pass the cbInstance as props 223 | ```jsx 224 | 225 | 226 | ... 227 | 228 | 229 | ``` 230 | 231 | #### Example: 232 | Detailed example : 233 | ```jsx 234 | import {CardComponent, CardNumber, CardExpiry, CardCVV, Provider} from "@chargebee/chargebee-js-react-wrapper"; 235 | 236 | ... 237 | componentDidMount() { 238 | window.Chargebee.init({ 239 | site: "honeycomics-v3-test", 240 | publishableKey: "your_site_pub_api_key" 241 | }) 242 | 243 | this.setState({ 244 | cbInstance: window.Chargebee.getInstance() 245 | }) 246 | } 247 | 248 | render() { 249 | ... 250 | 251 | ... 252 | 253 | 261 |
262 | {/* Card number component */} 263 | 264 | 265 |
266 | 267 |
268 |
269 | {/* Card expiry component */} 270 | 271 | 272 |
273 | 274 |
275 | {/* Card cvv component */} 276 | 277 | 278 |
279 | 280 |
281 | 282 | 283 | ... 284 | } 285 | ``` 286 | 287 | #### Run the application 288 | * npm install 289 | * (NextJS project structure with chargebee-js-react-wrapper installed) -> npm run build / start / dev 290 | ```jsx 291 | "scripts": { 292 | "dev": "next dev", 293 | "build": "next build", 294 | "start": "next start" 295 | } 296 | ``` 297 | 298 | 299 | ### 3DS Authorization 300 | In your react component 301 | ```jsx 302 | import { CardComponent } from '@chargebee/chargebee-js-react-wrapper'; 303 | 304 | class App extends React.Component { 305 | cardRef = React.createRef() 306 | ... 307 | createPaymentIntent() { 308 | // make ajax call to server to create payment intent 309 | } 310 | ... 311 | componentDidMount() { 312 | this.createPaymentIntent().then(intent => { 313 | this.state.intent = intent; 314 | }) 315 | } 316 | ... 317 | onSubmit = (e) => { 318 | if(e) e.preventDefault() 319 | 320 | const intent = this.state.intent; 321 | const additionalData = this.state.additionalData; 322 | 323 | this.cardRef.current.authorizeWith3ds(intent, additionalData) 324 | .then(authorizedPaymentIntent => { 325 | console.log('Authorized payment intent', authorizedPaymentIntent.id) 326 | }).catch(error => { 327 | console.error('Error occured', error) 328 | }); 329 | } 330 | ... 331 | render() { 332 | // Using combined mode 333 | return( 334 |
335 |
336 | ... 337 | 338 | 339 | ... 340 | 341 |
342 | ) 343 | } 344 | } 345 | ``` 346 | 347 | ## Components and APIs 348 | 349 | #### Card Component ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-component-object)) 350 | Props | Description | Datatype 351 | ------|-------------|--------- 352 | `className` | CSS Class name for the container div | String 353 | `fonts` | An array of font faces or links | [Fonts](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) 354 | `classes` | Set of CSS classnames that get substituted for various [events](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on) | [Classes](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) 355 | `locale` | Language code | [Locale](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) 356 | `styles` | Set of style customizations | [Styles](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) 357 | `placeholder` | Set of placeholders for the card fields | [Placeholder](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) 358 | `ref` | React Ref element for tokenizing data | [ReactRef](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) 359 | `showTestCards` | Add ability to show test cards on test sites | Boolean 360 | 361 | ##### Event Props ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on)) 362 | Props | Description | Arguments 363 | ------|-------------|--------- 364 | `onReady` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) 365 | `onChange` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 366 | `onFocus` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 367 | `onBlur` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 368 | `onKeyPress` | Triggers when a key is pressed inside component
Supports `ESC` key | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 369 | 370 | #### Field Components ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object)) 371 | * CardNumber 372 | * CardExpiry 373 | * CardCVV 374 | 375 | Props | Description | Datatype 376 | ------|-------------|--------- 377 | `className` | CSS Classname for container `div` | String 378 | `styles` | Styles for inidividual field | [Styles](http://localhost:8081/checkout-portal-docs/components-fields-reference.html#parameters-5) 379 | `placeholder` | Placeholder for the field | String 380 | 381 | ##### Event Props ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on-2)) 382 | Props | Description | Arguments 383 | ------|-------------|--------- 384 | `onReady` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) 385 | `onChange` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 386 | `onFocus` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 387 | `onBlur` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) 388 | 389 | ## Reference: 390 | [Chargebee Components - JS Docs](https://chargebee.com/checkout-portal-docs/components-fields-integrations.html#quick-start-integration) 391 | 392 | ## Support 393 | Have any queries regarding the implementation? Reach out to [support@chargebee.com](mailto:support@chargebee.com) 394 | -------------------------------------------------------------------------------- /chargebee-js-vue/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@chargebee/chargebee-js-vue-wrapper", 3 | "version": "0.3.2", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "@chargebee/chargebee-js-vue-wrapper", 9 | "version": "0.3.2", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "@vitejs/plugin-vue": "^2.3.3", 13 | "@vue/compiler-sfc": "^3.2.37", 14 | "vite": "^2.9.9", 15 | "vue": "^3.3.4" 16 | }, 17 | "peerDependencies": { 18 | "vue": "^3.3.4" 19 | } 20 | }, 21 | "node_modules/@babel/parser": { 22 | "version": "7.22.10", 23 | "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz", 24 | "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==", 25 | "dev": true, 26 | "bin": { 27 | "parser": "bin/babel-parser.js" 28 | }, 29 | "engines": { 30 | "node": ">=6.0.0" 31 | } 32 | }, 33 | "node_modules/@jridgewell/sourcemap-codec": { 34 | "version": "1.4.15", 35 | "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", 36 | "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", 37 | "dev": true 38 | }, 39 | "node_modules/@vitejs/plugin-vue": { 40 | "version": "2.3.3", 41 | "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz", 42 | "integrity": "sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==", 43 | "dev": true, 44 | "engines": { 45 | "node": ">=12.0.0" 46 | }, 47 | "peerDependencies": { 48 | "vite": "^2.5.10", 49 | "vue": "^3.2.25" 50 | } 51 | }, 52 | "node_modules/@vue/compiler-core": { 53 | "version": "3.3.4", 54 | "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz", 55 | "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==", 56 | "dev": true, 57 | "dependencies": { 58 | "@babel/parser": "^7.21.3", 59 | "@vue/shared": "3.3.4", 60 | "estree-walker": "^2.0.2", 61 | "source-map-js": "^1.0.2" 62 | } 63 | }, 64 | "node_modules/@vue/compiler-dom": { 65 | "version": "3.3.4", 66 | "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz", 67 | "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==", 68 | "dev": true, 69 | "dependencies": { 70 | "@vue/compiler-core": "3.3.4", 71 | "@vue/shared": "3.3.4" 72 | } 73 | }, 74 | "node_modules/@vue/compiler-sfc": { 75 | "version": "3.3.4", 76 | "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz", 77 | "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==", 78 | "dev": true, 79 | "dependencies": { 80 | "@babel/parser": "^7.20.15", 81 | "@vue/compiler-core": "3.3.4", 82 | "@vue/compiler-dom": "3.3.4", 83 | "@vue/compiler-ssr": "3.3.4", 84 | "@vue/reactivity-transform": "3.3.4", 85 | "@vue/shared": "3.3.4", 86 | "estree-walker": "^2.0.2", 87 | "magic-string": "^0.30.0", 88 | "postcss": "^8.1.10", 89 | "source-map-js": "^1.0.2" 90 | } 91 | }, 92 | "node_modules/@vue/compiler-ssr": { 93 | "version": "3.3.4", 94 | "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz", 95 | "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==", 96 | "dev": true, 97 | "dependencies": { 98 | "@vue/compiler-dom": "3.3.4", 99 | "@vue/shared": "3.3.4" 100 | } 101 | }, 102 | "node_modules/@vue/reactivity": { 103 | "version": "3.3.4", 104 | "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz", 105 | "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==", 106 | "dev": true, 107 | "dependencies": { 108 | "@vue/shared": "3.3.4" 109 | } 110 | }, 111 | "node_modules/@vue/reactivity-transform": { 112 | "version": "3.3.4", 113 | "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz", 114 | "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==", 115 | "dev": true, 116 | "dependencies": { 117 | "@babel/parser": "^7.20.15", 118 | "@vue/compiler-core": "3.3.4", 119 | "@vue/shared": "3.3.4", 120 | "estree-walker": "^2.0.2", 121 | "magic-string": "^0.30.0" 122 | } 123 | }, 124 | "node_modules/@vue/runtime-core": { 125 | "version": "3.3.4", 126 | "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz", 127 | "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==", 128 | "dev": true, 129 | "dependencies": { 130 | "@vue/reactivity": "3.3.4", 131 | "@vue/shared": "3.3.4" 132 | } 133 | }, 134 | "node_modules/@vue/runtime-dom": { 135 | "version": "3.3.4", 136 | "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz", 137 | "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==", 138 | "dev": true, 139 | "dependencies": { 140 | "@vue/runtime-core": "3.3.4", 141 | "@vue/shared": "3.3.4", 142 | "csstype": "^3.1.1" 143 | } 144 | }, 145 | "node_modules/@vue/server-renderer": { 146 | "version": "3.3.4", 147 | "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz", 148 | "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==", 149 | "dev": true, 150 | "dependencies": { 151 | "@vue/compiler-ssr": "3.3.4", 152 | "@vue/shared": "3.3.4" 153 | }, 154 | "peerDependencies": { 155 | "vue": "3.3.4" 156 | } 157 | }, 158 | "node_modules/@vue/shared": { 159 | "version": "3.3.4", 160 | "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz", 161 | "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==", 162 | "dev": true 163 | }, 164 | "node_modules/csstype": { 165 | "version": "3.1.2", 166 | "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", 167 | "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", 168 | "dev": true 169 | }, 170 | "node_modules/esbuild": { 171 | "version": "0.14.48", 172 | "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.48.tgz", 173 | "integrity": "sha512-w6N1Yn5MtqK2U1/WZTX9ZqUVb8IOLZkZ5AdHkT6x3cHDMVsYWC7WPdiLmx19w3i4Rwzy5LqsEMtVihG3e4rFzA==", 174 | "dev": true, 175 | "hasInstallScript": true, 176 | "bin": { 177 | "esbuild": "bin/esbuild" 178 | }, 179 | "engines": { 180 | "node": ">=12" 181 | }, 182 | "optionalDependencies": { 183 | "esbuild-android-64": "0.14.48", 184 | "esbuild-android-arm64": "0.14.48", 185 | "esbuild-darwin-64": "0.14.48", 186 | "esbuild-darwin-arm64": "0.14.48", 187 | "esbuild-freebsd-64": "0.14.48", 188 | "esbuild-freebsd-arm64": "0.14.48", 189 | "esbuild-linux-32": "0.14.48", 190 | "esbuild-linux-64": "0.14.48", 191 | "esbuild-linux-arm": "0.14.48", 192 | "esbuild-linux-arm64": "0.14.48", 193 | "esbuild-linux-mips64le": "0.14.48", 194 | "esbuild-linux-ppc64le": "0.14.48", 195 | "esbuild-linux-riscv64": "0.14.48", 196 | "esbuild-linux-s390x": "0.14.48", 197 | "esbuild-netbsd-64": "0.14.48", 198 | "esbuild-openbsd-64": "0.14.48", 199 | "esbuild-sunos-64": "0.14.48", 200 | "esbuild-windows-32": "0.14.48", 201 | "esbuild-windows-64": "0.14.48", 202 | "esbuild-windows-arm64": "0.14.48" 203 | } 204 | }, 205 | "node_modules/esbuild-android-64": { 206 | "version": "0.14.48", 207 | "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.48.tgz", 208 | "integrity": "sha512-3aMjboap/kqwCUpGWIjsk20TtxVoKck8/4Tu19rubh7t5Ra0Yrpg30Mt1QXXlipOazrEceGeWurXKeFJgkPOUg==", 209 | "cpu": [ 210 | "x64" 211 | ], 212 | "dev": true, 213 | "optional": true, 214 | "os": [ 215 | "android" 216 | ], 217 | "engines": { 218 | "node": ">=12" 219 | } 220 | }, 221 | "node_modules/esbuild-android-arm64": { 222 | "version": "0.14.48", 223 | "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.48.tgz", 224 | "integrity": "sha512-vptI3K0wGALiDq+EvRuZotZrJqkYkN5282iAfcffjI5lmGG9G1ta/CIVauhY42MBXwEgDJkweiDcDMRLzBZC4g==", 225 | "cpu": [ 226 | "arm64" 227 | ], 228 | "dev": true, 229 | "optional": true, 230 | "os": [ 231 | "android" 232 | ], 233 | "engines": { 234 | "node": ">=12" 235 | } 236 | }, 237 | "node_modules/esbuild-darwin-64": { 238 | "version": "0.14.48", 239 | "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.48.tgz", 240 | "integrity": "sha512-gGQZa4+hab2Va/Zww94YbshLuWteyKGD3+EsVon8EWTWhnHFRm5N9NbALNbwi/7hQ/hM1Zm4FuHg+k6BLsl5UA==", 241 | "cpu": [ 242 | "x64" 243 | ], 244 | "dev": true, 245 | "optional": true, 246 | "os": [ 247 | "darwin" 248 | ], 249 | "engines": { 250 | "node": ">=12" 251 | } 252 | }, 253 | "node_modules/esbuild-darwin-arm64": { 254 | "version": "0.14.48", 255 | "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.48.tgz", 256 | "integrity": "sha512-bFjnNEXjhZT+IZ8RvRGNJthLWNHV5JkCtuOFOnjvo5pC0sk2/QVk0Qc06g2PV3J0TcU6kaPC3RN9yy9w2PSLEA==", 257 | "cpu": [ 258 | "arm64" 259 | ], 260 | "dev": true, 261 | "optional": true, 262 | "os": [ 263 | "darwin" 264 | ], 265 | "engines": { 266 | "node": ">=12" 267 | } 268 | }, 269 | "node_modules/esbuild-freebsd-64": { 270 | "version": "0.14.48", 271 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.48.tgz", 272 | "integrity": "sha512-1NOlwRxmOsnPcWOGTB10JKAkYSb2nue0oM1AfHWunW/mv3wERfJmnYlGzL3UAOIUXZqW8GeA2mv+QGwq7DToqA==", 273 | "cpu": [ 274 | "x64" 275 | ], 276 | "dev": true, 277 | "optional": true, 278 | "os": [ 279 | "freebsd" 280 | ], 281 | "engines": { 282 | "node": ">=12" 283 | } 284 | }, 285 | "node_modules/esbuild-freebsd-arm64": { 286 | "version": "0.14.48", 287 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.48.tgz", 288 | "integrity": "sha512-gXqKdO8wabVcYtluAbikDH2jhXp+Klq5oCD5qbVyUG6tFiGhrC9oczKq3vIrrtwcxDQqK6+HDYK8Zrd4bCA9Gw==", 289 | "cpu": [ 290 | "arm64" 291 | ], 292 | "dev": true, 293 | "optional": true, 294 | "os": [ 295 | "freebsd" 296 | ], 297 | "engines": { 298 | "node": ">=12" 299 | } 300 | }, 301 | "node_modules/esbuild-linux-32": { 302 | "version": "0.14.48", 303 | "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.48.tgz", 304 | "integrity": "sha512-ghGyDfS289z/LReZQUuuKq9KlTiTspxL8SITBFQFAFRA/IkIvDpnZnCAKTCjGXAmUqroMQfKJXMxyjJA69c/nQ==", 305 | "cpu": [ 306 | "ia32" 307 | ], 308 | "dev": true, 309 | "optional": true, 310 | "os": [ 311 | "linux" 312 | ], 313 | "engines": { 314 | "node": ">=12" 315 | } 316 | }, 317 | "node_modules/esbuild-linux-64": { 318 | "version": "0.14.48", 319 | "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.48.tgz", 320 | "integrity": "sha512-vni3p/gppLMVZLghI7oMqbOZdGmLbbKR23XFARKnszCIBpEMEDxOMNIKPmMItQrmH/iJrL1z8Jt2nynY0bE1ug==", 321 | "cpu": [ 322 | "x64" 323 | ], 324 | "dev": true, 325 | "optional": true, 326 | "os": [ 327 | "linux" 328 | ], 329 | "engines": { 330 | "node": ">=12" 331 | } 332 | }, 333 | "node_modules/esbuild-linux-arm": { 334 | "version": "0.14.48", 335 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.48.tgz", 336 | "integrity": "sha512-+VfSV7Akh1XUiDNXgqgY1cUP1i2vjI+BmlyXRfVz5AfV3jbpde8JTs5Q9sYgaoq5cWfuKfoZB/QkGOI+QcL1Tw==", 337 | "cpu": [ 338 | "arm" 339 | ], 340 | "dev": true, 341 | "optional": true, 342 | "os": [ 343 | "linux" 344 | ], 345 | "engines": { 346 | "node": ">=12" 347 | } 348 | }, 349 | "node_modules/esbuild-linux-arm64": { 350 | "version": "0.14.48", 351 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.48.tgz", 352 | "integrity": "sha512-3CFsOlpoxlKPRevEHq8aAntgYGYkE1N9yRYAcPyng/p4Wyx0tPR5SBYsxLKcgPB9mR8chHEhtWYz6EZ+H199Zw==", 353 | "cpu": [ 354 | "arm64" 355 | ], 356 | "dev": true, 357 | "optional": true, 358 | "os": [ 359 | "linux" 360 | ], 361 | "engines": { 362 | "node": ">=12" 363 | } 364 | }, 365 | "node_modules/esbuild-linux-mips64le": { 366 | "version": "0.14.48", 367 | "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.48.tgz", 368 | "integrity": "sha512-cs0uOiRlPp6ymknDnjajCgvDMSsLw5mST2UXh+ZIrXTj2Ifyf2aAP3Iw4DiqgnyYLV2O/v/yWBJx+WfmKEpNLA==", 369 | "cpu": [ 370 | "mips64el" 371 | ], 372 | "dev": true, 373 | "optional": true, 374 | "os": [ 375 | "linux" 376 | ], 377 | "engines": { 378 | "node": ">=12" 379 | } 380 | }, 381 | "node_modules/esbuild-linux-ppc64le": { 382 | "version": "0.14.48", 383 | "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.48.tgz", 384 | "integrity": "sha512-+2F0vJMkuI0Wie/wcSPDCqXvSFEELH7Jubxb7mpWrA/4NpT+/byjxDz0gG6R1WJoeDefcrMfpBx4GFNN1JQorQ==", 385 | "cpu": [ 386 | "ppc64" 387 | ], 388 | "dev": true, 389 | "optional": true, 390 | "os": [ 391 | "linux" 392 | ], 393 | "engines": { 394 | "node": ">=12" 395 | } 396 | }, 397 | "node_modules/esbuild-linux-riscv64": { 398 | "version": "0.14.48", 399 | "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.48.tgz", 400 | "integrity": "sha512-BmaK/GfEE+5F2/QDrIXteFGKnVHGxlnK9MjdVKMTfvtmudjY3k2t8NtlY4qemKSizc+QwyombGWTBDc76rxePA==", 401 | "cpu": [ 402 | "riscv64" 403 | ], 404 | "dev": true, 405 | "optional": true, 406 | "os": [ 407 | "linux" 408 | ], 409 | "engines": { 410 | "node": ">=12" 411 | } 412 | }, 413 | "node_modules/esbuild-linux-s390x": { 414 | "version": "0.14.48", 415 | "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.48.tgz", 416 | "integrity": "sha512-tndw/0B9jiCL+KWKo0TSMaUm5UWBLsfCKVdbfMlb3d5LeV9WbijZ8Ordia8SAYv38VSJWOEt6eDCdOx8LqkC4g==", 417 | "cpu": [ 418 | "s390x" 419 | ], 420 | "dev": true, 421 | "optional": true, 422 | "os": [ 423 | "linux" 424 | ], 425 | "engines": { 426 | "node": ">=12" 427 | } 428 | }, 429 | "node_modules/esbuild-netbsd-64": { 430 | "version": "0.14.48", 431 | "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.48.tgz", 432 | "integrity": "sha512-V9hgXfwf/T901Lr1wkOfoevtyNkrxmMcRHyticybBUHookznipMOHoF41Al68QBsqBxnITCEpjjd4yAos7z9Tw==", 433 | "cpu": [ 434 | "x64" 435 | ], 436 | "dev": true, 437 | "optional": true, 438 | "os": [ 439 | "netbsd" 440 | ], 441 | "engines": { 442 | "node": ">=12" 443 | } 444 | }, 445 | "node_modules/esbuild-openbsd-64": { 446 | "version": "0.14.48", 447 | "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.48.tgz", 448 | "integrity": "sha512-+IHf4JcbnnBl4T52egorXMatil/za0awqzg2Vy6FBgPcBpisDWT2sVz/tNdrK9kAqj+GZG/jZdrOkj7wsrNTKA==", 449 | "cpu": [ 450 | "x64" 451 | ], 452 | "dev": true, 453 | "optional": true, 454 | "os": [ 455 | "openbsd" 456 | ], 457 | "engines": { 458 | "node": ">=12" 459 | } 460 | }, 461 | "node_modules/esbuild-sunos-64": { 462 | "version": "0.14.48", 463 | "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.48.tgz", 464 | "integrity": "sha512-77m8bsr5wOpOWbGi9KSqDphcq6dFeJyun8TA+12JW/GAjyfTwVtOnN8DOt6DSPUfEV+ltVMNqtXUeTeMAxl5KA==", 465 | "cpu": [ 466 | "x64" 467 | ], 468 | "dev": true, 469 | "optional": true, 470 | "os": [ 471 | "sunos" 472 | ], 473 | "engines": { 474 | "node": ">=12" 475 | } 476 | }, 477 | "node_modules/esbuild-windows-32": { 478 | "version": "0.14.48", 479 | "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.48.tgz", 480 | "integrity": "sha512-EPgRuTPP8vK9maxpTGDe5lSoIBHGKO/AuxDncg5O3NkrPeLNdvvK8oywB0zGaAZXxYWfNNSHskvvDgmfVTguhg==", 481 | "cpu": [ 482 | "ia32" 483 | ], 484 | "dev": true, 485 | "optional": true, 486 | "os": [ 487 | "win32" 488 | ], 489 | "engines": { 490 | "node": ">=12" 491 | } 492 | }, 493 | "node_modules/esbuild-windows-64": { 494 | "version": "0.14.48", 495 | "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.48.tgz", 496 | "integrity": "sha512-YmpXjdT1q0b8ictSdGwH3M8VCoqPpK1/UArze3X199w6u8hUx3V8BhAi1WjbsfDYRBanVVtduAhh2sirImtAvA==", 497 | "cpu": [ 498 | "x64" 499 | ], 500 | "dev": true, 501 | "optional": true, 502 | "os": [ 503 | "win32" 504 | ], 505 | "engines": { 506 | "node": ">=12" 507 | } 508 | }, 509 | "node_modules/esbuild-windows-arm64": { 510 | "version": "0.14.48", 511 | "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.48.tgz", 512 | "integrity": "sha512-HHaOMCsCXp0rz5BT2crTka6MPWVno121NKApsGs/OIW5QC0ggC69YMGs1aJct9/9FSUF4A1xNE/cLvgB5svR4g==", 513 | "cpu": [ 514 | "arm64" 515 | ], 516 | "dev": true, 517 | "optional": true, 518 | "os": [ 519 | "win32" 520 | ], 521 | "engines": { 522 | "node": ">=12" 523 | } 524 | }, 525 | "node_modules/estree-walker": { 526 | "version": "2.0.2", 527 | "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", 528 | "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", 529 | "dev": true 530 | }, 531 | "node_modules/fsevents": { 532 | "version": "2.3.2", 533 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 534 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 535 | "dev": true, 536 | "hasInstallScript": true, 537 | "optional": true, 538 | "os": [ 539 | "darwin" 540 | ], 541 | "engines": { 542 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 543 | } 544 | }, 545 | "node_modules/function-bind": { 546 | "version": "1.1.1", 547 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", 548 | "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", 549 | "dev": true 550 | }, 551 | "node_modules/has": { 552 | "version": "1.0.3", 553 | "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", 554 | "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", 555 | "dev": true, 556 | "dependencies": { 557 | "function-bind": "^1.1.1" 558 | }, 559 | "engines": { 560 | "node": ">= 0.4.0" 561 | } 562 | }, 563 | "node_modules/is-core-module": { 564 | "version": "2.9.0", 565 | "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz", 566 | "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==", 567 | "dev": true, 568 | "dependencies": { 569 | "has": "^1.0.3" 570 | }, 571 | "funding": { 572 | "url": "https://github.com/sponsors/ljharb" 573 | } 574 | }, 575 | "node_modules/magic-string": { 576 | "version": "0.30.2", 577 | "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.2.tgz", 578 | "integrity": "sha512-lNZdu7pewtq/ZvWUp9Wpf/x7WzMTsR26TWV03BRZrXFsv+BI6dy8RAiKgm1uM/kyR0rCfUcqvOlXKG66KhIGug==", 579 | "dev": true, 580 | "dependencies": { 581 | "@jridgewell/sourcemap-codec": "^1.4.15" 582 | }, 583 | "engines": { 584 | "node": ">=12" 585 | } 586 | }, 587 | "node_modules/nanoid": { 588 | "version": "3.3.4", 589 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", 590 | "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", 591 | "dev": true, 592 | "bin": { 593 | "nanoid": "bin/nanoid.cjs" 594 | }, 595 | "engines": { 596 | "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" 597 | } 598 | }, 599 | "node_modules/path-parse": { 600 | "version": "1.0.7", 601 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", 602 | "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", 603 | "dev": true 604 | }, 605 | "node_modules/picocolors": { 606 | "version": "1.0.0", 607 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 608 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", 609 | "dev": true 610 | }, 611 | "node_modules/postcss": { 612 | "version": "8.4.14", 613 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", 614 | "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==", 615 | "dev": true, 616 | "funding": [ 617 | { 618 | "type": "opencollective", 619 | "url": "https://opencollective.com/postcss/" 620 | }, 621 | { 622 | "type": "tidelift", 623 | "url": "https://tidelift.com/funding/github/npm/postcss" 624 | } 625 | ], 626 | "dependencies": { 627 | "nanoid": "^3.3.4", 628 | "picocolors": "^1.0.0", 629 | "source-map-js": "^1.0.2" 630 | }, 631 | "engines": { 632 | "node": "^10 || ^12 || >=14" 633 | } 634 | }, 635 | "node_modules/resolve": { 636 | "version": "1.22.1", 637 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", 638 | "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", 639 | "dev": true, 640 | "dependencies": { 641 | "is-core-module": "^2.9.0", 642 | "path-parse": "^1.0.7", 643 | "supports-preserve-symlinks-flag": "^1.0.0" 644 | }, 645 | "bin": { 646 | "resolve": "bin/resolve" 647 | }, 648 | "funding": { 649 | "url": "https://github.com/sponsors/ljharb" 650 | } 651 | }, 652 | "node_modules/rollup": { 653 | "version": "2.75.7", 654 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz", 655 | "integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==", 656 | "dev": true, 657 | "bin": { 658 | "rollup": "dist/bin/rollup" 659 | }, 660 | "engines": { 661 | "node": ">=10.0.0" 662 | }, 663 | "optionalDependencies": { 664 | "fsevents": "~2.3.2" 665 | } 666 | }, 667 | "node_modules/source-map-js": { 668 | "version": "1.0.2", 669 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 670 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 671 | "dev": true, 672 | "engines": { 673 | "node": ">=0.10.0" 674 | } 675 | }, 676 | "node_modules/supports-preserve-symlinks-flag": { 677 | "version": "1.0.0", 678 | "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", 679 | "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", 680 | "dev": true, 681 | "engines": { 682 | "node": ">= 0.4" 683 | }, 684 | "funding": { 685 | "url": "https://github.com/sponsors/ljharb" 686 | } 687 | }, 688 | "node_modules/vite": { 689 | "version": "2.9.16", 690 | "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.16.tgz", 691 | "integrity": "sha512-X+6q8KPyeuBvTQV8AVSnKDvXoBMnTx8zxh54sOwmmuOdxkjMmEJXH2UEchA+vTMps1xw9vL64uwJOWryULg7nA==", 692 | "dev": true, 693 | "dependencies": { 694 | "esbuild": "^0.14.27", 695 | "postcss": "^8.4.13", 696 | "resolve": "^1.22.0", 697 | "rollup": ">=2.59.0 <2.78.0" 698 | }, 699 | "bin": { 700 | "vite": "bin/vite.js" 701 | }, 702 | "engines": { 703 | "node": ">=12.2.0" 704 | }, 705 | "optionalDependencies": { 706 | "fsevents": "~2.3.2" 707 | }, 708 | "peerDependencies": { 709 | "less": "*", 710 | "sass": "*", 711 | "stylus": "*" 712 | }, 713 | "peerDependenciesMeta": { 714 | "less": { 715 | "optional": true 716 | }, 717 | "sass": { 718 | "optional": true 719 | }, 720 | "stylus": { 721 | "optional": true 722 | } 723 | } 724 | }, 725 | "node_modules/vue": { 726 | "version": "3.3.4", 727 | "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz", 728 | "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==", 729 | "dev": true, 730 | "dependencies": { 731 | "@vue/compiler-dom": "3.3.4", 732 | "@vue/compiler-sfc": "3.3.4", 733 | "@vue/runtime-dom": "3.3.4", 734 | "@vue/server-renderer": "3.3.4", 735 | "@vue/shared": "3.3.4" 736 | } 737 | } 738 | }, 739 | "dependencies": { 740 | "@babel/parser": { 741 | "version": "7.22.10", 742 | "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz", 743 | "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==", 744 | "dev": true 745 | }, 746 | "@jridgewell/sourcemap-codec": { 747 | "version": "1.4.15", 748 | "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", 749 | "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", 750 | "dev": true 751 | }, 752 | "@vitejs/plugin-vue": { 753 | "version": "2.3.3", 754 | "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz", 755 | "integrity": "sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==", 756 | "dev": true, 757 | "requires": {} 758 | }, 759 | "@vue/compiler-core": { 760 | "version": "3.3.4", 761 | "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz", 762 | "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==", 763 | "dev": true, 764 | "requires": { 765 | "@babel/parser": "^7.21.3", 766 | "@vue/shared": "3.3.4", 767 | "estree-walker": "^2.0.2", 768 | "source-map-js": "^1.0.2" 769 | } 770 | }, 771 | "@vue/compiler-dom": { 772 | "version": "3.3.4", 773 | "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz", 774 | "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==", 775 | "dev": true, 776 | "requires": { 777 | "@vue/compiler-core": "3.3.4", 778 | "@vue/shared": "3.3.4" 779 | } 780 | }, 781 | "@vue/compiler-sfc": { 782 | "version": "3.3.4", 783 | "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz", 784 | "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==", 785 | "dev": true, 786 | "requires": { 787 | "@babel/parser": "^7.20.15", 788 | "@vue/compiler-core": "3.3.4", 789 | "@vue/compiler-dom": "3.3.4", 790 | "@vue/compiler-ssr": "3.3.4", 791 | "@vue/reactivity-transform": "3.3.4", 792 | "@vue/shared": "3.3.4", 793 | "estree-walker": "^2.0.2", 794 | "magic-string": "^0.30.0", 795 | "postcss": "^8.1.10", 796 | "source-map-js": "^1.0.2" 797 | } 798 | }, 799 | "@vue/compiler-ssr": { 800 | "version": "3.3.4", 801 | "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz", 802 | "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==", 803 | "dev": true, 804 | "requires": { 805 | "@vue/compiler-dom": "3.3.4", 806 | "@vue/shared": "3.3.4" 807 | } 808 | }, 809 | "@vue/reactivity": { 810 | "version": "3.3.4", 811 | "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz", 812 | "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==", 813 | "dev": true, 814 | "requires": { 815 | "@vue/shared": "3.3.4" 816 | } 817 | }, 818 | "@vue/reactivity-transform": { 819 | "version": "3.3.4", 820 | "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz", 821 | "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==", 822 | "dev": true, 823 | "requires": { 824 | "@babel/parser": "^7.20.15", 825 | "@vue/compiler-core": "3.3.4", 826 | "@vue/shared": "3.3.4", 827 | "estree-walker": "^2.0.2", 828 | "magic-string": "^0.30.0" 829 | } 830 | }, 831 | "@vue/runtime-core": { 832 | "version": "3.3.4", 833 | "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz", 834 | "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==", 835 | "dev": true, 836 | "requires": { 837 | "@vue/reactivity": "3.3.4", 838 | "@vue/shared": "3.3.4" 839 | } 840 | }, 841 | "@vue/runtime-dom": { 842 | "version": "3.3.4", 843 | "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz", 844 | "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==", 845 | "dev": true, 846 | "requires": { 847 | "@vue/runtime-core": "3.3.4", 848 | "@vue/shared": "3.3.4", 849 | "csstype": "^3.1.1" 850 | } 851 | }, 852 | "@vue/server-renderer": { 853 | "version": "3.3.4", 854 | "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz", 855 | "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==", 856 | "dev": true, 857 | "requires": { 858 | "@vue/compiler-ssr": "3.3.4", 859 | "@vue/shared": "3.3.4" 860 | } 861 | }, 862 | "@vue/shared": { 863 | "version": "3.3.4", 864 | "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz", 865 | "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==", 866 | "dev": true 867 | }, 868 | "csstype": { 869 | "version": "3.1.2", 870 | "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", 871 | "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", 872 | "dev": true 873 | }, 874 | "esbuild": { 875 | "version": "0.14.48", 876 | "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.48.tgz", 877 | "integrity": "sha512-w6N1Yn5MtqK2U1/WZTX9ZqUVb8IOLZkZ5AdHkT6x3cHDMVsYWC7WPdiLmx19w3i4Rwzy5LqsEMtVihG3e4rFzA==", 878 | "dev": true, 879 | "requires": { 880 | "esbuild-android-64": "0.14.48", 881 | "esbuild-android-arm64": "0.14.48", 882 | "esbuild-darwin-64": "0.14.48", 883 | "esbuild-darwin-arm64": "0.14.48", 884 | "esbuild-freebsd-64": "0.14.48", 885 | "esbuild-freebsd-arm64": "0.14.48", 886 | "esbuild-linux-32": "0.14.48", 887 | "esbuild-linux-64": "0.14.48", 888 | "esbuild-linux-arm": "0.14.48", 889 | "esbuild-linux-arm64": "0.14.48", 890 | "esbuild-linux-mips64le": "0.14.48", 891 | "esbuild-linux-ppc64le": "0.14.48", 892 | "esbuild-linux-riscv64": "0.14.48", 893 | "esbuild-linux-s390x": "0.14.48", 894 | "esbuild-netbsd-64": "0.14.48", 895 | "esbuild-openbsd-64": "0.14.48", 896 | "esbuild-sunos-64": "0.14.48", 897 | "esbuild-windows-32": "0.14.48", 898 | "esbuild-windows-64": "0.14.48", 899 | "esbuild-windows-arm64": "0.14.48" 900 | } 901 | }, 902 | "esbuild-android-64": { 903 | "version": "0.14.48", 904 | "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.48.tgz", 905 | "integrity": "sha512-3aMjboap/kqwCUpGWIjsk20TtxVoKck8/4Tu19rubh7t5Ra0Yrpg30Mt1QXXlipOazrEceGeWurXKeFJgkPOUg==", 906 | "dev": true, 907 | "optional": true 908 | }, 909 | "esbuild-android-arm64": { 910 | "version": "0.14.48", 911 | "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.48.tgz", 912 | "integrity": "sha512-vptI3K0wGALiDq+EvRuZotZrJqkYkN5282iAfcffjI5lmGG9G1ta/CIVauhY42MBXwEgDJkweiDcDMRLzBZC4g==", 913 | "dev": true, 914 | "optional": true 915 | }, 916 | "esbuild-darwin-64": { 917 | "version": "0.14.48", 918 | "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.48.tgz", 919 | "integrity": "sha512-gGQZa4+hab2Va/Zww94YbshLuWteyKGD3+EsVon8EWTWhnHFRm5N9NbALNbwi/7hQ/hM1Zm4FuHg+k6BLsl5UA==", 920 | "dev": true, 921 | "optional": true 922 | }, 923 | "esbuild-darwin-arm64": { 924 | "version": "0.14.48", 925 | "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.48.tgz", 926 | "integrity": "sha512-bFjnNEXjhZT+IZ8RvRGNJthLWNHV5JkCtuOFOnjvo5pC0sk2/QVk0Qc06g2PV3J0TcU6kaPC3RN9yy9w2PSLEA==", 927 | "dev": true, 928 | "optional": true 929 | }, 930 | "esbuild-freebsd-64": { 931 | "version": "0.14.48", 932 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.48.tgz", 933 | "integrity": "sha512-1NOlwRxmOsnPcWOGTB10JKAkYSb2nue0oM1AfHWunW/mv3wERfJmnYlGzL3UAOIUXZqW8GeA2mv+QGwq7DToqA==", 934 | "dev": true, 935 | "optional": true 936 | }, 937 | "esbuild-freebsd-arm64": { 938 | "version": "0.14.48", 939 | "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.48.tgz", 940 | "integrity": "sha512-gXqKdO8wabVcYtluAbikDH2jhXp+Klq5oCD5qbVyUG6tFiGhrC9oczKq3vIrrtwcxDQqK6+HDYK8Zrd4bCA9Gw==", 941 | "dev": true, 942 | "optional": true 943 | }, 944 | "esbuild-linux-32": { 945 | "version": "0.14.48", 946 | "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.48.tgz", 947 | "integrity": "sha512-ghGyDfS289z/LReZQUuuKq9KlTiTspxL8SITBFQFAFRA/IkIvDpnZnCAKTCjGXAmUqroMQfKJXMxyjJA69c/nQ==", 948 | "dev": true, 949 | "optional": true 950 | }, 951 | "esbuild-linux-64": { 952 | "version": "0.14.48", 953 | "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.48.tgz", 954 | "integrity": "sha512-vni3p/gppLMVZLghI7oMqbOZdGmLbbKR23XFARKnszCIBpEMEDxOMNIKPmMItQrmH/iJrL1z8Jt2nynY0bE1ug==", 955 | "dev": true, 956 | "optional": true 957 | }, 958 | "esbuild-linux-arm": { 959 | "version": "0.14.48", 960 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.48.tgz", 961 | "integrity": "sha512-+VfSV7Akh1XUiDNXgqgY1cUP1i2vjI+BmlyXRfVz5AfV3jbpde8JTs5Q9sYgaoq5cWfuKfoZB/QkGOI+QcL1Tw==", 962 | "dev": true, 963 | "optional": true 964 | }, 965 | "esbuild-linux-arm64": { 966 | "version": "0.14.48", 967 | "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.48.tgz", 968 | "integrity": "sha512-3CFsOlpoxlKPRevEHq8aAntgYGYkE1N9yRYAcPyng/p4Wyx0tPR5SBYsxLKcgPB9mR8chHEhtWYz6EZ+H199Zw==", 969 | "dev": true, 970 | "optional": true 971 | }, 972 | "esbuild-linux-mips64le": { 973 | "version": "0.14.48", 974 | "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.48.tgz", 975 | "integrity": "sha512-cs0uOiRlPp6ymknDnjajCgvDMSsLw5mST2UXh+ZIrXTj2Ifyf2aAP3Iw4DiqgnyYLV2O/v/yWBJx+WfmKEpNLA==", 976 | "dev": true, 977 | "optional": true 978 | }, 979 | "esbuild-linux-ppc64le": { 980 | "version": "0.14.48", 981 | "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.48.tgz", 982 | "integrity": "sha512-+2F0vJMkuI0Wie/wcSPDCqXvSFEELH7Jubxb7mpWrA/4NpT+/byjxDz0gG6R1WJoeDefcrMfpBx4GFNN1JQorQ==", 983 | "dev": true, 984 | "optional": true 985 | }, 986 | "esbuild-linux-riscv64": { 987 | "version": "0.14.48", 988 | "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.48.tgz", 989 | "integrity": "sha512-BmaK/GfEE+5F2/QDrIXteFGKnVHGxlnK9MjdVKMTfvtmudjY3k2t8NtlY4qemKSizc+QwyombGWTBDc76rxePA==", 990 | "dev": true, 991 | "optional": true 992 | }, 993 | "esbuild-linux-s390x": { 994 | "version": "0.14.48", 995 | "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.48.tgz", 996 | "integrity": "sha512-tndw/0B9jiCL+KWKo0TSMaUm5UWBLsfCKVdbfMlb3d5LeV9WbijZ8Ordia8SAYv38VSJWOEt6eDCdOx8LqkC4g==", 997 | "dev": true, 998 | "optional": true 999 | }, 1000 | "esbuild-netbsd-64": { 1001 | "version": "0.14.48", 1002 | "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.48.tgz", 1003 | "integrity": "sha512-V9hgXfwf/T901Lr1wkOfoevtyNkrxmMcRHyticybBUHookznipMOHoF41Al68QBsqBxnITCEpjjd4yAos7z9Tw==", 1004 | "dev": true, 1005 | "optional": true 1006 | }, 1007 | "esbuild-openbsd-64": { 1008 | "version": "0.14.48", 1009 | "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.48.tgz", 1010 | "integrity": "sha512-+IHf4JcbnnBl4T52egorXMatil/za0awqzg2Vy6FBgPcBpisDWT2sVz/tNdrK9kAqj+GZG/jZdrOkj7wsrNTKA==", 1011 | "dev": true, 1012 | "optional": true 1013 | }, 1014 | "esbuild-sunos-64": { 1015 | "version": "0.14.48", 1016 | "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.48.tgz", 1017 | "integrity": "sha512-77m8bsr5wOpOWbGi9KSqDphcq6dFeJyun8TA+12JW/GAjyfTwVtOnN8DOt6DSPUfEV+ltVMNqtXUeTeMAxl5KA==", 1018 | "dev": true, 1019 | "optional": true 1020 | }, 1021 | "esbuild-windows-32": { 1022 | "version": "0.14.48", 1023 | "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.48.tgz", 1024 | "integrity": "sha512-EPgRuTPP8vK9maxpTGDe5lSoIBHGKO/AuxDncg5O3NkrPeLNdvvK8oywB0zGaAZXxYWfNNSHskvvDgmfVTguhg==", 1025 | "dev": true, 1026 | "optional": true 1027 | }, 1028 | "esbuild-windows-64": { 1029 | "version": "0.14.48", 1030 | "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.48.tgz", 1031 | "integrity": "sha512-YmpXjdT1q0b8ictSdGwH3M8VCoqPpK1/UArze3X199w6u8hUx3V8BhAi1WjbsfDYRBanVVtduAhh2sirImtAvA==", 1032 | "dev": true, 1033 | "optional": true 1034 | }, 1035 | "esbuild-windows-arm64": { 1036 | "version": "0.14.48", 1037 | "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.48.tgz", 1038 | "integrity": "sha512-HHaOMCsCXp0rz5BT2crTka6MPWVno121NKApsGs/OIW5QC0ggC69YMGs1aJct9/9FSUF4A1xNE/cLvgB5svR4g==", 1039 | "dev": true, 1040 | "optional": true 1041 | }, 1042 | "estree-walker": { 1043 | "version": "2.0.2", 1044 | "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", 1045 | "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", 1046 | "dev": true 1047 | }, 1048 | "fsevents": { 1049 | "version": "2.3.2", 1050 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 1051 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 1052 | "dev": true, 1053 | "optional": true 1054 | }, 1055 | "function-bind": { 1056 | "version": "1.1.1", 1057 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", 1058 | "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", 1059 | "dev": true 1060 | }, 1061 | "has": { 1062 | "version": "1.0.3", 1063 | "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", 1064 | "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", 1065 | "dev": true, 1066 | "requires": { 1067 | "function-bind": "^1.1.1" 1068 | } 1069 | }, 1070 | "is-core-module": { 1071 | "version": "2.9.0", 1072 | "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz", 1073 | "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==", 1074 | "dev": true, 1075 | "requires": { 1076 | "has": "^1.0.3" 1077 | } 1078 | }, 1079 | "magic-string": { 1080 | "version": "0.30.2", 1081 | "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.2.tgz", 1082 | "integrity": "sha512-lNZdu7pewtq/ZvWUp9Wpf/x7WzMTsR26TWV03BRZrXFsv+BI6dy8RAiKgm1uM/kyR0rCfUcqvOlXKG66KhIGug==", 1083 | "dev": true, 1084 | "requires": { 1085 | "@jridgewell/sourcemap-codec": "^1.4.15" 1086 | } 1087 | }, 1088 | "nanoid": { 1089 | "version": "3.3.4", 1090 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", 1091 | "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", 1092 | "dev": true 1093 | }, 1094 | "path-parse": { 1095 | "version": "1.0.7", 1096 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", 1097 | "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", 1098 | "dev": true 1099 | }, 1100 | "picocolors": { 1101 | "version": "1.0.0", 1102 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 1103 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", 1104 | "dev": true 1105 | }, 1106 | "postcss": { 1107 | "version": "8.4.14", 1108 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", 1109 | "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==", 1110 | "dev": true, 1111 | "requires": { 1112 | "nanoid": "^3.3.4", 1113 | "picocolors": "^1.0.0", 1114 | "source-map-js": "^1.0.2" 1115 | } 1116 | }, 1117 | "resolve": { 1118 | "version": "1.22.1", 1119 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", 1120 | "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", 1121 | "dev": true, 1122 | "requires": { 1123 | "is-core-module": "^2.9.0", 1124 | "path-parse": "^1.0.7", 1125 | "supports-preserve-symlinks-flag": "^1.0.0" 1126 | } 1127 | }, 1128 | "rollup": { 1129 | "version": "2.75.7", 1130 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz", 1131 | "integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==", 1132 | "dev": true, 1133 | "requires": { 1134 | "fsevents": "~2.3.2" 1135 | } 1136 | }, 1137 | "source-map-js": { 1138 | "version": "1.0.2", 1139 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 1140 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 1141 | "dev": true 1142 | }, 1143 | "supports-preserve-symlinks-flag": { 1144 | "version": "1.0.0", 1145 | "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", 1146 | "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", 1147 | "dev": true 1148 | }, 1149 | "vite": { 1150 | "version": "2.9.16", 1151 | "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.16.tgz", 1152 | "integrity": "sha512-X+6q8KPyeuBvTQV8AVSnKDvXoBMnTx8zxh54sOwmmuOdxkjMmEJXH2UEchA+vTMps1xw9vL64uwJOWryULg7nA==", 1153 | "dev": true, 1154 | "requires": { 1155 | "esbuild": "^0.14.27", 1156 | "fsevents": "~2.3.2", 1157 | "postcss": "^8.4.13", 1158 | "resolve": "^1.22.0", 1159 | "rollup": ">=2.59.0 <2.78.0" 1160 | } 1161 | }, 1162 | "vue": { 1163 | "version": "3.3.4", 1164 | "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz", 1165 | "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==", 1166 | "dev": true, 1167 | "requires": { 1168 | "@vue/compiler-dom": "3.3.4", 1169 | "@vue/compiler-sfc": "3.3.4", 1170 | "@vue/runtime-dom": "3.3.4", 1171 | "@vue/server-renderer": "3.3.4", 1172 | "@vue/shared": "3.3.4" 1173 | } 1174 | } 1175 | } 1176 | } 1177 | --------------------------------------------------------------------------------