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

# Create a dynamic payment page on your form

> Make a checkout page where the product selection and price automatically update for each customer based on their order.

export const SupportBanner = () => {
  const titleId = React.useId();
  return <div className="support-banner" role="region" aria-labelledby={titleId}>
      <span className="support-banner__ring support-banner__ring--outer" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--middle" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--inner" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--center" aria-hidden="true" />

      <div className="support-banner__content">
        <div className="support-banner__title" id={titleId} role="heading" aria-level="2">Still have questions?</div>

        <div className="support-banner__copy">
          <span className="support-banner__line">Our team is happy to help. Start a live chat using the</span>
          <span className="support-banner__line">
            chat bubble <span className="support-banner__chat-icon" aria-hidden="true" /> in the bottom right, or email us at
          </span>
          <span className="support-banner__line">
            <a href="mailto:support@fillout.com">support{'@'}fillout.com</a>
          </span>
        </div>

        <a className="support-banner__cta" href="mailto:support@fillout.com">Contact us</a>
      </div>
    </div>;
};

## How to make your payment page dynamic

<Steps>
  <Step title="Create calculations">
    First, click `Logic` on the bottom right corner to add your **Calculations**. Check out this [quick guide](https://www.fillout.com/help/calculations#add-a-calculation).
  </Step>

  <Step title="Edit payment details">
    Go to your form’s [**Payment**](/help/payment-page) [page](/help/payment-page) or make one if you haven’t yet. Add `Your product here` and its description if you prefer.

    <img src="https://mintcdn.com/fillout-005a867b/KfbSijssxiBkhGgt/images/Screenshot2025-10-16at5.50.50PM.png?fit=max&auto=format&n=KfbSijssxiBkhGgt&q=85&s=f83be128bed231b733849624b74892e5" alt="Screenshot 2025-10-16 at 5.50.50 PM.png" width="2699" height="1434" data-path="images/Screenshot2025-10-16at5.50.50PM.png" />
  </Step>

  <Step title="Reference a product">
    Under **Product name**, type **@** or click <Icon icon="square-plus" iconType="solid" />, then select the question or field where you ask customers to choose products or services.

    <img src="https://mintcdn.com/fillout-005a867b/KfbSijssxiBkhGgt/images/Screenshot2025-10-16at5.51.54PM.png?fit=max&auto=format&n=KfbSijssxiBkhGgt&q=85&s=56ce9a99d927c34c54dce62c15d3d913" alt="Screenshot 2025-10-16 at 5.51.54 PM.png" title="Screenshot 2025-10-16 at 5.51.54 PM.png" style={{ width:"82%" }} width="1343" height="782" data-path="images/Screenshot2025-10-16at5.51.54PM.png" />
  </Step>

  <Step title="Reference price">
    Do the same for the **Price**, but this time, click <Icon icon="calculator" iconType="solid" /> to select the appropriate field.

    <img src="https://mintcdn.com/fillout-005a867b/KfbSijssxiBkhGgt/images/Screenshot2025-10-16at5.55.21PM.png?fit=max&auto=format&n=KfbSijssxiBkhGgt&q=85&s=e50d2fcb364e7732dac0ee6f1a6598b7" alt="Screenshot 2025-10-16 at 5.55.21 PM.png" width="1276" height="273" data-path="images/Screenshot2025-10-16at5.55.21PM.png" />
  </Step>

  <Step title="Publish and share">
    `Preview` your form through the upper right corner to test it, then `Publish` and share the link or embed on your website.

    That’s it! Now, every time someone places an order, the **Product name** and **Price** will change depending on their choices.

    <Tip>
      You can test your live form without getting charged. Create a 100% off coupon in Stripe, then enable the "[Discount Codes](https://www.fillout.com/help/payment-page#add-discount-codes)" option to apply it during checkout. Once testing is done, just toggle the discount codes back off.
    </Tip>
  </Step>
</Steps>

## Related articles

<CardGroup cols={3}>
  <Card color="#FFC738" icon="credit-card" iconType="regular" href="/help/payment-page" title="Payment page">
    Collect payments via card, US bank account, Affirm, and Stripe.
  </Card>

  <Card color="#FFC738" icon="calculator-simple" iconType="regular" href="/help/calculations" title="Calculations">
    Calculate prices, compute scores, and more.
  </Card>
</CardGroup>

<SupportBanner />
