Handlebars Syntax and Helpers
Handlebars.js
Handlebars Helpers
Stencil Object Model
Stencil Objects

Stored Credit Card Management

Overview

Cornerstone versions 2.6.0+ include the ability to manage Stored Credit Cards.

Previously, stored credit card management was only accessible via the payment portion of checkout. With the addition of Stored Credit Card management, logged-in shoppers will now be able to manage their stored credit cards from the My Account page of the storefront. In the Cornerstone theme, shoppers with store accounts will have the ability to add new cards, delete cards, select a default card, and edit the billing details of existing cards from their customer account area of your storefront.

Card data is stored securely with the payment gateway.

Stored Credit Card Management
Stored Credit Card Management
Editing Limitations

After adding a card, shoppers will only be able to modify the billing address. If other credit card details need to be modified (such as expiration date), the shopper must delete and readd the card.


Adding Stored Credit Card Management to Your Custom Theme

Stored Credit Card Management was added to Cornerstone in pull request #1376. To add Stored Credit Cards to pre-2.6.0 Cornerstone or Marketplace themes, copy the changes from PR #1376 to your theme. This section will walk through each individual commit, highlighting the changes that you will need to make to your template files.


  1. Add the Payment Methods page to the shopper’s Account

The code changes in this step:

  • Create the new Payment Methods page on a shopper’s account by modifying the lang/en.json, templates/components/account/navigation.html, and templates/pages/account/payment-methods.html files
Payment Methods Page Addition Example
Payment Methods Page Addition Example

  1. Add Translations for Payment Methods Titles

The code changes in this step:

  • Make the Payments Method page translatable by modifying the lang/en.json and templates/components/account/navigation.html files

  1. Include the Credit Card listing, initially without the add, edit, and delete actions

The code changes in this step:

  • Group the credit cards by payment providers
  • Include the payment method icons
  • Account for mobile and desktop layouts
  • Account for translations

Icons have been used to identify the credit card type. The data only provides the card brand in the credit card details.


  1. Add the Credit Card Actions (i,e,e Add, Edit, and Delete)

The code changes in this step:

  • add Edit, Delete, and Add buttons
Implementation of Add, Edit, and Delete Methods
Implementation of Add, Edit, and Delete Methods

  1. Implement the Delete Payment Method

The code changes in this step:

  • Bind the delete button’s front end and back end

First, the click will trigger window confirm. The confirmation modal has been added to prevent unintended action. Then, on confirming, a post request will be sent. The action is initiated through a localized form post request in the template which uses a delete_url key provided in the credit card details data. Finally, there will be a redirect to the credit card listing.


  1. Implement the Edit Payment Method

The code changes in this step:

  • Add the design for credit card details and the edit billing address form, synced with existing address fields validation

The action is initiated via a redirect to the edit page. The page uses HTML, CSS, and JavaScript for the billing address validation. The “name on card” label and values are also removed, as we do not store name along with the vaulted credit card. The full edit-payment-method.html can be viewed in the Cornerstone Github Repo.

Edit Payment Method Form
Edit Payment Method Form

  1. Implement the Add Payment Method

The code changes in this step:

  • Adding new icon lock.svg
  • Unify the CSS classes for the add and edit form.
  • Add a new template for edit form with an injection of global variables into context.
  • Extend the account.js file with a new method to initiate credit card and billing address fields validations, mapping form fields name and value to body request.
  • Add a payment-method.js file for credit card validations and helpers with unit test.

The add form will use ajax to validate and submit the credit card details (this differs from the way the edit form validates and submits). The payment-method.js file has been designed to be dragged and used in themes to simplify its implementation.

The add-payment-method.html template also requires some customization because variables need to pass through handlebars in order to be used by JavaScript. From line 20 to 25 of the template, we store variables, mostly for building the request url and header. The request body will directly use the form data. More validations and extra mapping are added to the add-payment-method.html template as well.

Example of the addition of the Add Payment Method
Example of the addition of the Add Payment Method

  1. Add the default Instrument for the add/edit Payment Method

The code changes in this step:

  • Add HTML and CSS for a single checkbox, default instrument
  • Capture form data on ADD and transform to boolean
  • Fix HTML credit card for tabulation navigation
  • Fix for states reload list via AJAX
Add default instrument checkbox to edit and add form
Add default instrument checkbox to edit and add form
Utilizing Github Automation to Merge the Changes

Since this feature involves heavy code changes, it may be easier to merge the necessary code into your theme by utilizing Github’s automated process for syncing a fork. See Github’s documentation on Syncing a Fork for more details on this method.