Build a subscription form with Lovable AI prompts and Foxy

Overview

In this article, we provide a detailed AI prompt that will build a subscription / recurring billing form where customers can configure their subscription frequency and proceed to the Foxy checkout to pay. Feel free to modify prompt to suit your needs.

Input Prompt

1. 1

   In Lovable, copy/paste the prompt from below into the AI prompt field:

   Copy Copied

   Build a Subscription Purchase page at /subscribe that sells a single subscription product through Foxy.
   
   Page requirements:
   - Product section with:
     - name (for example, Premium Plan)
     - price (recurring price, for example, 12.00)
     - image (absolute URL)
   - A Billing frequency <select> that maps labels to Foxy sub_frequency values:
     - Weekly → 1w
     - Monthly → 1m
     - Quarterly → 3m
     - Yearly → 1y
   - Quantity input (default 1)
   - An Add Subscription form that POSTs to https://{{FOXY_STORE}}.foxycart.com/cart with:
     - hidden name ← plan name
     - hidden price ← plan recurring price
     - hidden image ← plan image (absolute URL)
     - visible select sub_frequency with the options above
     - visible number input quantity (min 1)
   - Use method="GET" and target="_top".
   - Note under the select: You will be billed automatically at the selected interval.
   
   Example markup (adapt to your templating syntax):
   <form action="https://{{FOXY_STORE}}.foxycart.com/cart" method="POST" target="_top" class="fc-subscribe">
     <input type="hidden" name="name" value="{{ plan.name }}">
     <input type="hidden" name="price" value="{{ plan.price }}">
     <input type="hidden" name="image" value="{{ plan.image }}">
   
     <label>
       Billing frequency
       <select name="sub_frequency" required>
         <option value="1w">Weekly</option>
         <option value="1m" selected>Monthly</option>
         <option value="3m">Quarterly</option>
         <option value="1y">Yearly</option>
       </select>
     </label>
     <small>You will be billed automatically at the selected interval.</small>
   
     <label>
       Quantity
       <input type="number" name="quantity" value="1" min="1" step="1" required>
     </label>
   
     <button type="submit">Add subscription</button>
   </form>
   
   Acceptance checks:
   - Selecting a frequency and submitting opens https://foxy-test-jmpds.foxycart.com/cart with the item present.
   - The cart line shows the correct name, price, and reflects that it is a subscription (via sub_frequency).

2. 2

   Press enter (or click submit button) to execute prompt.

3. 3

   When prompted, input your Foxy store subdomain (ie: myawesomestore).

Testing

Once Lovable AI has generated your subscription form, load the page in your browser and click to add subscription to cart. The Foxy cart should load with subscription in cart.