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

#  Shopify Plugin Installation

<Note>
  Tabby works on the Shopify platform for all supported countries. Currency conversion may apply for multi-currency stores, check **Multi-Currency Processing and Currency Conversion** below.
</Note>

## Installation Steps

No time to read or have questions on any of the steps? Watch video guide on<br />
**How to set up Tabby on Shopify:**

<video controls alt="How to set up Tabby on Shopify" className="rounded-xl w-full" src="https://mintcdn.com/tabby-5f40add6/Mdf68_F2fROQ9Weu/images/shopify-setting-up-tabby.mp4?fit=max&auto=format&n=Mdf68_F2fROQ9Weu&q=85&s=594eb9a2c48cd1b64b5973c89c914ffc" data-path="images/shopify-setting-up-tabby.mp4" />

<Steps>
  <Step
    stepNumber={1}
    title={(
  <span>
    <a href="https://merchant.tabby.ai/">
      Register with Tabby
    </a>
    <span style={{ fontWeight: 'normal', fontSize: '0.9em' }}>
      &nbsp;(KSA: <a href="https://merchant.tabby.sa/">merchant.tabby.sa</a>)
    </span>
    <span style={{ fontWeight: 'normal' }}>
      &nbsp;and fill all required business details to collect Tabby Live API Keys
    </span>
  </span>
)}
  />

  <Step
    stepNumber={2}
    title={(
  <span>
    To install Tabby Payment App,
    <a href="https://apps.shopify.com/tabby-payment-1">
      &nbsp;click here
    </a>
  </span>
)}
  />

  <Step
    stepNumber={3}
    title={(
  <span style={{ fontWeight: 'normal' }}>
    As soon as the payment method is installed, open "Payments" tab in Shopify Settings
  </span>
)}
  />

  <Step
    stepNumber={4}
    title={(
  <span>
    <span style={{ fontWeight: 'normal' }}>
      In Additional payment methods click&nbsp;
    </span>
    Add payment method
  </span>
)}
  />

  <Step
    stepNumber={5}
    title={(
  <span>
    <span style={{ fontWeight: 'normal' }}>
      Choose&nbsp;
    </span>
    "Search by payment method"
    <span style={{ fontWeight: 'normal' }}>
      &nbsp;and input&nbsp;
    </span>
    "tabby"
  </span>
)}
  />

  <Step
    stepNumber={6}
    title={(
  <span>
    <span style={{ fontWeight: 'normal' }}>
      Click "Tabby" to see all options and choose the first line&nbsp;
    </span>
    "tabby <span>&gt;</span>"
  </span>
)}
  />

  <Step
    stepNumber={7}
    title={(
  <span>
    <span style={{ fontWeight: 'normal' }}>
      Click&nbsp;
    </span>
    "Activate"
  </span>
)}
  />

  <Step
    stepNumber={8}
    title={(
  <span>
    <span style={{ fontWeight: 'normal' }}>
      At Tabby settings page click&nbsp;
    </span>
    "More actions"
    <span style={{ fontWeight: 'normal' }}>
      &nbsp;-<span>&gt;</span>&nbsp;
    </span>
    "Manage"
  </span>
)}
  />

  <Step
    stepNumber={9}
    title={(
  <span>
    <span style={{ fontWeight: 'normal' }}>
      Copy the&nbsp;
    </span>
    Live Public&nbsp;
    <span style={{ fontWeight: 'normal' }}>
      and&nbsp;
    </span>
    Secret keys&nbsp;
    <span style={{ fontWeight: 'normal' }}>
      from the&nbsp;
    </span>
    <a href="https://merchant.tabby.ai/business-profile/stores">
      Merchant Dashboard
    </a>
    <span style={{ fontWeight: 'normal', fontSize: '0.9em' }}>
      &nbsp;(KSA: <a href="https://merchant.tabby.sa/business-profile/stores">merchant.tabby.sa</a>)
    </span>
    <span style={{ fontWeight: 'normal' }}>
      &nbsp;and paste them in the necessary fields. Leave the&nbsp;
    </span>
    Webhook Key
    <span style={{ fontWeight: 'normal' }}>
      &nbsp;empty, you will get it in the next steps
    </span>
  </span>
)}
  />

  <Step
    stepNumber={10}
    title={(
  <span>
    <span style={{ fontWeight: 'normal' }}>
      Click&nbsp;
    </span>
    "Save"
  </span>
)}
  />

  <Step
    stepNumber={11}
    title={(
  <span>
    <span style={{ fontWeight: 'normal' }}>
      Tabby requires Shopify Webhooks to update the order number, fetch the phone number and order lines from Shopify
    </span>
  </span>
)}
  />
</Steps>

<Warning>
  If you have installed Webhooks earlier and have issues with updating order numbers - please, make sure all 4 webhooks are set up and you are using the latest available API version. Kindly refer to the
  <a href="/e-commerce-platforms/shopify/shopify-plugin-installation#webhook-api-version-update">Webhook API Version Update.</a>
</Warning>

For setting up Webhooks, open **Notifications** and open "Webhooks". At the "Webhooks" page click "**Create webhook**".

<Steps>
  <Step
    stepNumber={12}
    title={(
  <span>
    <span style={{ fontWeight: 'normal' }}>
      Add 4 Webhooks:
    </span>
  </span>
)}
  />
</Steps>

| event                | Callback URL                                                  | Format | API version |
| -------------------- | ------------------------------------------------------------- | ------ | ----------- |
| Transaction creation | `https://sfy-payment.tabby.ai/api/webhook/transaction/create` | JSON   | Latest      |
| Order creation       | `https://sfy-payment.tabby.ai/api/webhook/order/create`       | JSON   | Latest      |
| Checkout creation    | `https://sfy-payment.tabby.ai/api/webhook/checkout/create`    | JSON   | Latest      |
| Checkout update      | `https://sfy-payment.tabby.ai/api/webhook/checkout/create`    | JSON   | Latest      |

<Steps>
  <Step
    stepNumber={13}
    title={(
  <span>
    <span style={{ fontWeight: 'normal' }}>
      Copy the Webhook Verification Key which is generated after the first Webhook creation
    </span>
  </span>
)}
  />
</Steps>

<div className="product-shot-figure">
  <img className="product-shot" alt="Webhook Verification Key" src="https://mintcdn.com/tabby-5f40add6/UqGv66SUQ3rizJwt/images/webhook-verf.png?fit=max&auto=format&n=UqGv66SUQ3rizJwt&q=85&s=065206567308b7fa98001bcf82bbe8e3" width="1518" height="1128" data-path="images/webhook-verf.png" />

  <p className="product-shot-caption">Webhook Verification Key</p>
</div>

<Steps>
  <Step
    stepNumber={14}
    title={(
  <span>
    <span style={{ fontWeight: 'normal' }}>
      Paste the key in Settings -<span>&gt;</span> Payments -<span>&gt;</span> Supported/Additional payment methods -<span>&gt;</span> tabby -<span>&gt;</span> More actions -<span>&gt;</span> Manage -<span>&gt;</span> Webhook Verification Key
    </span>
  </span>
)}
  />

  <Step
    stepNumber={15}
    title={(
  <span>
    <span style={{ fontWeight: 'normal' }}>
      Check the Required Data enabled:
      <ol style={{ listStyleType: 'lower-alpha', marginLeft: '15px', fontWeight: 'normal' }}>
        <li>Check that you have "Automatic at checkout" option in the "Payment capture method" setting in the "Payments" tab.</li>
        <li>Make sure to uncheck "Enable test mode" as Tabby does NOT pay out for test / playground orders ever, even if a live customer places a real order while "Test mode" was checked.</li>
        <li>Email and phone number are required for Tabby payment method. Please enable the following settings in your admin panel:</li>
      </ol>  
    </span>
  </span>
)}
  />
</Steps>

<img className="product-shot" alt="Customer contact method" src="https://mintcdn.com/tabby-5f40add6/UqGv66SUQ3rizJwt/images/webhook-2.png?fit=max&auto=format&n=UqGv66SUQ3rizJwt&q=85&s=56ac93e1e9e2cfea403bb5506af1ad5e" width="600" data-path="images/webhook-2.png" />

<img className="product-shot" alt="Shipping address phone number" src="https://mintcdn.com/tabby-5f40add6/UqGv66SUQ3rizJwt/images/webhook-3.png?fit=max&auto=format&n=UqGv66SUQ3rizJwt&q=85&s=53412ec451fc8a182777b41be67b3e00" width="600" data-path="images/webhook-3.png" />

### Webhook API Version Update

Here **Webhook Update Demonstarion** can be reviewed:

<video controls alt="Webhook Update Demonstarion" className="rounded-xl w-full" src="https://mintcdn.com/tabby-5f40add6/UqGv66SUQ3rizJwt/images/shopify-webhooks-update.mp4?fit=max&auto=format&n=UqGv66SUQ3rizJwt&q=85&s=467c8e5416ad592b0f3b49f7fdf4b9e9" data-path="images/shopify-webhooks-update.mp4" />

Shopify Webhooks are created for the particular API version. Shopify releases several versions per year, so it means your initial API version settings will inevitably expire. Tabby makes the necessary changes to support the latest updated API versions, but this also requires a manual action from the partner's end.

You need to go to Settings -<span>></span> Notifications -<span>></span> Webhooks and choose the **latest** API version from the dropdown of a particular Tabby Webhook.

## Add Tabby Snippets

<div className="grid grid-cols-2 gap-4">
  <div>
    <img alt="Tabby snippet on product page" className="rounded shadow" src="https://mintcdn.com/tabby-5f40add6/UqGv66SUQ3rizJwt/images/shopify-snippet-new-aed.png?fit=max&auto=format&n=UqGv66SUQ3rizJwt&q=85&s=6e9ac2d1ae9015c257876051dbc065c1" width="1724" height="1028" data-path="images/shopify-snippet-new-aed.png" />
  </div>

  <div>
    <img alt="Pop-up" className="rounded shadow" src="https://mintcdn.com/tabby-5f40add6/Mdf68_F2fROQ9Weu/images/shopify-popup-test.png?fit=max&auto=format&n=Mdf68_F2fROQ9Weu&q=85&s=869ac400645beed9f269130050f092a6" width="2742" height="1596" data-path="images/shopify-popup-test.png" />
  </div>
</div>

Tabby snippets let your customers know they can split their payments with Tabby in your store. Snippets appear on the product and cart pages and may help improve conversion.

To add Tabby snippets to your product and cart pages, please follow our detailed instructions and video manuals here: <a href="/e-commerce-platforms/shopify/shopify-snippets">Tabby Snippets for Shopify</a>

<Warning>
  <div>
    <span style={{ textDecoration: 'none', fontWeight: 'bold' }}>Please note that snippets alone do not activate Tabby as a payment method in your store and don’t affect payment processing. Before adding snippets, make sure Tabby is already integrated and visible on your checkout page. </span>
  </div>
</Warning>

{/* <Card
href="https://drive.google.com/file/d/1vElORk1kNNlVQ_5FooCSdgW3XO9ZPC7m/view?usp=sharing"
icon="film" iconType="light" color="#00A462"
horizontal>
<span style={{ textDecoration: 'none', fontWeight: 'bold' }}>
  How to add Tabby snippet on Shopify.mp4
</span>
</Card> */}

## Tabby is live now!

Tabby orders are captured automatically. Refunds can be initiated from Shopify admin panel and will reflect on Tabby Merchant Dashboard, Customer Portal and Settlements.

## Limitations and Known Constraints

### Language Settings

The locale for Tabby Hosted Payment Page and Payment Method will be set based on the store's language, Tabby supports English and Arabic. If the locale is not supported, English is used by default. You can configure your store's language in your Shopify admin under Settings -<span>></span> Languages.

### Order Number Update

When an order is placed in Shopify, a payment id is set in the Shopify order timeline information under the "payment was processed on tabby." section, within the "**Information from the gateway**" subsection. This payment id is set in the Tabby order's "reference\_id" (order number). Shopify does not share the <a href="https://community.shopify.com/c/shopify-apps/getting-the-order-number/td-p/1429420" rel="noopener noreferrer" target="_blank">Shopify order number</a> for this payment app integration and Tabby is not able to match the Shopify order number or order number in the Tabby order. The Webhooks allow to update order number or Tabby Merchant Dashboard, Customer Portal and Settlements.

<img className="product-shot" alt="Order number" src="https://mintcdn.com/tabby-5f40add6/UqGv66SUQ3rizJwt/images/webhook-5.png?fit=max&auto=format&n=UqGv66SUQ3rizJwt&q=85&s=1e2237dd3135f1de98363d8044244534" width="1456" height="1038" data-path="images/webhook-5.png" />

### Order Editing

Please note that order details editing (as order lines, customer details, etc.) will be reflected in Shopify Dashboard only and will not updated for the payment on Tabby Merchant Dashboard, Customer Portal and Settlements.

### Order Lines

Shopify doesn't share order data via the Payment App and Shopify does not share any order line data for non-product order lines, e.g. VAT/taxes, discounts, surcharges, tip, etc. Tabby orders will have necessary Order Lines data after Webhook installation.

### Order Tagging

Tabby Payment App cannot currently set tags on a Shopify order. You can use the <a href="https://apps.shopify.com/flow" rel="noopener noreferrer" target="_blank">Shopify Flow app</a> (available only for the following subscription <a href="https://help.shopify.com/en/manual/shopify-flow#:~:text=Shopify%20Flow%20is%20available%20only,the%20Shopify%20Fulfillment%20Network%20%28SFN%29" rel="noopener noreferrer" target="_blank">plans</a> - Shopify, Advanced and Shopify Plus) which can set order tags within a flow for Tabby orders.

### Promo Customizations

Customizations of Tabby payment method and (logo, footer text) are currently supported only for Shopify Plus merchants. You can use custom scripts to customize a payment methods presentation in Shopify checkout, based on available cart data. Shopify has example payment <a href="https://help.shopify.com/en/manual/checkout-settings/script-editor/examples/payment-gateway-scripts" rel="noopener noreferrer" target="_blank">script code here</a>. You can request **Logo and Snippets implementation** by your Tabby account manager.

### Domain Filtering

Payment App uses a different hosted payment page URL: `checkout.tabby.ai` (UAE, Kuwait) or `checkout.tabby.sa` (KSA).
Merchants that filter this domain in Google Analytics will need to update their GA configurations accordingly.

### Market Limitation

Tabby Payment App accept orders only for the billing addresses in the markets of KSA, UAE, Kuwait. Customers for non-supported regions based on the order's currency are shown an error message on page load that the Tabby order cannot be processed.

### Multi-Currency Processing and Currency Conversion

Tabby processes payments in the following currencies: SAR (SR), AED (Dhs), and KWD (KD), which must correspond to the customer's billing address. Tabby Payment App is compatible with all Shopify stores, regardless of their base currency.

If the store’s base currency differs from the customer’s billing currency, currency conversion will be applied, and the converted amount will be displayed at Tabby checkout. Customer transactions and merchant settlements will be processed in the customer’s billing currency.

Currency conversion is also applied between supported currencies if the store’s base currency differs from the customer’s billing currency.

Please note that to enable conversion, the “Enable Multi-Currency Processing” option must be selected in the Tabby settings.

### Inventory Lock Limitation and Inventory Stock Check

When a customer places an order with an alternative payment integration, such as Tabby Payment App, Shopify redirects to the payment method but does not lock the order's product inventory and thus stock inventory cannot be guaranteed. Shopify will update this functionality in the future.

However, Tabby can check inventory immediately after payment is completed but before the order is created in Shopify. If an item goes out of stock during the payment process, the funds will be refunded to the customer, and the Shopify order will not be created.

To enable this functionality, please turn on the **Check Inventory Stock** feature in Tabby settings in your Shopify admin panel.
Note that this feature only works when the following settings are applied to your products in Shopify settings:

* **Inventory tracking** is enabled
* **Continue selling when out of stock** setting is disabled

### Additional Request of the Phone Number

Even if customers already previously entered their phone number in Shopify checkout, Shopify may not share that phone number with payment integrations when email is required instead of phone at the checkout, thus Tabby will ask the customers to enter the phone number again within our Hosted Payment Page.

### Payment Method Renaming Limitation

Renaming the payment method is not currently supported by Shopify, as payment providers can now configure translations for the payment method name.<br />
With Tabby Payment App for Shopify, translations are available for English and Arabic.

### Checkout Error Limitation

*"There was an issue processing your payment. Try again or use a different payment method." –* this message can happen for tech/authorization reasons only. The most common reason (for new integrations) is that the API keys haven't been populated fully. You can check the API credentials at <a href="https://merchant.tabby.ai/" rel="noopener noreferrer" target="_blank">merchant.tabby.ai</a> (KSA: <a href="https://merchant.tabby.sa/" rel="noopener noreferrer" target="_blank">merchant.tabby.sa</a>). Also, this message appears if country in shipping or billing address is different from country (countries) that your Tabby account is signed for.

<img className="product-shot" alt="Checkout error limitation" src="https://mintcdn.com/tabby-5f40add6/UqGv66SUQ3rizJwt/images/webhook-6.png?fit=max&auto=format&n=UqGv66SUQ3rizJwt&q=85&s=1bcb13f9fa209e243971628a138de855" width="1276" height="1212" data-path="images/webhook-6.png" />

### Redirection for Background Pre-Scoring Rejection

Tabby now redirects the customers to our internal rejection screens where we explain the reason and advise how to avoid this rejection if possible. Customers may see the general rejection explanation (can't be avoided), too high cart total and too low cart total rejections (can be skipped by adjusting the cart total).

### New Session is Required after Cancellation or Rejection

Customers must start a new session after being rejected or if they decide to cancel the session. For this customers need to change any contact details at the "Contact information" page.

<img className="product-shot" alt="Contact information page" src="https://mintcdn.com/tabby-5f40add6/UqGv66SUQ3rizJwt/images/webhook-7.png?fit=max&auto=format&n=UqGv66SUQ3rizJwt&q=85&s=ef2d75ef6b94d34206904f9e57210066" width="1425" height="1405" data-path="images/webhook-7.png" />

### The Amount Paid by the Customer to Tabby Doesn't Match the Shopify Order Total

If customers update a related, but different Shopify session separately from the Shopify session used to place the Tabby order, the order totals between the Shopify and Tabby orders may not match, but the amount "Paid by customer" for the Shopify order should always match the Tabby order total. While not ideal, this is working as expected and designed. Care should be taken to only fulfill order line items paid for by the customer.

### Safari Browser for Web and Mobile Doesn't Render the Snippets.

If you can see Tabby promos at all other browsers except for Safari, please know that this is a limitation of iOS and MacOS. There is no available fix for this issue, but we are in the process of researching what components prevent us from proper snippet showing.

### Feedback and Support

If additional support is needed, email `partner@tabby.ai` / `partner@tabby.sa` (please include your Shopify store name and add your Account Manager in CC) for specific Tabby support.

Customer Tabby Support available at `help@tabby.ai` / `help@tabby.sa`

<a href="https://community.shopify.com" rel="noopener noreferrer" target="_blank">[https://community.shopify.com](https://community.shopify.com)</a> is a good place for Shopify questions, support, and feedback, in addition to <a href="https://help.shopify.com/" rel="noopener noreferrer" target="_blank">[https://help.shopify.com/](https://help.shopify.com/)</a>
