# Integrate Identities via web

For [Identity Verification](https://www.checkout.com/docs/business-operations/manage-identities/verify-identities.md) and [Face Authentication](https://www.checkout.com/docs/business-operations/manage-identities/authenticate-with-biometrics.md), the applicant can start their journey in your mobile app, or on your mobile or desktop website.
Checkout.com securely redirects them to the attempt in their mobile web browser.
After completing the attempt, we redirect the applicant back to your app or website, which is updated in real time.

---

## How it works

Set up your redirect integration using any of the following options:

- Web redirection from your app or website
- iframes from your app or website
- WebView from your app only

You can also customize the web user interface (UI), and check which languages are supported.

---

## Web redirection

For web redirection from your app or website, Checkout.com supports the following environments and minimum browser versions:

**Desktop**

- Chrome 53 or later
- Firefox 52 or later
- Safari 11.1 or later
- Edge 16 or later
- Opera 58 or later

**Android**

- Chrome 73 or later
- Firefox for Android 66 or later
- Samsung Internet 6.2 or later

**iOS**

- Safari 11.0 or later
- Chrome 14.3 or later

After you create an attempt and receive the attempt URL, pass the URL to your web app and add it as a link:

```html
<a href="`${verificationUrl}`"></a>
```

> **Information**
>
> See an [example web integration](https://github.com/ubbleai/integration_examples/tree/master/web) on our Identity Verification GitHub repository.

When the applicant completes or drops out of the attempt, they are redirected to your return page at the `redirect_url` you provided when you created the attempt.

The redirect URL includes:
- The check ID
- The [attempt status](https://www.checkout.com/docs/developer-resources/codes/identities-codes.md#Attempt_statuses)
- The [response code](https://www.checkout.com/docs/developer-resources/codes/identities-codes.md#Response_codes) if the check was unsuccessful

```Example
https://your-redirect-url.com?id=idv_01h2623ysfkhpn7czed0bw8fd6&event=identity_verification_capture_aborted&response_code=61101
```

---

## Iframe redirection

For iframe (or inline frame) redirection from your app or website, use the following SDK:

### Iframe SDK

1. Include the SDK as a script tag:

```html
<script
  src="https://cdn.ubble.ai/iframe-sdk-1.0.0.js"
  type="application/javascript"
></script>
```

2. Add a global method called `onUbbleReady` to the page that is triggered when the SDK is loaded:

```JavaScript
function onUbbleReady() {

}
```

3. Initialize a new `IDV` object:

```JavaScript
function onUbbleReady() {
  const ubbleIDV = new Ubble.IDV(document.getElementById("ubble"), options);
}
```

### API

#### Events

**onComplete**

Occurs when the applicant completes the attempt

```json
{
  "event": "capture_completion",
  "redirectUrl": "https://your-redirect-url.com?id=<verification id>&event=identity_verification_capture_completed"
}
```

**onRefused**

Occurs when the applicant refuses to start the attempt

```json
{
  "event": "capture_refusal",
  "responseCode": 63001,
  "redirectUrl": "https://your-redirect-url.com?id=<verification id>&event=identity_verification_capture_refused"
}
```

**onAbort**

Occurs when the applicant abandons the attempt

```json
{
  "event": "capture_abortion",
  "responseCode": 61111,
  "redirectUrl": "https://your-redirect-url.com?id=<verification id>&event=identity_verification_capture_aborted&response_code=63001"
}
```

**onExpired**

Occurs when the attempt URL expires

```json
{
  "event": "expiration",
  "redirectUrl": "https://your-redirect-url.com?id=<identity verification id>&event=identity_verification_link_expired&response_code=63001"
}
```

#### Methods

When the applicant completes or drops out of the attempt, use the `destroy()` method to return them to your return page `redirect_url`:

```JavaScript
const ubbleIDV = new Ubble.IDV("id", {
  events: {
    onComplete(event) {
      console.log(`Done with ubble flow: ${event}`);
      ubbleIDV.destroy();
    },
  },
});
```

#### Full example

```JavaScript
const ubbleIDV = new Ubble.IDV("idv", {
  width: "500",
  height: "600",
  allowCamera: true,
  verificationUrl: "https://idv.checkout.com/4hryu5cei5",
  events: {
    onComplete(event) {
      ubbleIDV.destroy();
    },
    onAbort(event) {
      ubbleIDV.destroy();
    },
    onExpired(event) {
      ubbleIDV.destroy();
    }
    onRefused(event) {
      ubbleIDV.destroy();
    }
  },
});
```

> **Note**
>
> If you encounter issues, ensure that:
>
> - You included a semicolon in the `Content-Security-Policy: frame-src https://*.domain_name.fr;` header.
> - The applicant gave permission to use their mobile device camera.

---

## WebView redirection

If the applicant starts the journey in your mobile app, you can redirect them to the attempt using WebView for a smooth, integrated experience.
WebView redirection is supported by the following platforms:

- Android
- iOS 13 or later – Via WebRTC running inside a [WKWebView](https://developer.apple.com/documentation/webkit/wkwebview)
- iOS 12 or older – Via the Safari browser by passing the `verificationUrl` to the `UIApplication.open()` [method](https://developer.apple.com/documentation/uikit/uiapplication/1648685-open) in your app code
- React Native
- Flutter – Using the `flutter_inappwebview` [dependency](https://inappwebview.dev/docs/intro/), with the [WebRTC API](https://inappwebview.dev/docs/web-rtc/) so Identity Verification can launch a video stream

For a WebView integration, you must provide a deeplink to redirect the applicant on your mobile app.

> **Information**
>
> See [example WebView integrations](https://github.com/ubbleai/integration_examples/tree/master) for each platform on our Identity Verification GitHub repository.

When the applicant completes or drops out of the attempt, they're redirected to your return page at the `redirect_url` you provided when you created the attempt.

The redirect URL includes:
- The check ID
- The attempt status
- The response code if the check was unsuccessful

```Example
https://your-redirect-url.com?id=idv_01h2623ysfkhpn7czed0bw8fd6&event=identity_verification_capture_aborted&response_code=61101
```

---

## Customize the user interface

You can customize the following elements of the web UI:

- Button radius
- Colors
- Commercial name for your business
- Fonts
- Introduction text on the first screen in the verification journey – The default text is: "Verification of your identity is necessary to finalize your application for {your-business-name}."
- Logo – The maximum size is 45px high x 150px wide, or 90px high x 300px wide for HD or retina displays.
- Message prompt text

> **Information**
>
> Use the [customization tool](https://cdn.ubble.ai/config-cko/index.html) to create the HTML to send to your account manager or [request support](https://dashboard.checkout.com/support/new?topic=case_account_management_and_access&issue=issue_account_changes).

---

## Supported languages

The UI supports the following languages:

- Chinese (simplified)
- Dutch
- English (UK)
- English (US)
- Estonian
- Finnish
- French
- German
- Italian
- Japanese
- Korean
- Latvian
- Polish
- Portuguese
- Romanian
- Russian
- Slovak
- Spanish
- Swedish