Add a HIPAAtizer Form to a Shopify Product Page

You can collect PHI directly on a Shopify product page when a customer must provide prescription information before adding a product to the cart.

In this guide, you will embed an existing HIPAAtizer form on a Shopify product page and automatically submit it when the customer clicks Add to cart. If any required fields in the HIPAAtizer form are missing, the form will display validation errors and Shopify will block the add-to-cart action until the form is valid.

IMPORTANT

This guide is written for the Dawn theme.

If you are using a different Shopify theme, file names and JavaScript entry points may differ. You may need to:

• Modify a different template or JavaScript file
• Adjust selectors used for the Add to cart logic

What this setup does

• Embeds a HIPAAtizer form (iframe) on a Shopify product page
• Intercepts the Add to cart action
• Uses postMessage to submit the embedded HIPAAtizer form
• Waits for a response containing a submissionUrl
• Stores the submission URL in Shopify cart attributes under HIPAA URL
• Continues with the normal Shopify add-to-cart flow once the form is valid

Prerequisites

• A published HIPAAtizer form embedded on the product page as an iframe
• Access to Shopify theme code
• The Workflow ID (Form ID) of your HIPAAtizer form (available in Form Settings → Integrations in the HIPAAtizer dashboard)

Step 1 — Hide the Submit button in the HIPAAtizer Form Builder

1. Open your form in the HIPAAtizer Form Builder
2. Click Edit on the Submit button element
3. Enable Hide Button
4. Click Save
5. Publish the form so the changes apply to the live embed

This ensures the form can only be submitted programmatically from Shopify.

Step 2 — Open the Shopify theme code editor

1. In Shopify Admin, go to Online Store → Themes
2. On your active theme, click Edit code

Step 3 — Intercept Add to cart and submit the HIPAAtizer form (Dawn theme)

In the Dawn theme, product submission logic lives in product-form.js.

1. Open the product form script

Open:

assets/product-form.js

2. Make the submit handler async

Find the onSubmitHandler(evt) method and make it async:

async onSubmitHandler(evt)

3. Inject the HIPAAtizer submission logic

Inside onSubmitHandler, locate the following guard clause:

if (this.submitButton.getAttribute('aria-disabled') === 'true') return;

Immediately after it, add the code below.

Replace FORM_ID with your HIPAAtizer Workflow ID.

const res = await fetch('/cart.js');
const cart = await res.json();
const hipaaURL = cart.attributes?.['HIPAA URL'];

if (!hipaaURL) {
  const FORM_ID = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';

  const hipaaFrame = document.getElementById(`${FORM_ID}-iframe`);
  if (!hipaaFrame?.contentWindow) return;

  hipaaFrame.contentWindow.postMessage({ submitForm: true }, '*');

  const submissionPromise = new Promise((resolve, reject) => {
    const listener = (event) => {
      if (event.data?.isFormValid === false) {
        window.removeEventListener('message', listener);
        reject('Form is invalid');
      }

      if (event.data?.isFormValid && event.data?.submissionUrl) {
        window.removeEventListener('message', listener);
        resolve(event.data.submissionUrl);
      }
    };

    window.addEventListener('message', listener);
  });

  const submissionUrl = await submissionPromise;

  await fetch('/cart/update.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      attributes: {
        'HIPAA URL': submissionUrl,
      },
    }),
  });
}

How this works

• Checks whether a HIPAAtizer submission URL already exists in cart attributes
• If not present:
  • Triggers the embedded HIPAAtizer form submission
  • Waits for validation and a submissionUrl
  • Stores the URL in the Shopify cart under HIPAA URL
• Allows the original Shopify submission flow to continue

Step 4 — Hide the “Buy it now” button

If the Buy it now button is enabled, customers can bypass the Add to cart flow and skip the form entirely.

To prevent this:

1. In Shopify Admin, go to Online Store → Themes → Customize
2. Open the product template
3. Disable dynamic checkout buttons (label may vary by theme)

Notes

• If you use a theme other than Dawn, apply the same logic in the theme’s equivalent product submission handler