Why the Stripe Field Is Hidden Until an Amount Is Due

Overview

If your form uses the Stripe Payment Element (Stripe Field), you may notice that the field doesn’t appear when the form first loads. It only shows up after the customer selects a product or enters a quantity.

For example, a form has a Product field with an empty Quantity. The payment section stays hidden until the customer enters a quantity. This is the expected behavior in Stripe Add-On 7.0 and later, not a bug.

Stripe Field not shown because the amount due is 0.
The Stripe Field is not shown when the total amount is 0.
Stripe Field shown because the amount due is greater than 0.
The Stripe Field is shown when the total amount is greater than 0.

Why the Stripe Field Is Hidden

The Payment Element (Stripe Field) is created from a Stripe payment intent, which is tied to the amount to be charged. Until the form has an amount due, there is nothing to create a payment intent for, so the Stripe Field is not shown.

Confirming the Cause

  • Your site is running Stripe Add-On 7.0 or later.
  • The form uses the Payment Element (Stripe Field).
  • The form total is zero when the page loads, for example, because the product quantity is empty.

What You Can Do

If you want the Stripe Field to be visible when the page loads, make sure the form has an amount due from the start by defaulting the product quantity to 1. There are two ways to do this.

Use a Separate Quantity Field

The Product field’s built-in quantity input doesn’t have a default value setting, so you’ll need to use a separate Quantity field instead.

  1. Edit your Product field and check Disable quantity field.
  2. Add a Quantity field to the form and link it to your Product field.
  3. In the Quantity field’s Advanced settings, set the Default Value to 1.
  4. Save the form.

Populate the Quantity Dynamically

If you’d rather keep the Product field’s built-in quantity, you can populate it with 1 using dynamic population.

  1. Edit your Product field and open the Advanced tab.
  2. Check Allow field to be populated dynamically.
  3. Enter a parameter name for the Quantity input, such as product_qty.
  4. Save the form and add the following code snippet to your site.
add_filter( 'gform_field_value_product_qty', 'populate_qty' );
function populate_qty( $value ) {
    return 1;
}

If you used a different parameter name, replace product_qty in the filter name to match. For more on this filter, see gform_field_value_$parameter_name.

With either option, the quantity is set to 1 when the page loads, so the Stripe Field is shown right away. Customers can still change the quantity, but if they set it to 0, the Stripe Field will be hidden again.

Placement

This code can be used in the functions.php file of the active theme, a custom functions plugin, a custom add-on, or with a code snippets plugin.

See also the PHP section in this article: Where Do I Put This Code?