Skip to content

Set up a payment field

Updated 6 min read Wrenfield 3.2 or later

A payment field turns any form into a checkout. This guide adds one, connects a gateway and sends a test payment before you take real money.

Before you start

  • Wrenfield 3.2 or later. Wrenfield, Settings shows your version next to the title.
  • An account with a payment gateway that Wrenfield supports.
  • A form with at least a name field and an email field.

Use test mode first

Test mode sends every payment to the gateway's sandbox. Nothing is charged until you switch it off.

Add the field

  1. Open the formGo to Wrenfield, Forms and open the form in the builder.
  2. Drag in PaymentIt sits under Pricing fields. A form can hold one payment field.
  3. Set the amountPick a fixed amount, or Total to add up the price fields above it.
  4. Save the formThe field stays hidden on the live form until a gateway is connected.

Fixed amount or a total

A fixed amount suits a single product or a deposit. A total adds up the price fields above it, so the amount updates while someone fills in the form.

Payment field settings
SettingWhat it doesDefault
AmountA fixed price, or the total of the price fieldsFixed
CurrencyA three-letter code such as USD or EURSite currency
DescriptionShown on the receipt and in the gatewayForm title
Receipt emailSends a receipt to the person who paidOn

Connect a gateway

Open Wrenfield, Settings, Payments and choose Connect beside your gateway. You sign in on the gateway's own page, and Wrenfield stores a token, never your password.

One currency per gateway account

Some gateways refuse payments in a currency the account doesn't hold. Check the account before you change a form's currency.

Change the currency for one form

The currency comes from Settings, Payments. To charge a different one on a single form, add this filter to a small plugin or your child theme's functions.php:

functions.php
// Charge in euros on form 12 only
add_filter( 'wrenfield_payment_currency', function ( $currency, $form_id ) {
    return 12 === $form_id ? 'EUR' : $currency;
}, 10, 2 );

Finding the form ID

It's in the ID column of Wrenfield, Forms, and in the form's shortcode.

Send a test payment

With test mode on, submit the form using the test card your gateway lists in its own docs. The entry shows a Paid badge, and the payment appears in the gateway's test dashboard.

When both match, switch test mode off under Settings, Payments. Your next payment is real.

Was this page helpful?

Part of the Design Systems Library