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

# Connect Ziina to your WooCommerce website

> Start accepting payments on your WooCommerce website with Ziina in just a few steps. This guide will walk you through the process to ensure a seamless setup.

export const platform_0 = "WooCommerce"

## Before you begin

To activate Ziina on {platform_0}, make sure:

* You’ve completed onboarding.
* Your Ziina account is verified. {/* (TODO: modify wording to disambiguate with business verification) */}

# Requirements

<Steps>
  <Step title="Check if you have WooCommerce or WordPress">
    Open your store website, and check the side bar. If WooCommerce appears as
    shown in the screenshot below, continue following the steps in this guide.

    <Frame>
      <img src="https://mintcdn.com/ziina/u6EUBaZzbgrNbbAT/images/woocommerce/woocommerce.png?fit=max&auto=format&n=u6EUBaZzbgrNbbAT&q=85&s=872bb502ddd1f34a6f0e982b3878def7" style={{ height: "300px" }} width="406" height="830" data-path="images/woocommerce/woocommerce.png" />
    </Frame>
  </Step>

  <Step title="Creating a Ziina Account and Getting your API key">
    Click on [this link](https://ziina.com/business/connect/), select
    WooCommerce and enter your phone number, OTP and email. You will immediately
    get access to your API key. This is the only time you’ll see it, so make
    sure you store it somewhere safe. If you don't already have a Ziina account
    your integration won't work until you download the app and complete your
    onboarding process (it takes 4 minutes).
  </Step>

  <Step title="Download the Ziina App and complete onboarding">
    Download the [Ziina
    App](https://ziina.com/business/?shortlink=gatewaypayment\&c=api_link\&pid=website_payments\&af_click_lookback=30d\&af_xp=custom\&source_caller=ui)
    on your phone, click on Ziina Professional, enter your phone number and
    complete the onboarding steps (you will need your Emirates ID). You won't be
    able to receive payments on your website until this step is completed and
    your account is verified.
  </Step>
</Steps>

# Installing the Ziina plugin

<Steps>
  <Step title="Log in to your WordPress site" />

  <Step title="Add new plugin">
    In the left sidebar, hover over **Plugins** and then click **Add New**

    <Frame>
      <img src="https://mintcdn.com/ziina/u6EUBaZzbgrNbbAT/images/woocommerce/install-ziina-plugin.png?fit=max&auto=format&n=u6EUBaZzbgrNbbAT&q=85&s=5770fec7df2e208a21f813f0dff06068" style={{ height: "300px" }} width="1023" height="971" data-path="images/woocommerce/install-ziina-plugin.png" />
    </Frame>
  </Step>

  <Step title="Install Ziina plugin">
    Enter "Ziina" in the search bar and click **Install Now** to install the
    plugin.

    <Frame>
      <img src="https://mintcdn.com/ziina/u6EUBaZzbgrNbbAT/images/woocommerce/install-now.png?fit=max&auto=format&n=u6EUBaZzbgrNbbAT&q=85&s=98d7f2db75c7878e97b96675cc2d312a" style={{ width: "100%" }} width="2862" height="858" data-path="images/woocommerce/install-now.png" />
    </Frame>
  </Step>
</Steps>

# Configuring the Ziina plugin

<Steps>
  <Step title="Open WooCommerce settings">
    Click on **WooCommerce** in the left sidebar and click on **Settings**

    <Frame>
      <img src="https://mintcdn.com/ziina/u6EUBaZzbgrNbbAT/images/woocommerce/settings.png?fit=max&auto=format&n=u6EUBaZzbgrNbbAT&q=85&s=52bde65191c716edc8ae8a00e168b3c6" style={{ height: "300px" }} width="614" height="669" data-path="images/woocommerce/settings.png" />
    </Frame>
  </Step>

  <Step title="Open payments tab">
    Select **Payments** at the top of the page.

    <Frame>
      <img src="https://mintcdn.com/ziina/u6EUBaZzbgrNbbAT/images/woocommerce/payments-settings.png?fit=max&auto=format&n=u6EUBaZzbgrNbbAT&q=85&s=b561249888eed0894b214705f5bb8354" style={{ width: "100%" }} width="1007" height="446" data-path="images/woocommerce/payments-settings.png" />
    </Frame>
  </Step>

  <Step title="Ensure Ziina is enabled in the list of payment options">
    Ziina payment toggle is supposed to be switched on

    <Frame>
      <img src="https://mintcdn.com/ziina/u6EUBaZzbgrNbbAT/images/woocommerce/ziina-enabled.png?fit=max&auto=format&n=u6EUBaZzbgrNbbAT&q=85&s=3d1409082bae3cd78a3ab354af6aac68" style={{ width: "100%" }} width="1738" height="288" data-path="images/woocommerce/ziina-enabled.png" />
    </Frame>
  </Step>

  <Step title="Configure your API key">
    Enter your API key in the field **API key**

    <Frame>
      <img src="https://mintcdn.com/ziina/u6EUBaZzbgrNbbAT/images/woocommerce/ziina-api-key.png?fit=max&auto=format&n=u6EUBaZzbgrNbbAT&q=85&s=8be197075255340e05fb381ee19606c3" style={{ width: "100%" }} width="1363" height="1024" data-path="images/woocommerce/ziina-api-key.png" />
    </Frame>
  </Step>

  <Step title="Optional: change title and description">
    You can also change the **Title** and **Description** of the Ziina payment
    option. The title you enter is what appears on your website for your
    customers. Let them know they can use this payment option to pay by
    credit/debit card, Apple Pay, and Google Pay.
  </Step>

  <Step title="Click 'Save Changes' and you’re done!" />
</Steps>

## Embedded Checkout

The embedded checkout mode displays the Ziina payment widget directly on your WooCommerce checkout page, so customers complete their payment without being redirected to an external page.

### Enabling embedded checkout

These settings are available starting in plugin version **1.2.21**. If you do not see them, update the plugin.

<Frame>
  <img src="https://mintcdn.com/ziina/bOepKFjbTWCHjMpQ/images/embedded-checkout/embedded-checkout-mode-woocommerce.png?fit=max&auto=format&n=bOepKFjbTWCHjMpQ&q=85&s=20b83d6738928196c28d1b7d9d5ff7f2" width="1364" height="334" data-path="images/embedded-checkout/embedded-checkout-mode-woocommerce.png" />
</Frame>

<Steps>
  <Step title="Select 'Embedded' as the checkout mode">
    In the Ziina plugin settings, find the **Checkout mode** dropdown and select **Embedded**.
  </Step>

  <Step title="Set the embedded widget locale">
    Use the **Embedded widget locale** dropdown to choose the language the payment widget will display to your customers (e.g. English or Arabic).
  </Step>
</Steps>

### Domain verification

Embedded checkout requires your store's domain to be verified before it can be activated. Follow the three steps below inside the plugin settings panel.

<Steps>
  <Step title="Set up domain verification">
    Click the **Set up domain verification** button. This automatically places the required Apple Pay domain verification file on your site. Once the file is in place, you will see the confirmation message **Domain verification file: present** beneath the button.
  </Step>

  <Step title="Contact support to whitelist your domain">
    Click the **Contact support** button and send a message to the Ziina support team asking them to verify and whitelist your domain. Include your store URL in the message.
  </Step>

  <Step title="Save your settings">
    Once Ziina support confirms your domain is verified, return to the plugin settings, make sure **Embedded** is selected as the checkout mode, and click **Save changes**.
  </Step>
</Steps>

<Note>
  Domain verification is a one-time step. You do not need to repeat it unless your store domain changes.
</Note>

# Completing a test transaction

To test a transaction, check the box in Ziina payment settings titled **Test mode**.

<Frame>
  <img src="https://mintcdn.com/ziina/u6EUBaZzbgrNbbAT/images/woocommerce/test-transaction.png?fit=max&auto=format&n=u6EUBaZzbgrNbbAT&q=85&s=81b44826faef2caff394951ac06aec7e" style={{ width: "100%" }} width="979" height="138" data-path="images/woocommerce/test-transaction.png" />
</Frame>

You can now test the payment flow, and your card will not be charged. Be sure to uncheck this box before making your site live.

## You’re all set

You can now track all your WooCommerce payments directly from the Ziina app. It’s simple, fast, and designed to help you manage your business with ease.

## Need help?

If you have questions, visit our [help center](https://ziina.com/help-center) or contact us at [support@ziina.com](mailto:support@ziina.com).