> ## Documentation Index
> Fetch the complete documentation index at: https://fillout-005a867b-dependabot-npm-and-yarn-form-data-4-0-6.mintlify.site/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.

## 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**](/payment-page) [page](/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-dependabot-npm-and-yarn-form-data-4-0-6/60XYaN8M6v6eMBSZ/images/Screenshot2025-10-16at5.50.50PM.png?fit=max&auto=format&n=60XYaN8M6v6eMBSZ&q=85&s=189c63466aba81f63bfc40c231387f43" 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-dependabot-npm-and-yarn-form-data-4-0-6/60XYaN8M6v6eMBSZ/images/Screenshot2025-10-16at5.51.54PM.png?fit=max&auto=format&n=60XYaN8M6v6eMBSZ&q=85&s=4bc58e198f8ce00f5c041949ebf74fa5" 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-dependabot-npm-and-yarn-form-data-4-0-6/60XYaN8M6v6eMBSZ/images/Screenshot2025-10-16at5.55.21PM.png?fit=max&auto=format&n=60XYaN8M6v6eMBSZ&q=85&s=ec3b0f386130236b9b14cd1a1b0a956d" 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="/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="/calculations" title="Calculations">
    Calculate prices, compute scores, and more.
  </Card>
</CardGroup>
