Table of Contents

Save a User's Payment Method

Danielle Kellogg Updated by Danielle Kellogg

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 the 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 reading 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 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 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:

image alt text

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

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. You can read more on how to enable user logins here.

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

Add a Customer User Role

In the Schema section of the Builder, click the green "+" 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":

Configure a Page for the Logged-in Customer

Next we will create a page that allows the customer to update their own 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, and check the option to limit the permissions to specific user roles and select the “Customers” user role:

After clicking "Continue" and give your page a name.

Next, you will be able to select a view to add to your page and which object records to show. 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. On your new page, click the "Add view" button in the top 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, select the logged-in user:

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

Configure a Page for the Manager User

This final step is similar to building a page for Customers above, 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 Login Page for Managers

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

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" give your page a name.

Add a Table of Customers

Next select a table view to add to your new page and 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 you just added and add a new “Payment Method” view. 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 "This page's Account".

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.

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.

How did we do?

Force Users to Reset Their Passwords

Create a Single Login Page for Multiple User Roles

Contact