New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@chargebee/chargebee-js-angular-wrapper

Package Overview
Dependencies
Maintainers
0
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@chargebee/chargebee-js-angular-wrapper - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

7

lib/directives/card-field.directive.d.ts

@@ -1,3 +0,3 @@

import { EventEmitter, ElementRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { PaymentIntent, AdditionalData, Callbacks } from '../types';
import { EventEmitter, ElementRef, OnInit, OnChanges, SimpleChanges } from "@angular/core";
import { PaymentIntent, AdditionalData, Callbacks } from "../types";
import * as i0 from "@angular/core";

@@ -13,2 +13,3 @@ export declare class CardFieldDirective implements OnInit, OnChanges {

locale?: string;
showTestCards?: boolean;
currency?: string;

@@ -40,4 +41,4 @@ placeholder?: {

static ɵfac: i0.ɵɵFactoryDeclaration<CardFieldDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<CardFieldDirective, "[cbCardField]", never, { "icon": { "alias": "icon"; "required": false; }; "classes": { "alias": "classes"; "required": false; }; "fonts": { "alias": "fonts"; "required": false; }; "styles": { "alias": "styles"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "currency": { "alias": "currency"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, { "ready": "ready"; "focus": "focus"; "blur": "blur"; "change": "change"; }, ["numberComponent", "expiryComponent", "cvvComponent"], never, false, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<CardFieldDirective, "[cbCardField]", never, { "icon": { "alias": "icon"; "required": false; }; "classes": { "alias": "classes"; "required": false; }; "fonts": { "alias": "fonts"; "required": false; }; "styles": { "alias": "styles"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "showTestCards": { "alias": "showTestCards"; "required": false; }; "currency": { "alias": "currency"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, { "ready": "ready"; "focus": "focus"; "blur": "blur"; "change": "change"; }, ["numberComponent", "expiryComponent", "cvvComponent"], never, false, never>;
}
//# sourceMappingURL=card-field.directive.d.ts.map

6

package.json
{
"name": "@chargebee/chargebee-js-angular-wrapper",
"version": "3.0.0",
"version": "4.0.0",
"description": "Angular wrapper for Chargebee.js Components",

@@ -28,4 +28,4 @@ "homepage": "https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-angular#readme",

"peerDependencies": {
"@angular/common": "^16.2.12",
"@angular/core": "^16.2.12"
"@angular/common": "^17.3.11",
"@angular/core": "^17.3.11"
},

@@ -32,0 +32,0 @@ "module": "fesm2022/chargebee-chargebee-js-angular-wrapper.mjs",

235

README.md
# Chargebee JS Angular Wrapper
Angular wrapper for Chargebee Components
## Examples
For detailed examples: [Click here](https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/angular-app#readme)
## Live Demo
View live demo [here](https://www.recur.in/components-examples/angular/#/example1)
## Installation
Install from npm:
```bash

@@ -17,2 +22,3 @@ npm install @chargebee/chargebee-js-angular-wrapper

## Usage
Chargebee Components requires you to initialize chargebee js with `site` and `publishableKey`

@@ -23,17 +29,18 @@

In your `index.html`:
```html
<html>
<head>
...
<script src="https://js.chargebee.com/v2/chargebee.js"></script>
<script>
Chargebee.init({
site: 'your-site',
publishableKey: 'your-publishable-key'
})
</script>
</head>
<body>
<div id="app"></div>
</body>
<head>
...
<script src="https://js.chargebee.com/v2/chargebee.js"></script>
<script>
Chargebee.init({
site: "your-site",
publishableKey: "your-publishable-key",
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>

@@ -43,9 +50,11 @@ ```

### Basic usage
In your angular component
component.html
```html
<div class="cell example example3" id="example-3" style="padding: 1em">
<form>
<div cbCardField id='card-field' (ready)="onReady($event)"></div>
<div cbCardField id="card-field" (ready)="onReady($event)"></div>
<button (click)="onTokenize($event)">Submit</button>

@@ -55,10 +64,12 @@ </form>

```
component.ts
```js
import { Component } from '@angular/core';
import { Component } from "@angular/core";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})

@@ -70,56 +81,45 @@ export class AppComponent {

this.cardComponent = cardComponent;
}
};
onTokenize = (event) => {
event.preventDefault();
this.cardComponent.tokenize().then(data => {
console.log('chargebee token', data.token)
this.cardComponent.tokenize().then((data) => {
console.log("chargebee token", data.token);
});
}
};
}
```
### A more complex example:
### A more complex example:
component.html
```html
<div class="cell example example3" id="example-3" style="padding: 1em">
<form>
<div cbCardField id='card-field'
[fonts]="fonts"
[styles]="styles"
locale='en'
[classes]="classes"
(ready)="onReady($event)"
>
<div id='card-number' cbNumberField class="field empty" placeholder="4111 1111 1111 1111"
(ready)="setFocus($event)"
(change)="onChange($event)"
></div>
<div id='card-expiry' cbExpiryField class="field empty" placeholder="MM / YY"
(change)="onChange($event)"
></div>
<div id='card-cvv' cbCvvField class="field empty" placeholder="CVV"
(change)="onChange($event)"
></div>
<div cbCardField id="card-field" [fonts]="fonts" [styles]="styles" locale="en" [showTestCards]="true" [classes]="classes" (ready)="onReady($event)">
<div id="card-number" cbNumberField class="field empty" placeholder="4111 1111 1111 1111" (ready)="setFocus($event)" (change)="onChange($event)"></div>
<div id="card-expiry" cbExpiryField class="field empty" placeholder="MM / YY" (change)="onChange($event)"></div>
<div id="card-cvv" cbCvvField class="field empty" placeholder="CVV" (change)="onChange($event)"></div>
</div>
<div id="errors">{{errorMessage}}</div>
<button id='submit-button' (click)="onSubmit($event)">Pay 25$</button>
<button id="submit-button" (click)="onSubmit($event)">Pay 25$</button>
</form>
</div>
```
component.ts
```js
import { Component, ChangeDetectorRef, HostListener } from '@angular/core';
import { Component, ChangeDetectorRef, HostListener } from "@angular/core";
declare var Chargebee;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
errorMessage = '';
errorMessage = "";
changeDetectorRef: ChangeDetectorRef;

@@ -134,39 +134,37 @@ cardComponent = null;

classes = {
focus: 'focus',
complete: 'complete-custom-class',
invalid: 'invalid',
empty: 'empty',
focus: "focus",
complete: "complete-custom-class",
invalid: "invalid",
empty: "empty",
};
fonts = [
'https://fonts.googleapis.com/css?family=Open+Sans'
];
fonts = ["https://fonts.googleapis.com/css?family=Open+Sans"];
styles = {
base: {
color: '#fff',
color: "#fff",
fontWeight: 600,
fontFamily: 'Quicksand, Open Sans, Segoe UI, sans-serif',
fontSize: '16px',
fontSmoothing: 'antialiased',
fontFamily: "Quicksand, Open Sans, Segoe UI, sans-serif",
fontSize: "16px",
fontSmoothing: "antialiased",
':focus': {
color: '#424770'
":focus": {
color: "#424770",
},
'::placeholder': {
color: '#9BACC8'
"::placeholder": {
color: "#9BACC8",
},
':focus::placeholder': {
color: '#CFD7DF'
}
":focus::placeholder": {
color: "#CFD7DF",
},
},
invalid: {
color: '#fff',
':focus': {
color: '#FA755A'
color: "#fff",
":focus": {
color: "#FA755A",
},
'::placeholder': {
color: '#FFCCA5'
}
}
"::placeholder": {
color: "#FFCCA5",
},
},
};

@@ -176,3 +174,3 @@

this.cardComponent = cardComponent;
}
};

@@ -186,28 +184,32 @@ setFocus(field) {

...this.errors,
[status.field]: status.error
}
this.errors = errors
let {message} = Object.values(errors).filter(message => !!message).pop() || {}
this.errorMessage = message
[status.field]: status.error,
};
this.errors = errors;
let { message } =
Object.values(errors)
.filter((message) => !!message)
.pop() || {};
this.errorMessage = message;
this.changeDetectorRef.detectChanges();
}
};
onSubmit = (event) => {
event.preventDefault();
this.cardComponent.tokenize().then(data => {
console.log('chargebee token', data.token)
this.cardComponent.tokenize().then((data) => {
console.log("chargebee token", data.token);
});
}
};
}
```
### 3DS Authorization
In your angular component
component.html
```html
<div class="cell example example3" id="example-3" style="padding: 1em">
<form>
<div cbCardField id='card-field' (ready)="onReady($event)"></div>
<div cbCardField id="card-field" (ready)="onReady($event)"></div>
<button (click)="authorize($event)">Submit</button>

@@ -217,3 +219,5 @@ </form>

```
component.ts
```js

@@ -246,3 +250,3 @@ import { Component } from '@angular/core';

event.preventDefault();
this.cardComponent.authorizeWith3ds(this.intent, this.additionalData).then(authorizedIntent => {

@@ -259,40 +263,47 @@ console.log('3DS Authorization success', authorizedIntent.id)

#### cbCardField Directive ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-component-object))
Attributes | Description | Datatype
-----------|-------------|---------
`fonts` | An array of font faces or links | [Fonts](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3)
`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)
`locale` | Language code | [Locale](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3)
`styles` | Set of style customizations | [Styles](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3)
`placeholder` | Set of placeholders for the card fields | [Placeholder](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3)
| Attributes | Description | Datatype |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| `fonts` | An array of font faces or links | [Fonts](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
| `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) |
| `locale` | Language code | [Locale](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
| `showTestCards` | Add ability to show test cards on test sites | Boolean |
| `styles` | Set of style customizations | [Styles](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
| `placeholder` | Set of placeholders for the card fields | [Placeholder](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) |
##### Events ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on))
Props | Description | Arguments
------|-------------|---------
`(ready)` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object)
`(change)` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6)
`(focus)` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6)
`(blur)` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6)
| Props | Description | Arguments |
| ---------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| `(ready)` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) |
| `(change)` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
| `(focus)` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
| `(blur)` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
#### Individual Field directives ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object))
* cbNumberField
* cbExpiryField
* cbCvvField
Props | Description | Datatype
------|-------------|---------
`styles` | Styles for inidividual field | [Styles](http://localhost:8081/checkout-portal-docs/components-fields-reference.html#parameters-5)
`placeholder` | Placeholder for the field | String
- cbNumberField
- cbExpiryField
- cbCvvField
| Props | Description | Datatype |
| ------------- | ---------------------------- | -------------------------------------------------------------------------------------------------- |
| `styles` | Styles for inidividual field | [Styles](http://localhost:8081/checkout-portal-docs/components-fields-reference.html#parameters-5) |
| `placeholder` | Placeholder for the field | String |
##### Event Props ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on-2))
Props | Description | Arguments
------|-------------|---------
`(ready)` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object)
`(change)` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6)
`(focus)` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6)
`(blur)` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6)
| Props | Description | Arguments |
| ---------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| `(ready)` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) |
| `(change)` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
| `(focus)` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
| `(blur)` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) |
## Reference:
[Chargebee Components - JS Docs](https://chargebee.com/checkout-portal-docs/components-fields-integrations.html#quick-start-integration)
## Support
Have any queries regarding the implementation? Reach out to [support@chargebee.com](mailto:support@chargebee.com)
esm2022/lib/chargebee-js-angular-wrapper.module.mjs

Sorry, the diff of this file is not supported yet

esm2022/lib/directives/card-field.directive.mjs

Sorry, the diff of this file is not supported yet

esm2022/lib/directives/cvv-field.directive.mjs

Sorry, the diff of this file is not supported yet

esm2022/lib/directives/expiry-field.directive.mjs

Sorry, the diff of this file is not supported yet

esm2022/lib/directives/number-field.directive.mjs

Sorry, the diff of this file is not supported yet

esm2022/lib/directives/provider.directive.mjs

Sorry, the diff of this file is not supported yet

fesm2022/chargebee-chargebee-js-angular-wrapper.mjs

Sorry, the diff of this file is not supported yet

fesm2022/chargebee-chargebee-js-angular-wrapper.mjs.map

Sorry, the diff of this file is not supported yet

lib/directives/card-field.directive.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc