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.

This article covers the following topics:

• Use Case

• Requirements

• See it in Action

• Steps:

  • Enable E-Commerce Features

  • Add a Stripe Payment Processor

  • Configure Users

  • Enable User Logins

  • Add a Customer User Role

  • Add a Manager User Role

  • Configure a Page for the Logged-in Customer

  • Add a New Login Page for Customers

  • Adding a Payment Method View

  • Configure a Page for the Manager User

  • Add a New Login Page for Managers

  • Add a Grid View of Customers

  • Add a Payment Method View

• Note

 

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

Use Case

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 the Live App:

 

Steps:

1.  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.

2.  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.

From the App Settings > E-Commerce section, select the Stripe processor type and enter your live and test credentials:

3.  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 app must have user logins enabled and include at least two distinct user roles. In this case, the user role tables are referred to as "Customers" and "Managers".

4.  Enable User Logins

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

Enabling users can be done from the App Settings > User Logins section of the Builder, or from the Data section under "User Roles". 

5.  Add a Customer User Role

In the Data section of the Builder, select the "+" button to the right of User Roles label to add a "Customer" user role table:

For the purpose of this guide, we will refer to this user role as "Customers" throughout the rest of the article.

6.  Add a Manager User Role

Simply repeat the same process as the above step, but this time name the new user role table "Manager".

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.

7.  Add a New Login Page for Customers

In the "Pages" section of your Builder, click the "+” 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:

8.  Adding 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 grid view of "Customers" will be displayed, allowing managers to easily update the payment method for a specific customer record.

9.  Add a New Login Page for Managers

Click the "+" icon  button in the list of pages to create 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.

10.  Add a Grid View of Customers

Next, choose a grid view to add to your new page and select the "Customers" table for the data source.

Then, select the option with a linked details page:

11.  Add a Payment Method View

For the final step, go to the newly created "Customer Details" page and add a new payment method view. Choose the Stripe payment processor that you have already set up.

Then, 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":

Congratulations, you have completed setting up this workflow! 🚀 To ensure your workflow is functional for your users, it's always best practice to test out your workflow in the Live App.

Note

 

---