Field Render

Display an optional Payment Cart connected to the Payment Field which automatically calculate the total amount to charge and save items into the Payment Object.

Field Group

Field Settings

Setting nameDescription
Payment FieldSelect the Payment Field to connect with the Cart. If left empty, the system will attempt to retrieve the Payment Field within the same field group
ItemsList items available in the cart for selection.
Enter each choice on a new line with the item price (without currency). For example:
Item 1 : 29
Item 2 : 49
Default ValueEnter each default value on a new line
Display FormatThe format displayed for each items. Available template tags: {item} {currency} {price}
Field TypeThe cart render type
Allow NullAllow empty value
LayoutChoose the layout
ToggleAllow to toggle all values
Select multiple valuesAllow multiple values selection
Stylised UIEnable Select2 UI style

Field Value

The value cannot be retrieved as the field isn’t saved as meta data.

Display Total Amount

It is possible to display and update the total amount in Javascript on the form page, using PHP to list products and price, and Javascript to listen for change. Here is a usage example:

/*
 * PHP
 * list products + prices as a JS object
 */
add_action('acf/input/admin_enqueue_scripts', 'my_form_payment_data');
function my_form_payment_data(){
    
    // bail early in admin
    if(is_admin()){
        return;
    }
    
    // products
    $products = array();
    
    // retrieve "my_cart" field choices
    $cart = acf_get_field('my_cart');
    
    // loop field choices (name => price)
    foreach($cart['choices'] as $name => $price){
        
        // add to products array
        $products[] = array(
            'name' => $name,
            'price' => floatval($price),
        );
        
    }
    
    // set global acf data for JS
    acf_localize_data(array(
        'products' => $products
    ));
    
}
/*
 * Javascript
 * hook on "my_cart" field change and retrieve total
 */
acf.addAction('new_field/name=my_cart', function(field){

    // on checkbox change
    field.on('change', 'input', function(e){

        // initialize total
        var total = 0;

        // retrieve global data products from PHP
        var products = acf.get('products');

        // retrieve selected products
        var selectedProducts = field.getValue() ? field.getValue() : [];

        // loop selected products
        selectedProducts.map(function(name){

            // get price of the selected product
            var price = products.find(line => line.name === name).price;

            // add price to total
            total += price;

        });

        // display total in console
        console.log(total);

    });

});

Field Behavior

The Payment Cart will be displayed if the Payment Field is correctly connected to it (thru the “Select Payment Field” setting). Otherwise it will be automatically hidden. The field will list Items with the currency set in the connected Payment Field settings.

Selected Cart Items and the total amount are automatically added to the Payment Object that is created during the Payment Flow.