Accept Payments in a Live App

Scenario

You perform services for your customers on a regular basis and need to charge a payment for said services. You want to store the customer’s payment information so you or the customer can charge a payment at any time without needing to re-enter their payment details.

Requirements

This is a continuation of our How To Save a User's Payment Method guide, so you will need to follow that guide first.

An example can be found in our Customer Payment Portal template app.

See it in Action

By the time you’re done with this guide, you will have two new payment views that will charge a payment. One payment view is set up for the logged-in Customer to make their own payment, and the other payment view is set up for a manager to charge the customer on their behalf.

When the customer first fills out a credit card form, they have a checkbox option to store their payment method:

 

Once the customer’s payment information is stored, the payment view becomes a simple one-click process:

 

Steps

Configure a Table

In order to charge a customer payment, Knack needs to know how much needs to be charged and which customer the payment is connected to. In this scenario, we are going to use an "Invoices" table.

Add a Numeric Field

In order to determine the payment total, that value needs to be stored in a numeric field. This can be as simple as a "Currency" field, or it can involve more complex calculations with formulas and equations.

In this scenario, we’ve configured a "Grand Total" field which is a sum of multiple number fields and equations:

 

Add a Customer Connection

In order to be able to use their saved payment method, an invoice record needs to connect to a specific customer. In the same table as the numeric field ("Invoices"), click the green "+" button in the connections bar on the right to add a new connection.

Select the "Customer" table in the dropdown and click “Next”.

Configure the connection as one-to-many and click "Add Connection":

 

Charge the Logged-in Customer

The first page we’re adding will be for the logged-in customer to make their own payments.

Add a Login Page for Customers

In the Pages section of your Builder, click the green "+” button in the list of pages to add a new page:

 

Following the new page wizard, select the option to limit the permissions to specific user roles and select the “Customers” user role:

 

Add a Grid of Invoices

On your new Customers page, add a grid to display invoice records connected to the logged-in Customer.

Then add additional links to the grid, to link to view more details for that Invoice.

 

Add a Payment View

Navigate to the new "Invoice Details" page and add a new “Payment” view using the “Add View” option in the top menu

 

Following the e-commerce wizard, the first step is to select the table the payment is connecting to. In this case, select the Invoice table.

Next, select the numeric field that stores the payment amount (the same field from Step 1):

 

Select your payment processor. If you want to store payment information or use the customer’s stored information, you must select a Stripe payment processor.

Next, choose whether to store/use a payment method for this charge. For logged-in customers, we’ll make it optional so they can decide if they want to store them or not.

Finally, choose which user the payment method will belong to by selecting the logged-in user option:

 

Charge the Customer on Their Behalf

Now we’re going to repeat Step 2, except this time, we’re adding a page for the manager to charge the invoice’s customer on their behalf.

Add a Login Page for Managers

Click the "Add" button in the list of pages to add a new page.

Following the page wizard, select "Yes, a user must log in to access this page". Check the option to limit the permissions to specific user roles and select the “Managers” user role:

 

After clicking "Continue", give your page a name and add the page.

Add a Grid of Invoices

Next, add a grid view to your new 'Managers' login page to display Invoices. Select the "All Invoices" option and add a link to view more details for each Invoice.

 

Add a Payment View

Navigate to the new "Invoice Details" page you just added and add a new “Payment” view using the "Add View" button in the top menu.

 

Select the Invoice table and the same numeric field that was selected in the previous step.

Select a Stripe payment processor.

Select "Yes, the payment method will be saved. Previously saved payment methods can be used for this charge".

For this view, the payment method does not belong to the logged-in user. The manager needs to use the payment method of the customer that is connected to this page’s Invoice record:

 

Once you save the payment view, you’re ready to test this out!

Notes

Payment views have lots of customization options. Check out the managing payment views article for additional information.