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

# Integration with Zuora payment form

## Overview

To allow customers to add payment methods via the [Stigg Checkout widget](https://docs.stigg.io/documentation/snap-in-widgets/checkout), a Zuora Payment Form must be configured.

Follow the steps below to complete the setup.

<Note>
  All payment methods are stored directly in Zuora.
  If no payment gateway is connected in Zuora, the Payment Form will still render but will only display invoice and currency options. Payment methods cannot be collected in this case.
</Note>

## Setting up the payment form in Zuora

### Step 1 — Open Payments settings

In Zuora, click your account avatar in the top-right corner and select **Payments** from the dropdown menu.

<Frame>
  <img src="https://mintcdn.com/stigg/G39yfXN99CdgSYxM/images/zuora-payment-form-step-1.png?fit=max&auto=format&n=G39yfXN99CdgSYxM&q=85&s=ac02acf9086a7b9fe0e7d82a02615bf4" alt="Zuora account menu with Payments option highlighted" width="302" height="621" data-path="images/zuora-payment-form-step-1.png" />
</Frame>

### Step 2 — Go to Setup Payment Forms and Payment Links

On the Payments Settings page, click **Setup Payment Forms and Payment Links**.

<Frame>
  <img src="https://mintcdn.com/stigg/G39yfXN99CdgSYxM/images/zuora-payment-form-step-2.png?fit=max&auto=format&n=G39yfXN99CdgSYxM&q=85&s=7613c9c90771b63f795b92a0433e9ae9" alt="Zuora Payments Settings page" width="2418" height="1101" data-path="images/zuora-payment-form-step-2.png" />
</Frame>

### Step 3 — Copy your publishable key

Navigate to the **Publishable Keys** tab. Copy the publishable key — you'll need it when configuring the Zuora integration in Stigg.

<Frame>
  <img src="https://mintcdn.com/stigg/G39yfXN99CdgSYxM/images/zuora-payment-form-step-4.png?fit=max&auto=format&n=G39yfXN99CdgSYxM&q=85&s=1dce4fb467ef73915687b093a82d56b9" alt="Zuora Publishable Keys tab" width="2417" height="1101" data-path="images/zuora-payment-form-step-4.png" />
</Frame>

### Step 4 — Select your payment form for editing

On the Payment Forms list, click the edit icon next to the payment form you want to use with Stigg.

<Frame>
  <img src="https://mintcdn.com/stigg/G39yfXN99CdgSYxM/images/zuora-payment-form-step-3.png?fit=max&auto=format&n=G39yfXN99CdgSYxM&q=85&s=a526ace41ceaaecc8faa71aa7689d2c5" alt="Zuora Setup Payment Forms and Payment Links list" width="2418" height="812" data-path="images/zuora-payment-form-step-3.png" />
</Frame>

### Step 5 — Customize your payment form (optional)

Use the **Payment Methods**, **Theme & Layout**, and **Implementation Docs** tabs to configure which payment methods appear and how the form looks.

<Frame>
  <img src="https://mintcdn.com/stigg/G39yfXN99CdgSYxM/images/zuora-payment-form-step-5.png?fit=max&auto=format&n=G39yfXN99CdgSYxM&q=85&s=e7d5c1af0eae872ebf5235634911d98e" alt="Zuora payment form editor" width="1519" height="1101" data-path="images/zuora-payment-form-step-5.png" />
</Frame>

## Configuring the integration in Stigg

### Step 6 — Enter the publishable key in Stigg

In Stigg, go to **Integrations → Billing → Zuora**. In the integration details form, paste the publishable key you copied from Zuora into the **Publishable key** field, then click **Save changes**.

<Frame>
  <img src="https://mintcdn.com/stigg/G39yfXN99CdgSYxM/images/zuora-payment-form-step-7.png?fit=max&auto=format&n=G39yfXN99CdgSYxM&q=85&s=afc06d12c7eb871933b6acc0161ab42e" alt="Stigg Zuora integration settings with Publishable key field highlighted" width="1110" height="1126" data-path="images/zuora-payment-form-step-7.png" />
</Frame>

<Note>
  The **Publishable key** field is needed to enable the Stigg Checkout widget to render the Zuora-hosted payment form. Without it, payment method collection will not work.
</Note>

## How it looks in Stigg

Once configured, customers can add their payment method directly through the Stigg Checkout widget, which renders the Zuora payment form seamlessly.

<Frame>
  <img src="https://mintcdn.com/stigg/G39yfXN99CdgSYxM/images/zuora-payment-form-step-6.png?fit=max&auto=format&n=G39yfXN99CdgSYxM&q=85&s=3f0ccb6ffe9dcd518bb8a30ed2b3f0e7" alt="Zuora payment form rendered inside the Stigg Checkout widget" width="1111" height="1128" data-path="images/zuora-payment-form-step-6.png" />
</Frame>

## Go live checklist

* [x] Confirm a valid Payment Gateway is connected in Zuora.
* [x] Verify the **Publishable key** is copied from the Zuora **Publishable Keys** tab and saved in the Stigg Zuora integration settings.
* [x] Test adding a payment method in a Zuora **sandbox tenant** with a configured test gateway.
* [x] Switch to production once validation is successful.
