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

# Shopify

This guide will walk you through the process of installing and configuring Gale Payments on your Shopify store, enabling HSA/FSA payments for your customers.

***

## Prerequisites

Before you begin, ensure the following:

* **Shopify Admin Access**: You have administrative access to your Shopify store.
* **API Key**: You can generate your API Key in your [Gale Dashboard](https://dashboard.withgale.com/).

***

## Installation Steps

<Steps>
  <Step title="Install the Gale Payments App">
    1. Install the [ Gale HSA & FSA Payments App ](https://apps.shopify.com/gale-hsa-fsa-payments)
    2. Follow the prompts to add the payments app to your store.

    <img className="block" src="https://mintcdn.com/galepaymentsinc/ES_DCNs-vEFQ6D4Q/images/shopify_install.png?fit=max&auto=format&n=ES_DCNs-vEFQ6D4Q&q=85&s=358aef1791ebbc2e4d1c094d38c908ba" alt="Install Gale Payments App" width="1244" height="806" data-path="images/shopify_install.png" />
  </Step>

  <Step title="Enter Store Details and API Key">
    1. After installing the app, you will be redirected to Configure Gale Payments App
    2. Enter your **Store Name** and **API Key** provided during onboarding.

    <img className="block" src="https://mintcdn.com/galepaymentsinc/ES_DCNs-vEFQ6D4Q/images/shopify_configure.png?fit=max&auto=format&n=ES_DCNs-vEFQ6D4Q&q=85&s=4946496f978db8b0dfee770e5e3ae982" alt="Install Gale Payments App" width="1232" height="752" data-path="images/shopify_configure.png" />

    1. **Save** your settings.

    <img className="block" src="https://mintcdn.com/galepaymentsinc/ES_DCNs-vEFQ6D4Q/images/shopify_return.png?fit=max&auto=format&n=ES_DCNs-vEFQ6D4Q&q=85&s=2113d48c08ed30699779defaebbede90" alt="Install Gale Payments App" width="686" height="306" data-path="images/shopify_return.png" />

    1. Click **Return to Shopify**.
  </Step>

  <Step title="Configure Gale Payments in Shopify">
    1. Go to **Shopify Admin > Settings > Payments**.
    2. Click **Add Payment Method**.
    3. Select **Search by Provider** and type **"Gale"**.

    <img className="block" src="https://mintcdn.com/galepaymentsinc/ES_DCNs-vEFQ6D4Q/images/shopify_search.png?fit=max&auto=format&n=ES_DCNs-vEFQ6D4Q&q=85&s=d9a24ba1696de1091b51776f8feed074" alt="Install Gale Payments App" width="2130" height="444" data-path="images/shopify_search.png" />

    1. Choose **Gale HSA & FSA Payments** from the list.

    <img className="block" src="https://mintcdn.com/galepaymentsinc/ES_DCNs-vEFQ6D4Q/images/shopify_activate.png?fit=max&auto=format&n=ES_DCNs-vEFQ6D4Q&q=85&s=01761dfa2d82dfc2b09d82e91bc5ee07" alt="Install Gale Payments App" width="1482" height="746" data-path="images/shopify_activate.png" />

    1. Enable **Test Mode** and click **Activate**.
  </Step>

  <Step title="Setup Gale  Pixel ">
    1. Go to **Shopify Admin > Settings > Customer Events**.
    2. Click **Add Custom Pixel**.
    3. Enter Pixel Name **"Gale Pixel"**.

    <img className="block" src="https://mintcdn.com/galepaymentsinc/ES_DCNs-vEFQ6D4Q/images/shopify_add_pixel.png?fit=max&auto=format&n=ES_DCNs-vEFQ6D4Q&q=85&s=e1a19867a713b103c5bac9e073b2088c" alt="Add Gale Pixel " width="2100" height="1166" data-path="images/shopify_add_pixel.png" />

    1. Enter the following **Pixel Code** and click **Connect** to save.
       ```javascript theme={null}
       analytics.subscribe('payment_info_submitted', (event) => {
         const checkout = event.data.checkout;
         const payload = event.data.checkout;
         fetch('https://checkoutv1.withgale.com/app/order_information', {
           method: 'POST',
           body: JSON.stringify(payload),
           keepalive: true,
         });
       });
       ```
       <img src="https://mintcdn.com/galepaymentsinc/6m6sIGhPmnfzUHJR/images/Screenshot2026-01-20at11.09.59PM.png?fit=max&auto=format&n=6m6sIGhPmnfzUHJR&q=85&s=e3eb7d8a5495cb869246e4f1c316bd90" alt="Screenshot2026 01 20at11 09 59PM" width="1524" height="1172" data-path="images/Screenshot2026-01-20at11.09.59PM.png" /> In the **Customer privacy** section, configure the settings as follows:
       1. **Permission**
          * Select **Not required**
       2. **Data sale**
          * Select **Data collected does not qualify as data sale**

    <img className="block" src="https://mintcdn.com/galepaymentsinc/ES_DCNs-vEFQ6D4Q/images/shopify_pixel_status.png?fit=max&auto=format&n=ES_DCNs-vEFQ6D4Q&q=85&s=d81e85c545a000e395878ebf144154e5" alt="Add Gale Pixel Code" width="1504" height="494" data-path="images/shopify_pixel_status.png" />

    1. Make sure the Pixel status is **Connected**.
  </Step>

  <Step title="Test the Integration">
    1. Go to your store and add a product to the cart.
    2. Proceed to checkout and select **Gale HSA & FSA Payments** as the payment method.

    <img className="block" src="https://mintcdn.com/galepaymentsinc/ES_DCNs-vEFQ6D4Q/images/shopify_checkout.png?fit=max&auto=format&n=ES_DCNs-vEFQ6D4Q&q=85&s=be3b313ccaa1933d4a7a55311494152f" alt="Gale Checkout " width="1108" height="862" data-path="images/shopify_checkout.png" />

    1. Use one of the [Test Cards](/resources/test-cards) for the transaction.

    <img className="block" src="https://mintcdn.com/galepaymentsinc/-tfqSxxNOR5RQPkA/Screenshot2025-04-11at1.56.38PM.png?fit=max&auto=format&n=-tfqSxxNOR5RQPkA&q=85&s=58b15e8a94a87f3b7c7a8fab145b985e" alt="Gale Checkout Journey" width="1170" height="623" data-path="Screenshot2025-04-11at1.56.38PM.png" />

    1. Verify the **order** and **payment status** in your Shopify Admin to ensure that test transaction is successful.
  </Step>

  <Step title="Go Live">
    1. Return to the Gale Payments app in your Shopify Admin.
    2. Disable **Test Mode** in the settings.

    <img className="block" src="https://mintcdn.com/galepaymentsinc/ES_DCNs-vEFQ6D4Q/images/shopify_production.png?fit=max&auto=format&n=ES_DCNs-vEFQ6D4Q&q=85&s=f65ae79e1555a7df9543f36acc90b9a3" alt="Disable Test Mode " width="1462" height="358" data-path="images/shopify_production.png" />

    1. **Save** your changes and you are ready to accept **HSA & FSA** cards using Gale Payments.
  </Step>
</Steps>

***

## Resources

<CardGroup cols="2">
  <Card title="Test Cards " icon="credit-card" href="/resources/test-cards">
    Use these cards only when **Test Mode** is enabled.
  </Card>

  <Card title="Gale HSA & FSA Eligibility" icon="shopify" href="eligibilityinstallation">
    Install **Gale HSA & FSA Eligibility** app for onsite product messaging.
  </Card>
</CardGroup>

***

## Troubleshooting

* **App Not Visible**: Ensure the Gale Payments app is installed and activated in your Shopify Admin.
* **API Key Issues**: Double-check your API Key for accuracy.
* **Test Transactions Failing**: Confirm you are using valid [ Test Cards](/resources/test-cards).

***

## Need Help?

If you encounter any issues, contact our support team at [support@withgale.com](mailto:support@withgale.com). We're here to help!

***

By completing these steps, your Shopify store is now fully equipped to accept HSA/FSA payments with Gale Payments!
