Save a User's Payment Method

This article will guide you step-by-step on how to utilize Knack to create a convenient feature that enables users to save their payment method.

Knack offers the convenient feature of storing payment methods, allowing users to easily pay bills or admins to submit payments on behalf of their customers. Some use cases can include:

• Easy online bill pay
• Payment of invoices
• Call-in payment services

Scenario

This article will guide you step-by-step on how to utilize Knack to create a convenient feature that enables users to save their payment method. This method can be easily used for future payments, either by the customer themselves or a representative from the company.

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

Requirements

If this your first time creating an app, you'll need to know some basics about adding tables, fields, pages, and views. You can start by reading our Builder Basics section. 

Other good resources can be found in our About Your Database and Working With 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 acceptance of payments in your App.

See it in Action

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

Upon completing this guide, you will have successfully created two functional payment method views. One of the payment method views will enable the customer who is logged in to update their own payment method, while the other will allow a manager to update the payment information on behalf of the customer.

Here is an example of how a payment method view appears in action:

Steps

Enable E-Commerce Features

Before you can store payment methods, you need to enable E-Commerce features using the Stripe payment processor in your app.

You can read more on how to enable e-commerce features here.

Add a Stripe Payment Processor

Payment methods can only be stored with a Stripe payment processor. To get started, you'll need to create a Stripe account and share your live and test credentials with Knack. 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:

Configure Users

In this scenario, we aim to provide the convenience for a logged-in customer to easily update their payment information. Additionally, we want to enable an employee to update the customer's information on their behalf.

To achieve this, your application must have user logins enabled and include at least two distinct user roles. In this case, they are referred to as "Customers" and "Managers".

Enable User Logins

If you're new to using login features, you'll need to enable user logins for your app. You can read more on how to enable user logins here.

Add a Customer User Role

In the Data section of the Builder, locate the green "+" button next to the User Roles section and select it: 

Please assign a name to your new user role. For the purposes of this guide, we will refer to this role as "Customers" throughout the rest of the article.

Add a Manager User Role

Simply repeat the same process, but this time name the new user role "Managers".

Configure a Page for the Logged-in Customer

Now, we can proceed to create a page that provides customers with the ability to easily update their payment method.

Add a New Login Page for Customers

In the "Pages" section of your Builder, click the green "+” button in the list of pages and select a login page.

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

After selecting "Continue", you will then be able to assign a name for your login page:

Next, you will be able to select a view to add to your page and which table's records to show. For this example, we’ll show a details view of the logged-in Customer record:

Add a Payment Method View

Next, let's proceed to add a Payment Method view that will allow the customer to easily update their payment information. To add a Payment Method view on your new page, simply click the "Add view" button located in the top menu and choose the "Payment Method" option.

You will be prompted to choose the user for whom the payment method is being saved for. In this case, select the logged-in user:

Configure a Page for the Manager User

This step is similar to creating a page for Customers mentioned earlier. However, this time, the page will be limited to "Managers" only.

On this page, a table of "Customers" will be displayed, allowing Managers to easily update the payment method for a specific customer record.

Add a New Login Page for Managers

Click the green "+" icon  button in the list of pages.

Following the setup wizard, select to add a new Login Page. Then, select the option to limit the permissions to specific user roles and select the “Managers” user role:

After selecting "Continue", you will then be able to assign a name for your login page.

Add a Grid View of Customers

Next, choose a Grid view to add to your new page and select the "Customers" table.

Select the option with a linked Details page:

Add a Payment Method View

Go to the newly created "Customer Details" page and add a new Payment Method view. Choose the Stripe payment processor that you have set up.

Choose the user to whom the payment method will be saved to. In this particular case, it will not be the currently logged-in user.

The purpose is to allow the manager to update the payment method associated with "This page's Account".

Notes

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