Knack can store payment methods in order to easily allow a user to pay a bill or an admin to submit a payment on their customer’s behalf. Some use cases can include:

• Easy online bill pay

• Payment of invoices

• Call-in payment services

Scenario

This article walks you through using Knack to build functionality that allows users to save their payment method that can later be used to easily make future payments either by the customer, or a company representative.

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

Requirements

If this your first time creating an app, you'll need to know some basics about adding objects, fields, pages and views. You can start by watching our "Introducing Knack" video tour and then working through the articles in our Builder Basics section. Other good resources can be found in our designing the database and building pages sections of the knowledge base.

Additionally, you will need to have user logins enabled to allow for multiple user roles as well as e-commerce enabled, to allow for the accepting of payments in your App.

See it in Action

You can find an example of working payment method views in our Customer Payment Portal template app.

By the time you’re done with this guide you will have two working payment method views. One will allow the logged-in customer to update their own payment method, and the other will allow a manager to update the customer’s payment information on their behalf.

Here’s what a payment method view looks like in action:

Steps

Step 1: Configure E-Commerce

If you already have E-commerce enabled in your app with a Stripe payment processor, you can proceed to step 2.

Enable E-Commerce Features

Before you can store payment methods, you need to enable E-Commerce features in your app. Find the "E-Commerce" option in your app settings:

Click on the button labeled "Enable E-Commerce":

Confirm that you want to enable E-Commerce by clicking the "Submit" button:

Add a Stripe payment processor

Payment methods can only be stored with a Stripe payment processor. You’ll need to sign up for a Stripe account and provide Knack with your live and test credentials. If you already have a Stripe account, you can find your API Keys here.

Select the Stripe processor and enter your live and test credentials:

Step 2: Configure Users

In this example we want to allow a logged-in customer to update their payment information, and we also want an employee to update the customer’s information on their behalf.

In order to accomplish this, your app needs user logins enabled and at least two different user roles. In this example they are "Customers" and “Managers”.

Enable User Logins

If this is your first time using login features, you’ll need to enable the user logins for your app. Find the "User Logins" option in your app settings:

Click the "Activate Users" button:

Select the option to allow logins for different pages and user roles:

Select your user registration preference; the default option is closed registrations:

Knack Tip: The registration option can be changed individually for any login view, so you don’t miss out on anything if you select any of the other options!

Knack Tip: Read more about security settings available with user logins to help ensure the security of your Live App pages.

Finally, click the link to "Manage users and roles" so you can add some user roles:

Add a Customer User Role

Click the "Add" button next to the User Roles section of your builder:

Give your new user role a name; we’ll refer to this one as "Customers" for the remainder of the guide:

Add a Manager User Role

Repeat the same process, but this time we’ll call the new user role "Managers":

Step 3: Configure a Page for the Logged-in Customer

Step 3 will create a page that allows the customer to update their own payment method.

Add a New Page

In the "Pages" section of your builder, click the “Add” button in the list of pages:

Restrict the Page to Customers Only

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

After clicking "Continue", click the button labeled “Select an object”:

You can select any object here, but for this example we’ll show a details view of the logged-in Customer record:

Add a Payment Method View

Now it’s time to add a payment method view so the customer can update their own payment information. Find the "E-Commerce" view menu and select the “Payment Method” option:

If you have more than one payment processor, be sure to select a Stripe processor:

You’ll be prompted to select which user the payment method is being to; in this case we have just one option for the logged-in user:

The Summary will confirm all the actions that will take place after creating this view:

Knack Tip: You can learn more about customizing your customer views here.

Step 4: Configure a Page for the Manager User

As the final step in this guide we’ll repeat Step 3, but this time we’re restricting the page to "Managers" only and we’ll display a table of “Customers” so they can update the payment method for a specific customer record.

Add a New Page

Click the "Add" button in the list of pages:

Restrict the Page to Managers Only

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

After clicking "Continue", click the button labeled “Select an object”:

Add a Table of Customers

In the "Select Object" window, select the “Customers” object:

Select the default table option with a linked details page and create the page:

Add a Payment Method View

Navigate to the new "Customer Details" page and add a new “Payment Method” view using the “E-Commerce” view menu:

Select your Stripe payment processor:

Select the user the payment method is being saved to. In this case it is not the logged-in user; we want the manager to be able to update the payment method connected to the Customer record they are viewing.

Notes & Troubleshooting

Now that you’re storing a user’s payment method, follow this next guide to learn how to charge a customer on their behalf.

Note: Due to the Strong Customer Authentication (SCA) e-commerce requirement, when charging European cards in your Knack app, only the cardholder can submit the payment form. This means that you wouldn’t be able to accept credit card details over the phone and submit them on behalf of the customer since SCA could be required to complete the payment. You can read more about SCA here.