> For the complete documentation index, see [llms.txt](https://docs.funnelish.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.funnelish.com/start/funnel-builder/editor-forms/payment-form.md).

# Payment Form

Set up and activate payment gateways in your funnel. You can add gateways using the standalone **Payment form** widget or the payment form field embedded in the **2 Step form** widget. The steps and payment customization options are similar for both widgets.

* Learn about the [2 Step Form](/start/funnel-builder/editor-forms/2-step-form.md) widget in a different article.

<figure><img src="/files/IEqRBSdvHa2gv1yaHnec" alt=""><figcaption></figcaption></figure>

### What's the difference?

Many business owners with a custom e-commerce platform prefer the standalone **Payment form** widget because it provides maximum design flexibility on their current site. The **2 Step form** widget works well for site owners who want a customizable all-in-one template to collect customer data and process orders.&#x20;

## Selecting the widget

If you're using the standalone **Payment form** widget, drag the widget to the canvas. Click the widget one time to open the settings panel.

{% hint style="danger" %}
**Note**  You can place only one **Payment form** widget (hidden or visible) on a step.

**Duplicate payment form can lead to duplicate charges!**&#x20;
{% endhint %}

If you are using the **2 Step form:**

1. Drag the widget to the canvas
2. Click the number 2.

![ Click number 2](/files/WodGXMQp6TB8SxhJTHST)

&#x20; 3\. Scroll down the page.

&#x20; 4\. Click the Payment Form field one time to open the settings panel.

&#x20; 5\. Go to the side panel.

&#x20; 6\. Click the **Edit payment options** button. A new panel displays on the right.

<figure><img src="/files/IDQp5cMyjT7f85Db5wQw" alt=""><figcaption></figcaption></figure>

## Configuring display options

On the new panel:

1. Switch on the Funnelish Pay toggle to activate the payment form.
2. Choose a form theme. The default setting is a white background.
3. Scroll down and click the **Add a new payment method** button.

### Payment options

On the next screen, click a payment option and then add the appropriate account credentials.

<figure><img src="/files/c0uVBoVV1mx8WrBpMzVT" alt="" width="563"><figcaption><p>Connecting New Payment Method</p></figcaption></figure>

### Jump to..

Connecting [Credit Card](/start/collecting-payments/card-payments.md)

Connect [PayPal ](/start/collecting-payments/paypal.md)

Connect [Klarna](/start/collecting-payments/klarna.md)

Connect [Airwallex](/start/collecting-payments/card-payments/airwallex.md)

## Further customization

After you set up the payment gateways, Funnelish returns to the panel.

1. Click a circle to set the default payment option.
2. You can pick a theme for your payment form.

<figure><img src="/files/Mj4c1q8NRg8PCEfxhJZj" alt=""><figcaption><p>Selecting a theme.</p></figcaption></figure>

3. Click the radio button below to assign a **default payment method.**

<figure><img src="/files/MWvTnDFMkadUhCHEcg1q" alt=""><figcaption><p>Assigning a default payment method.</p></figcaption></figure>

4. In some cases, the card fields labels are also customizable, so you can translate them into a different language.

*Preview the form*

1. On the main canvas page, click **Save changes** in the top right corner.
2. Click **Preview**.

* Funnelish displays the payment form in a new browser tab. The orange circle indicates the default payment method.

![](/files/WLYPZPrrIV51QtnxdL1r)

*Previewing the 2 Step form*

If you are using the **2 Step form**, complete an extra step to preview the payment gateways:

1. Click **Preview**.
2. In the new browser tab, scroll down and click the **Go to step #2** button. The second page of the template, which includes the payment gateway form, displays.&#x20;