Set up Chargebee.js
Include the Chargebee.js script on your page and initialize a Chargebee instance before you start. For the script tag, the Chargebee.init options, and the tearDown() caveat, see Set up Chargebee.js.
Integrating Components
Following are the modes of integration for card components supported by Chargebee.js:
- Default mode
- Fields mode
Learn more about components and fields.
Using card component in the Default mode
Adding HTML
Create a container element in your HTML to mount the Component. For Angular, Vue and React, use the respective Components provided by us.
<div class="ex2-fieldset">
<label class="ex2-field">
<span id="card-combined" class="ex2-input"></span>
</label>
</div>
<div class="ex2-fieldset">
<label class="ex2-field">
<CardField ref="card" class="ex2-input fieldset field"
:styles="styles"
:fonts="fonts"
:classes="classes"
/>
</label>
</div>
<div class="ex2-fieldset">
<label class="ex2-field">
<div cbCardField id="card-field" class="ex2-input fieldset field"
[styles]="styles"
[classes]="classes"
[fonts]="fonts"
(ready)="setComponent($event)"
></div>
</label>
</div>
<div className="ex2-fieldset">
<label className="ex2-field">
<CardComponent ref={this.cardRef} className="ex2-input fieldset field"
icon={true}
styles={this.state.styles}
classes={this.state.classes}
/>
</label>
</div>
Adding JavaScript
You need to write JavaScript code to mount Chargebee Components and for tokenization(getting Chargebee's temp token)
Mounting
For Angular, React and Vue, Chargebee JS wrappers would automatically mount the Components. For other types of integrations, you need to manually mount them.Tokenizing
var options = {
icon: true,
classes: {
focus: 'focus',
invalid: 'invalid',
empty: 'empty',
complete: 'complete',
}
}
cbInstance.load("components").then(() => {
// Mounting Card component
var cardComponent = cbInstance.createComponent("card", options).at("#card-combined");
cardComponent.mount();
$("#payment").on("submit", function(event) {
event.preventDefault();
// Tokenization
// Use the card component instance to tokenize the card details
// Additional details can be passed to the tokenize method
cardComponent.tokenize().then(data => {
var token = data.token;
// Send ajax call to create a subscription or to create a card payment source
}).catch(error => {
console.error(error);
});
});
});
{
methods: {
tokenize() {
// Use the card component's ref to tokenize the card details
this.$refs.card.tokenize({}).then((data) => {
var token = data.token;
// Send ajax call to create a subscription or to create a card payment source
}).catch((error) => {
console.log(error);
});
}
},
...
}
class ExampleComponent {
...
// Get the card component instance on ready event
setComponent(component) {
this.cardComponent = component;
}
tokenize() {
this.loading = true;
// Use the card component's instance to call tokenize method
this.cardComponent.tokenize().then((data) => {
this.token = data.token;
this.loading = false;
}).catch((error) => {
this.loading = false;
this.error = "Problem while tokenizing your card details";
})
}
}
class Example2 extends Component {
constructor(props) {
...
this.cardRef = React.createRef();
...
}
...
tokenize = () => {
this.setState({loading: true});
// Use card component's ref to call tokenize method
this.cardRef.current.tokenize({}).then((data) => {
console.log('chargebee token', data.token);
this.setState({loading: false, token: data.token, error: ""});
// Send ajax calls for creating a subscription
}).catch((error) => {
this.setState({loading: false, token: "", error: "Problem while tokenizing your card details"});
});
}
...
}
Using card component in the Fields mode
Adding HTML
Create container elements in your HTML to mount Chargebee components. For Angular, Vue and React, the corresponding wrappers will create the container elements for you.
<div class="ex1-fieldset">
<div class="ex1-field">
<input class="ex1-input" type="text" placeholder="John Doe" >
<label class="ex1-label">Name on Card</label><i class="ex1-bar"></i>
</div>
<div class="ex1-field">
<!-- Container element for number field -->
<div id="card-number" class="ex1-input"></div>
<label class="ex1-label">Card Number</label><i class="ex1-bar"></i>
</div>
<div class="ex1-fields">
<div class="ex1-field">
<!-- Container element for expiry field -->
<div id="card-expiry" class="ex1-input"></div>
<label class="ex1-label">Expiry</label><i class="ex1-bar"></i>
</div>
<div class="ex1-field">
<!-- Container element for CVV field -->
<div id="card-cvc" class="ex1-input"></div>
<label class="ex1-label">CVC</label><i class="ex1-bar"></i>
</div>
</div>
</div>
<div class="ex1-fieldset">
<div class="ex1-field">
<input class="ex1-input" :class="{'val': firstName}" type="text" placeholder="John Doe" v-model="firstName">
<label class="ex1-label">Name on Card</label><i class="ex1-bar"></i>
</div>
<!-- Card component -->
<CardComponent ref="card" class="fieldset field"
:styles="styles"
:classes="classes"
>
<div class="ex1-field">
<!-- Number field -->
<CardNumber class="ex1-input" :placeholder="'4111 1111 1111 1111'" />
<label class="ex1-label">Card Number</label><i class="ex1-bar"></i>
</div>
<div class="ex1-fields">
<div class="ex1-field">
<!-- Expiry field -->
<CardExpiry class="ex1-input"/>
<label class="ex1-label">Expiry</label><i class="ex1-bar"></i>
</div>
<div class="ex1-field">
<!-- CVV field -->
<CardCvv class="ex1-input"/>
<label class="ex1-label">CVC</label><i class="ex1-bar"></i>
</div>
</div>
</CardComponent>
</div>
<div class="ex1-fieldset">
<div class="ex1-field">
<input class="ex1-input" [ngClass]="firstName ? 'val': ''" type="text" placeholder="John Doe" [(ngModel)]="firstName">
<label class="ex1-label">Name on Card</label><i class="ex1-bar"></i>
</div>
<!-- Card component directive: cbCardField -->
<div cbCardField id="card-field" class="fieldset field"
[styles]="styles"
[classes]="classes"
(ready)="setComponent($event)"
>
<div class="ex1-field">
<!-- Card number field directive: cbNumberField -->
<div cbNumberField id="number-field" class="ex1-input" [placeholder]="'4111 1111 1111 1111'"></div>
<label class="ex1-label">Card Number</label><i class="ex1-bar"></i>
</div>
<div class="ex1-fields">
<div class="ex1-field">
<!-- Card expiry field directive: cbExpiryField -->
<div cbExpiryField id="expiry-field" class="ex1-input"></div>
<label class="ex1-label">Expiry</label><i class="ex1-bar"></i>
</div>
<div class="ex1-field">
<!-- Card cvv field directive: cbCvvField -->
<div cbCvvField id="cvv-field" class="ex1-input"></div>
<label class="ex1-label">CVC</label><i class="ex1-bar"></i>
</div>
</div>
</div>
</div>
<div className="ex1-wrap">
<div className="ex1-fieldset">
<div className="ex1-field">
<input name="firstName" className={ this.state.firstName ? "ex1-input val" : "ex1-input"} type="text" placeholder="John Doe" value={this.state.firstName} onChange={this.handleChange} />
<label className="ex1-label">Name on Card</label><i className="ex1-bar"></i>
</div>
{/* Card component */}
<CardComponent ref={this.cardRef} className="fieldset field"
styles={this.state.styles}
classes={this.state.classes}
>
<div className="ex1-field">
{/* Card number field */}
<CardNumber className="ex1-input" placeholder={'4111 1111 1111 1111'} />
<label className="ex1-label">Card Number</label><i className="ex1-bar"></i>
</div>
<div className="ex1-fields">
<div className="ex1-field">
{/* Card expiry field */}
<CardExpiry className="ex1-input"/>
<label className="ex1-label">Expiry</label><i className="ex1-bar"></i>
</div>
<div className="ex1-field">
{/* Card cvv field */}
<CardCVV className="ex1-input"/>
<label className="ex1-label">CVC</label><i className="ex1-bar"></i>
</div>
</div>
</CardComponent>
</div>
</div>
Adding JavaScript
You need to write JavaScript code to mount all fields and for tokenization(getting Chargebee's temp token)
Mounting
For Angular, React and Vue, Chargebee js wrappers would automatically mount the component. For other types of integrations, you need to manually mount the component.Tokenizing
var options = {
icon: true,
classes: {
focus: 'focus',
invalid: 'invalid',
empty: 'empty',
complete: 'complete',
}
}
cbInstance.load("components").then(() => {
// Mounting part
var cardComponent = cbInstance.createComponent("card", options);
cardComponent.createField("number").at("#card-number");
cardComponent.createField("expiry").at("#card-expiry");
cardComponent.createField("cvv").at("#card-cvc");
cardComponent.mount();
$("#payment").on("submit", function(event) {
event.preventDefault();
// Tokenization part
cardComponent.tokenize().then(data => {
var token = data.token;
// Send ajax call to create a subscription or to create a card payment source
}).catch(error => {
console.log(error);
});
});
});
<!-- Assign ref to card component, to access instance methods -->
<CardComponent ref="card" class="fieldset field"></CardComponent>
{
methods: {
tokenize() {
// Use card component's ref to call tokenize method
this.$refs.card.tokenize({}).then((data) => {
var token = data.token;
// Send ajax call to create a subscription or to create a card payment source
}).catch((error) => {
console.log(error);
});
}
},
...
}
...
<div cbCardField id="card-field" class="fieldset field"
(ready)="setComponent($event)">
<!-- ^ Listen to ready event to get card component instance -->
</div>
...
class ExampleComponent {
...
// Receive the card component's instance on ready event
setComponent(cardComponent) {
this.cardComponent = cardComponent;
}
tokenize() {
this.loading = true;
// Call tokenize method from card component instance
this.cardComponent.tokenize().then((data) => {
this.token = data.token;
this.loading = false;
}).catch((error) => {
this.loading = false;
this.error = "Problem while tokenizing your card details";
})
}
}
class Example1 extends Component {
constructor(props) {
...
this.cardRef = React.createRef();
...
}
...
tokenize = () => {
this.setState({loading: true});
// Use card component ref to call tokenize method
this.cardRef.current.tokenize({}).then((data) => {
this.setState({loading: false, token: data.token, error: ""});
// Send ajax calls
}).catch((error) => {
this.setState({loading: false, token: "", error: "Problem while tokenizing your card details"});
});
}
...
render() {
return (
...
{/* Assign ref to card component, to access instance methods */}
<CardComponent ref={this.cardRef} className="fieldset field">
...
</CardComponent>
)
}
}
How it works
Card Components support two payment flows. Use tokenization when the payment does not need Strong Customer Authentication, and 3D Secure when it does.
Tokenization
3D Secure
Processing Payments
Payments can be processed using card components and fields in two ways:
- Tokenization
- 3D Secure
Learn more about tokenization and 3D Secure workflows.
Tokenization
To perform tokenization, enter card details and initiate tokenization using tokenize. Create a subscription using the Chargebee token returned by tokenize.
Using 3D Secure
To Perform 3D-Secure authorization, create a paymentIntent on the server-side and then pass the created paymentIntent to authorizeWith3ds function. Components & Fields internally uses the tokenize function to perform tokenization and then 3DS Helper Module to perform 3DS authorization.
The authorized paymentIntent can then be used to create a subscription, create a payment source, etc.
...
$("#payment").on("submit", function(event) {
event.preventDefault();
...
// Perform 3D Secure authorization
cardComponent.authorizeWith3ds(paymentIntent, additionalData, callbacks).then(paymentIntent => {
// Send ajax call to create a subscription or to create a card payment source using the paymentIntent ID
}).catch(error => {
console.log(error);
});
});
...
Examples
See a live example of Card Components, or browse the sample code on GitHub for jQuery, Angular, React, and Vue.
Was this tutorial helpful ?
Need more help?
We're always happy to help you with any questions you might have! Click here to reach out to us.