Payment CartPRO

Docs Fields Payment Cart

#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 name	Description
Payment Field	Select 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
Items	List 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 Value	Enter each default value on a new line
Display Format	The format displayed for each items. Available template tags: `{item}` `{currency}` `{price}`
Field Type	The cart render type
Allow Null	Allow empty value
Layout	Choose the layout
Toggle	Allow to toggle all values
Select multiple values	Allow multiple values selection
Stylised UI	Enable 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.