## Canvas3ds
You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#canvas3d)
This widget provides you to integrate 3d Secure
## Canvas3ds simple example
### Container
```html
```
You must create a container for the widget. Inside this tag, the widget will be initialized
### Initialization
```javascript
var canvas3ds = new paydock.Canvas3ds('#widget', 'token');
canvas3ds.load();
```
```javascript
// ES2015 | TypeScript
import { Canvas3ds } from '@paydock/client-sdk';
var list = new Canvas3ds('#widget', 'token');
list.load();
```
Then write only need 2 lines of code in js to initialize widget
### Full example
```html
Title
```
## Canvas3ds advanced example
### Settings
```javascript
canvas3ds.setEnv('sandbox'); // set enviroment
canvas3ds.hide(); // hide widget
canvas3ds.show(); // show widget
canvas3ds.on('chargeAuthSuccess', function (data) {
console.log(data);
});
canvas3ds.on('chargeAuthReject', function (data) {
console.log(data);
});
canvas3ds.on('chargeAuthCancelled', function (data) {
console.log(data);
});
canvas3ds.on('additionalDataCollectSuccess', function (data) {
console.log(data);
});
canvas3ds.on('additionalDataCollectReject', function (data) {
console.log(data);
});
canvas3ds.on('chargeAuth', function (data) {
console.log(data);
});
```
This example shows how you can use a lot of other methods to settings your form
### Full example
```html
Title
```
### Full example with pre authorization
```html
Title
```
## Canvas 3ds for Standalone 3ds charges
After you initialized the standalone 3ds charge via `v1/charges/standalone-3ds` API endpoint, you get a token used to initialize the Canvas3ds. All above information regarding setup, loading and initialization still apply.
### Full example
```html
Title
```
- The `chargeAuthSuccess` event is executed both for frictionless flow, or for challenge flow after the customer has correctly authenticated with the bank using whatever challenge imposed.
- The `chargeAuthReject` event is executed when the authorization was rejected or when a timeout was received by the underlying system:
- A `data.status` of `AuthTimedOut` will be received for timeouts.
- A `data.status` of `rejected` will be received when the authorization was rejected.
- A `data.status` of `invalid_event` will be received for unhandled situations.
- The `chargeAuthChallenge` event is sent before starting a challenge flow (i.e. opening an IFrame for the customer to complete a challenge with ther bank). Once the end customer performs the challenge, the Canvas3ds will be able to identify the challenge result and will either produce a `chargeAuthSuccess` or `chargeAuthReject` event.
- The `chargeAuthDecoupled` event is sent when the flow is a decoupled challenge, alongside a `data.result.description` field that you must show to the customer, indicating the method the user must use to authenticate. For example this may happen by having the cardholder authenticating directly with their banking app through biometrics. Once the end customer does this, the Canvas3ds will be able to recognize the challenge result is ready and will either produce a `chargeAuthSuccess` or `chargeAuthReject` event.
- The `error` event is sent if an unexpected issue with the client library occurs. In such scenarios, you should consider the autentication process as interrupted:
- When getting this event, you will get on `data.error` the full error object.
### Events and Values
| Event Value | Type | Description |
| ------------------- | ------------------- | -------------------------------------------------------------- |
| chargeAuthSuccess | object | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
| chargeAuthReject | object | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
| chargeAuthChallenge | object | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
| chargeAuthDecoupled | object | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
| chargeAuthInfo | object | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
| error | object | Instance of [chargeError](#cb_chargeError) |
## Response Values
### ChargeEventResponse
| Param | Type | Description |
| ------------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------- |
| status | string | status for the event transaction |
| charge_3ds_id | string | Universal unique transaction identifier to identify the transaction |
| info | string | info field for `chargeAuthInfo` event |
| result.description | string [Optional] | field that you must show to the customer, indicating the method the user must use to authenticate during the decoupled challenge flow. |
### ChargeError
| Param | Type | Description |
| ------------- | ------------------- | ------------------------------------------------------------------- |
| error | object | error response |
| charge_3ds_id | string | Universal unique transaction identifier to identify the transaction |