# Hosted payment forms

This topic describes how to create and manage Rebilly hosted payment forms. Use hosted payment forms to simplify the process of accepting payments. Rebilly hosts your payment form and ensures that your payments process is secure and [PCI compliant](/docs/pci-compliance).

Each hosted payment form is associated with one website. You cannot create a hosted payment form without a website. For more information, see [Add a website](/docs/settings/organizations-and-websites#add-a-website).

## Configure a gateway & add payment methods

To process payments using a hosted payment form, you must configure a gateway for payments. In the sandbox environment, a test payment gateway called `TestProcessor` is already configured. To configure a gateway and to add payment methods, see [Set up a gateway](/docs/settings/set-up-a-gateway).

## Configure displayed payment methods

To configure which payment methods are displayed in hosted payment forms based on criteria such as the customer's country, and the order in which they are displayed, see [Payment method configuration](/docs/settings/payment-method-configuration).

## Create a hosted payment form

1. If you have not already done so, add a website in Rebilly. This is required to create a hosted payment form. For more information, see [Add a website](/docs/settings/organizations-and-websites#add-a-website).
2. Select from the following:
  - [Use the Rebilly UI to create a hosted payment form link, and share it with a customer](/docs/data-tables/manage-customer-payments-and-billing#collect-or-register-a-payment).
  - [Integrate a hosted payment form using the Rebilly Instruments JavaScript library](/docs/dev-docs/get-started-integrate-hosted-payments).
  - [Use the Rebilly API to create a payment form](/docs/dev-docs/create-a-hosted-payment-form).


## Edit a hosted payment form

Use this process to change the settings of a Rebilly hosted payment form, such as: display options, where to display coupons, how to manage approval URL redirects, and whether to hide zero amount summary items on invoices.

To complete this process, you must have already added a website in Rebilly. If you have not already done so, see [Add a website](/docs/settings/organizations-and-websites#add-a-website).

1. In the left navigation bar, press .
2. In the **Payment forms** section, press **Hosted payment forms**.
3. In the **Website** dropdown, select the website where the hosted payment form is used.
4. Select from the following:
  - To edit hosted payment form styling: In the **Style** section, use the **Theme** and **CSS** settings.
  - To add coupons: Turn on the **Display coupons** toggle, and select where to display coupons. For more information, see [Coupons](https://www.rebilly.com/docs/settings/coupons-and-discounts/).
  - To hide zero amount summary items on invoices: Select the **Hide zero amount summary items** checkbox.
  - To specify how approval URL redirects are managed, select from the following:
    - Full page redirect for approval URLs: Redirect to the website URL instead of an iframe to display approval URL content.
    - Skip redirect: Do not redirect to the website URL when a payment is complete.
  - To edit the hosted payment form settings, press **Edit hosted payment form**.
5. Press **Save hosted payment form**.


## Style a hosted payment form

Use this process to apply styles to a hosted payment form and then visit the form to see what the styles look like.

To complete this tutorial, you must have already added a website in Rebilly. If you have not already done so, see [Add a website](/docs/settings/organizations-and-websites#add-a-website).

1. Style a hosted payment form  1. In the left navigation bar, press .
  2. In the **Payment forms** section, press **Hosted payment forms**.
  3. In the **Website** dropdown, select the website where the hosted payment form is used.
  4. In the **Style** section, edit how the hosted payment form is styled, using the **Theme** and **CSS** settings. 
Adjust the theme properties or provide custom CSS.
  5. Press **Save hosted payment form**.
2. Optionally, add a customerThis step adds a customer to the website so that you can create a hosted payment form link. If you already have a test customer, you can skip this step.
  1. In the left navigation bar, press , then press **Customers**.
  2. In the right of the screen, press **Add customer**.
  3. Enter the customer's details.
  4. In the **Default payment instrument** section, select a payment method and enter details. 
If you are testing this product or want to use payment options based on your active gateway accounts, select **None**.
  5. Press **Save customer**.
3. Create a hosted payment form linkThis step creates a hosted payment form link where you can view the custom styles that are applied to the payment form.
  1. In the left navigation bar, press .
  2. Press **Leads** or **Customers**, then select a customer.
  3. In the right of the screen, press , then press **Collect payment**.
  4. Enter the amount and add a description for the payment.
  5. Select the **Pay with Rebilly hosted payment form** option, and press **Submit**.
  6. To open the payment form in your web browser, click , or copy the URL and open it in your browser.
  7. View the custom styles that are applied to the payment form.