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
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.
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.
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:
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:
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.
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 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.
If you have more than one payment processor, be sure to select a Stripe processor.
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".
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.