);
}
}
```
## Server Side Rendering using NextJS
#### Pre-requisites:
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:
* Passed `site` as non-empty string, during initialization call
* Passed `API Key` as non-empty string, during initialization call
* cbInstance initialized status
Also, a project using `NextJS` should be setup
#### Usage:
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`
```html
```
2. Initialize chargebee inside componentDidMount(), do not use it in constructor() or render() when using SSR
```jsx
componentDidMount() {
..
// initialize with site, publishableKey
window.Chargebee.init({
site: "...",
publishableKey: "..."
});
// get cb Instance
cbInstance = window.Chargebee.getInstance();
..
}
```
3. Import the Provider, CardComponent, etc. components from the module
```jsx
import {CardComponent, CardNumber, CardExpiry, CardCVV, Provider} from "@chargebee/chargebee-js-react-wrapper";
```
4. Within your custom component, wrap the `CardComponent` inside a `Provider` component, pass the cbInstance as props
```jsx
...
```
#### Example:
Detailed example :
```jsx
import {CardComponent, CardNumber, CardExpiry, CardCVV, Provider} from "@chargebee/chargebee-js-react-wrapper";
...
componentDidMount() {
window.Chargebee.init({
site: "honeycomics-v3-test",
publishableKey: "your_site_pub_api_key"
})
this.setState({
cbInstance: window.Chargebee.getInstance()
})
}
render() {
...
...
{/* Card number component */}
{/* Card expiry component */}
{/* Card cvv component */}
...
}
```
#### Run the application
* npm install
* (NextJS project structure with chargebee-js-react-wrapper installed) -> npm run build / start / dev
```jsx
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
```
### 3DS Authorization
In your react component
```jsx
import { CardComponent } from '@chargebee/chargebee-js-react-wrapper';
class App extends React.Component {
cardRef = React.createRef()
...
createPaymentIntent() {
// make ajax call to server to create payment intent
}
...
componentDidMount() {
this.createPaymentIntent().then(intent => {
this.state.intent = intent;
})
}
...
onSubmit = (e) => {
if(e) e.preventDefault()
const intent = this.state.intent;
const additionalData = this.state.additionalData;
this.cardRef.current.authorizeWith3ds(intent, additionalData)
.then(authorizedPaymentIntent => {
console.log('Authorized payment intent', authorizedPaymentIntent.id)
}).catch(error => {
console.error('Error occured', error)
});
}
...
render() {
// Using combined mode
return(
)
}
}
```
## Components and APIs
#### Card Component ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-component-object))
Props | Description | Datatype
------|-------------|---------
`className` | CSS Class name for the container div | String
`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)
`ref` | React Ref element for tokenizing data | [ReactRef](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs)
`showTestCards` | Add ability to show test cards on test sites | Boolean
##### Event Props ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on))
Props | Description | Arguments
------|-------------|---------
`onReady` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object)
`onChange` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6)
`onFocus` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6)
`onBlur` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6)
`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)
#### Field Components ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object))
* CardNumber
* CardExpiry
* CardCVV
Props | Description | Datatype
------|-------------|---------
`className` | CSS Classname for container `div` | String
`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
------|-------------|---------
`onReady` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object)
`onChange` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6)
`onFocus` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6)
`onBlur` | 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)