About Payment Method Views

This article provides an overview of Knack's payment method view type for E-commerce.

Knack's payment method view is a type of E-commerce view. While payment views allow you to accept a payment from someone, payment method views allow you to store, update, or remove a specific user’s payment method.

The payment method can then be used to facilitate future payments, whether it’s the user paying themselves or an account administrator charging the user on their behalf:

 

 

Note:  Payment method views sync the payment information to your Stripe payment processor, so the credit card information cannot be seen in Knack.

 

 

Managing Payment Method Views

Adding Payment Method Views

 

Note: First, you must enable E-commerce features for your app. You can learn how to enable E-commerce here.

Payment method views can be added in two different places:

  • In a login-protected "starting page". A starting page is a top-level page within your app.

  • In a child page that has access to a specific user record

To add your first payment method view, locate the "E-Commerce" option in the view menu and select the “Payment Method” view type:

 
paymentmethod2

 

You’ll then be guided through a series of options to customize the payment method view. First, you can select your payment processor and fill out your credentials:

 

 

Tip:  You can learn more about E-Commerce and Stripe in our article here

 
 

Afterwards, you can choose the user record to which the payment method should be associated. This could be the currently logged-in user or someone else for whom you need to update their payment information.

paymentmethod9

 

The final step is to review the view’s summary to confirm everything was selected properly: 

paymentmethod4

 

 

Editing Payment Method Views

To access the payment method view settings, click the "Edit" icon when hovering over the payment view. This will open the view settings in the toolbox to the left:

paymentmethod5

 

 

Deleting Payment Method Views

You can delete your payment method view at any time by clicking the "Delete" trashcan icon when hovering over the payment view:

paymentmethod6

Note: Deleting a payment method view will not delete any payment information stored in your Stripe account.

 

 

Payment Method View Settings

Payment method views have settings similar to payment views and allow you to change the behavior and looks of your view: 

paymentmethod7

Settings:

This section contains basic settings about how the view will behave, for example, the payment action, processors, and the fields and currency being used:

paymentmethod8
  • The Change Action button will lead you to a modal pop-up where you can choose the payment processor to be used. It also gives you the option to enable test mode for the payment method view while developing your application.


    paymentmethod10

 

After selecting the "Next" button, you will then have the option to select the where the payment method will be saved for which user:

paymentmethod11

 

Lastly, you can view the Summary of the changed action selection after selecting the "Next" button again. This will allow you to select "Stage Changes" and save your updated settings. 

paymentmethod12

  • Payment Processors: This section is where you will select the payment processor that your form will use. 
  • Test Mode: Payment processors can be utilized in Test Mode. Stripe will store test customers in a designated section, so make sure to disable test mode if you intend to store actual customer information.

Note: Since E-commerce is only available on Pro plans and above, Starter plans will always have Test Mode enabled.

  • Currency: In this section, you have the option to select the currency for your form.

  • Submit Payment Button Text: Here, you have the ability to customize the text that appears on the form's submit button.

  • Update Billing Button Text: This is where you can customize the text to guide users on updating their stored card information.

  • Remove Card Button Text: This is where you can customize the text used to guide users in removing their stored card information.


 

Emails

You can customize the emails that are sent after the payment information has been successfully completed.

paymentmethod13

Note: The submitted payment method details are not available to be displayed in an email. To learn more about emailing your users, see our Sending Emails article and our Emails & Notifications article.

paymentmethod14

 

Payment Rules

Payment rules work exactly like record rules in a Form view. An excellent use case for a payment method rule is to update a field in the user's record, allowing you to easily identify who has not yet updated their payment information.

To add a payment rule, simply click on the "Add Rule" button located in either the "Submit Rules" or "Record Rules" tab. From there, you can set your desired criteria for the rule:

 paymentmethod15
Note: Payment Rules will only trigger successful changes to the connected payment method.
 

 

Submit Rules

Submit rules allow you to determine where to direct the user after the form is submitted:

 paymentmethod16

 

Tip: To learn more about submit rules, see our article here for more information.

 

 

Record Rules

Record rules allow you to update or insert records after the payment is successfully processed:

paymentmethod17

Tip: To learn more about using record rules, see our article here for more information. 

 

 

Using the Payment Method View in Your App

Now that you have successfully configured your payment method view, let's explore how it functions.

Storing Payment Methods

If the user has not previously stored their payment method, the payment method view will present the credit card form.

 
image alt text

 

When this form is submitted, a Stripe Customer will be created in Stripe, and a Payment Method record will be added in Knack. You can find these records in the Builder under the Payment Methods table. 

You can then use the Payment Method ID to locate the payment method in your Stripe Dashboard.

 

Tip:  To learn more about payment method records, see our article here for more information. 

 

 

Updating payment information

If the user has stored their payment method already, they’ll see a link where they can choose to update or remove their existing payment method:

 
image alt text

If they choose to update the payment method, they’ll have access to a credit card form:

image alt text

 

 

Removing Payment Information

Using the same link, if a user selects the "Remove Payment Information" button, they’ll be redirected to the original payment method view with the credit card form:

 
image alt text