How to Display Table of Payment Transaction Details

Introduction

Would you like to display a table of your payment transaction details from your entries? Having a central place for all entries by form can make it easier to find your transactions. In this tutorial, we’ll show you the basics of how to use PHP and a shortcode to create a table of your payment transactions and their status.

By default, these details can be viewed in the sidebar for individual entries.

Each individual entry screen will give you details on your payment transactions

To view this transaction information in a single table, you can use the code, and the corresponding shortcode shared below. This table will be visible only to users with an Administrator role.

Creating the shortcode

First, you’ll need to create the shortcode so that it can be used on any page, post or widget area on your site.

You’ll just need to add the following code snippet to your site. If you need any help adding code snippets to your site, please review this tutorial.

/**
 * Display table of payment transaction details from Authorize.net/Stripe/PayPal shortcode.
 *
 * @link https://wpforms.com/developers/how-to-display-table-of-payment-transaction-details/
 *
 */
function wpf_dev_transactions_table( $atts ) {

	$atts = shortcode_atts( array(
		'fields' => false,
		'id'     => '',
	), $atts, 'wpf_transactions' );

	if (
		! is_super_admin() ||
		empty( $atts[ 'id' ] )
	) {
		return;
	}

	$form_data = wpforms()->form->get(
		$atts[ 'id' ],
		array( 'content_only' => true )
	);

	$payments = wpforms_has_payment( 'form', $form_data );

	if ( ! $payments ) {
		return;
	}

	$entries = wpforms()->entry->get_entries(
		array(
			'form_id' => $atts[ 'id' ],
		)
	);

	if ( empty( $entries ) ) {
		return;
	}

	if ( $atts[ 'fields' ] ) {
		$ids = explode( ',', $atts[ 'fields' ] );
	} else {
		$ids = false;
	}

	ob_start();

	echo '<table width="100%" style="font-size:11px !important;">';

	foreach ( $entries as $entry ) {

		if ( 'payment' !== $entry->type ) {
			continue;
		}

		$fields = json_decode( $entry->fields, true );
		$meta   = json_decode( $entry->meta, true );

		echo '<tr>';
			if ( ! empty( $ids ) ) {
				foreach ( $ids as $id ) {
					echo '<td>' . sanitize_text_field( $fields[ $id] [ 'value' ] ) . '</td>';
				}
			}
			echo '<td><a href="' . admin_url( 'admin.php?page=wpforms-entries&view=details&entry_id=' . $entry->entry_id ) . '">' . sanitize_text_field( $meta[ 'payment_total' ] ) . '</a></td>';
			echo '<td>' . sanitize_text_field( ucfirst( $entry->status ) ) . '</td>';
			echo '<td>' . sanitize_text_field( $meta['payment_transaction'] ) . '</td>';
            if ( 'stripe' === $meta[ 'payment_type' ] ) {
                echo '<td>Stripe</td>';
            } elseif ( 'paypal_standard' === $meta[ 'payment_type' ] ) {
                echo '<td>PayPal</td>';
            } elseif ( 'authorize_net' === $meta[ 'payment_type' ] ) {
                echo '<td>Authorize.net</td>';
            }
			echo '<td>' . sanitize_text_field( $entry->date ) . '</td>';
		echo '</tr>';
	}

	echo '</table>';

	return ob_get_clean();
}
add_shortcode( 'wpforms_transactions', 'wpf_dev_transactions_table' );

Styling the table

Table styling is something that is completely optional as most themes have default table styling built in as do browsers as well, however, we wanted to get you started with an example, so if you want change the default table styling, copy and paste this CSS to your site using one of these implementation options.

The styling of your entry table will vary depending on the default styling your theme may or may not have for tables.

table {
    border-collapse: collapse;
}

thead tr {
    height: 60px;
}

table, th, td {
    border: 1px solid #000000;
}

td {
    white-space: normal;
    max-width: 33%;
    width: 33%;
    word-break: break-all;
    height: 60px;
    padding: 10px;
}
tr:nth-child(even) {
    background: #ccc
}

tr:nth-child(odd) {
    background: #fff
}

Displaying payment transaction details

After this code snippet has been added, use the following shortcode to view these transactions from your form (only visible to admin users).

[wpforms_transactions id="FORMID"]

Now you'll see a table of all your payment transaction details from a specific form.

This shortcode can also be modified to include columns with additional field values. To add these, you’d need to add id="FIELDID" within the shortcode.

  • Example with a single field: [wpforms_transactions id="55" fields="1"]
  • Example with multiple fields: [wpforms_transactions id="55" fields="1,2,5"]

For details on how to locate the Form ID or Field IDs, please see this tutorial.

And that’s it! You’ve now created a shortcode that will display your payment transaction details on your site. Would you like to also create a shortcode to display your form entries? Try out our article on How to Display Form Entries.