> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.idenfy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify

> Configure the iDenfy Shopify app to add identity verification to your online store with step-by-step installation and setup guide.

## Introduction

This guide explains how to configure the iDenfy Shopify App for your store.

## App Setup

<Note>
  **Requirements:**

  * Live **production environment** (available via the [Pricing page](https://idenfy.com/pricing-plans-v2/))
  * **API key** and **secret** -- generated via the [dashboard](/guides/dashboard/settings/api-keys)
</Note>

### Install the iDenfy App

Install the [iDenfy app](https://apps.shopify.com/idenfy-id-verification) and approve the required permissions if prompted.

<img alt="shopify-app-installation" width="450" src="https://mintcdn.com/idenfy/DOV0bfUXhnltF6lA/images/shopify/install-app.png?fit=max&auto=format&n=DOV0bfUXhnltF6lA&q=85&s=e2ca8ca36f1175f88a21bbfb09df73e3" data-path="images/shopify/install-app.png" />

### Configure iDenfy Admin

#### Provide the API Key and API Secret

Save the `API Key` and `API Secret`, then select the verification flow.

<img alt="app-configuration" width="450" src="https://mintcdn.com/idenfy/DOV0bfUXhnltF6lA/images/shopify/app-config-initial.png?fit=max&auto=format&n=DOV0bfUXhnltF6lA&q=85&s=eeb4dfb0387e3f37784b2ab903ecc1c2" data-path="images/shopify/app-config-initial.png" />

#### Account Page Flow

* Shows the verification button on the account page.
* Hides the checkout button until verification is complete, preventing the user from making a purchase.
* If the user is already verified, a verification status badge is shown on the account page.

<img alt="flow-account-configuration" width="450" src="https://mintcdn.com/idenfy/DOV0bfUXhnltF6lA/images/shopify/flow-account-sdk.png?fit=max&auto=format&n=DOV0bfUXhnltF6lA&q=85&s=7c3cff9dfbc4c3f36e478422c52e1238" data-path="images/shopify/flow-account-sdk.png" />

#### Before Checkout Flow

* Shows the verification button on the cart drawer/page. Hides the checkout button until verification is complete.
* The SDK is initialized when the user clicks the verification button, displaying the iDenfy verification dialog.
* On successful verification, the checkout button is enabled.

<img alt="flow-cart-drawer" width="450" src="https://mintcdn.com/idenfy/DOV0bfUXhnltF6lA/images/shopify/flow-cart-drawer.png?fit=max&auto=format&n=DOV0bfUXhnltF6lA&q=85&s=7e84e44cbbb8627d3979997422aee86e" data-path="images/shopify/flow-cart-drawer.png" />

<img alt="flow-cart-idenfy-dialog" width="450" src="https://mintcdn.com/idenfy/DOV0bfUXhnltF6lA/images/shopify/flow-cart-idenfy-dialog.png?fit=max&auto=format&n=DOV0bfUXhnltF6lA&q=85&s=508338f73fa6304f1b35a6671e9d1db0" data-path="images/shopify/flow-cart-idenfy-dialog.png" />

#### After Checkout Flow

* Shows the verification button on the Thank You/Order status page.
* The user is redirected to the verification page.
* The verification message is updated when the user refreshes the page or visits another page.

<img alt="flow-after-checkout-sdk" width="450" src="https://mintcdn.com/idenfy/DOV0bfUXhnltF6lA/images/shopify/flow-after-checkout-sdk.png?fit=max&auto=format&n=DOV0bfUXhnltF6lA&q=85&s=5dd96ba558791f867189c518994c6a23" data-path="images/shopify/flow-after-checkout-sdk.png" />

### Enable the iDenfy App for Your Theme

Go to **Online Store** in Shopify Admin, then **Themes** > **Customize**.

<Note>
  Ensure the correct "Verification flow" is selected in the iDenfy Shopify Admin.
</Note>

#### App Embed Blocks -- "Account (Legacy)" and "Before Checkout" Flows

These flows use [App embed blocks](https://shopify.dev/docs/apps/build/online-store/theme-app-extensions/configuration#app-embed-blocks) to embed the iDenfy SDK. Make sure the block is enabled for the theme.

Block settings:

* Custom CTA text
* Custom checkout button selector (for custom themes)
* Custom Account (Legacy) button selector (for custom themes)

**Styling (Advanced):**

CSS variables are used to style the block, allowing developers to customize it to match the theme:

```css theme={"system"}
:root {
  --idenfy-modal-desktop-width: 60vw;
  --idenfy-modal-desktop-height: 90vh;
  --idenfy-modal-mobile-width: 100vw;
  --idenfy-modal-mobile-height: 90vh;
  --idenfy-modal-backdrop: rgba(0, 0, 0, 0.5);

  --idenfy-btn-min-width: 160px;
  --idenfy-btn-font-size: 16px;
  --idenfy-btn-line-height: 1.5;
  --idenfy-btn-padding: 10px 24px;
  --idenfy-btn-border-radius: 5px;
  --idenfy-btn-bg-color: #28a745;
  --idenfy-btn-text-color: white;
  --idenfy-btn-bg-color-hover: #218838;
  --idenfy-btn-text-color-hover: white;
  --idenfy-error-text-color: #c70a24;

  --idenfy-message-font-size: 14px;
  --idenfy-message-padding: 4px 16px;
  --idenfy-message-margin: 16px 0;
  --idenfy-message-border-radius: 5px;
  --idenfy-message-success-bg-color: #28a745;
  --idenfy-message-info-bg-color: #ffb800;
  --idenfy-message-info-text: black;
  --idenfy-message-success-text: white;
}
```

<img alt="config-embed-theme-app" width="450" src="https://mintcdn.com/idenfy/DOV0bfUXhnltF6lA/images/shopify/config-embed-theme-app.png?fit=max&auto=format&n=DOV0bfUXhnltF6lA&q=85&s=7031f80e32d603df15235ae1915d214f" data-path="images/shopify/config-embed-theme-app.png" />

#### Checkout/Account Extensions -- "Account" and "After Checkout" Flows

These flows use [Checkout/Account UI extensions](https://shopify.dev/docs/api/checkout-extensions) to embed the iDenfy SDK.

<Note>
  Styling is limited in this flow due to the limitations of Checkout/Account UI extensions.
</Note>

**Setup:**

Select `Checkout and customer accounts` from the dropdown.

<img alt="extensions-checkout-dropdown" width="450" src="https://mintcdn.com/idenfy/DOV0bfUXhnltF6lA/images/shopify/extensions-checkout-dropdown.png?fit=max&auto=format&n=DOV0bfUXhnltF6lA&q=85&s=610cdba63f1b06e1562d106a4e4a8eee" data-path="images/shopify/extensions-checkout-dropdown.png" />

Add the iDenfy extension to the `Thank you`, `Profile`, and `Order status` pages.

<img alt="extensions-checkout-apps" width="450" src="https://mintcdn.com/idenfy/DOV0bfUXhnltF6lA/images/shopify/extensions-checkout-apps.png?fit=max&auto=format&n=DOV0bfUXhnltF6lA&q=85&s=d12062187723830eeda80da239e83e18" data-path="images/shopify/extensions-checkout-apps.png" />

Click on the extension to select where it should be displayed.

<img alt="extensions-checkout-apps-position" width="450" src="https://mintcdn.com/idenfy/DOV0bfUXhnltF6lA/images/shopify/extensions-checkout-apps-position.png?fit=max&auto=format&n=DOV0bfUXhnltF6lA&q=85&s=b056606adfe8bbd353490ba0be39cf47" data-path="images/shopify/extensions-checkout-apps-position.png" />

### Configure the iDenfy Webhook

On the iDenfy Dashboard, go to the **Webhooks** section.

<img alt="idenfy-webhook-setup" width="450" src="https://mintcdn.com/idenfy/GDLrU-93gtre7Ykv/images/shopify/idenfy-webhook-setup.png?fit=max&auto=format&n=GDLrU-93gtre7Ykv&q=85&s=5edf2e664f9d3dccbbb34058d41a8da7" data-path="images/shopify/idenfy-webhook-setup.png" />

* Add an `ID verification` webhook.
* **Receiver:** `https://shopify.idenfy.com/api/sdk/verification/webhook`
* **Signing key:** API key provided by iDenfy (same as in the Shopify App Admin).

<Warning>
  The **API key** is used to verify the webhook request. Without the correct API key, the webhook will not be processed.
</Warning>

## Customer Details

* If email/phone is available during the verification process, it will be saved in the customer details.
* The metafield **Idenfy: Identity verified** controls the verification status:
  * `true` -- Customer is verified.
  * `false` -- Customer is not verified.
* **Idenfy: ID scan reference** stores the iDenfy verification reference.
* An `idv-{status}` tag is added to the customer based on the iDenfy verification status (e.g. `idv-approved`, `idv-denied`, `idv-suspected`).

<img alt="customer-acc-verified" width="450" src="https://mintcdn.com/idenfy/DOV0bfUXhnltF6lA/images/shopify/customer-acc-verified.png?fit=max&auto=format&n=DOV0bfUXhnltF6lA&q=85&s=3a3e499235abe7a81ed70dcaca49c9a7" data-path="images/shopify/customer-acc-verified.png" />

## Order Details

* If the customer is logged in during verification (e.g. "Before checkout" and "After Checkout"), the verification status is shown in the order **Notes**.
* The same status is saved on the Customer details.

<img alt="order-details-approved" width="450" src="https://mintcdn.com/idenfy/DOV0bfUXhnltF6lA/images/shopify/order-details-approved.png?fit=max&auto=format&n=DOV0bfUXhnltF6lA&q=85&s=fac8e971dc63cf6548096c448421a9a7" data-path="images/shopify/order-details-approved.png" />

* If the customer is not logged in during verification (e.g. "Before Checkout" flow), the verification status is shown in the order **Notes**.
  * Customer status is not updated in this case since customer details are not available at the time of verification.