1. Home
  2. AccessAlly
  3. AccessAlly E-Commerce
  4. How To Set Up A Page Where Users Can Update Credit Card Info

How To Set Up A Page Where Users Can Update Credit Card Info

The tutorial on this page will show you how to set up a page where users can update their credit card info. The same shortcode you use for this will also list out the orders and subscriptions (current and past) for clients who are logged into the site. This will also give them the opportunity to update their credit card, which is helpful if they have an active recurring subscription that needs to be charged.

With AccessAlly products, you can set up a page so that your clients can update their own credit card info.

This is extremely helpful if you are selling subscriptions or products with recurring payments, since the credit cards must be charged multiple times, and may expire or otherwise become invalid during this time. (Here’s the tutorial for creating the automated follow-up emails and retrying payments.)

Creating Your Manage Orders & Subscriptions Page

If you are using AccessAlly Products, these two shortcodes will list current (and past) orders and subscriptions for your users. The shortcodes also allow the user to manually charge an overdue balance on their account. For the subscription shortcode, the user can also edit the credit card info on file.

* Credit card information can only be displayed on pages secured with HTTPS. Please contact your server host if you need help with the SSL certificate installation.

These shortcodes will display information for subscriptions made both by AccessAlly order forms and Infusionsoft/Keap/Ontraport subscription, if applicable.

If you are using AccessAlly’s built-in order form feature, these shortcodes will also allow the user to update their credit card info.

Create a page just for Orders and Subscriptions and add these shortcodes:

[accessally_list_order] and [accessally_list_subscription]

Once the shortcodes have been added to the page, you can hit “publish” (or “update”).

Example of What Your Page Will Look Like for Clients

This is what the orders list looks like.

Orders Screenshot Image

This is what the subscription list looks like.

Below you’ll see examples of an

  • Active Subscription
  • Revoked Subscription
  • Canceled Subscription
  • Skip Payment Credits Applied to a Subscription

Subscription Examples Image

When someone has an active subscription, they can click the button to update their credit card on file and a small popup window will open pre-filled with their details. They will be able to save their updated details, which are specific to each subscription.

Screenshot of update credit card screen

STYLING CODE USED IN THIS EXAMPLE

table.accessally-view-order-table, table.accessally-view-subscription-table{
margin: 10px 0;
border: 1px solid #e4e4e4;
border-collapse: collapse;
width:100%;
}
table.accessally-view-order-table .accessally-view-purchase-header-row, table.accessally-view-subscription-table .accessally-view-purchase-header-row{
border-bottom: 1px solid #e4e4e4;
}
table.accessally-view-order-table th, table.accessally-view-subscription-table th, {
text-align:center;
vertical-align:middle;
}
table.accessally-view-order-table td, table.accessally-view-subscription-table td {
border:none;
}
table.accessally-view-order-table td div, table.accessally-view-subscription-table td div{
margin-bottom:10px;
}
table.accessally-view-order-table .accessally-view-purchase-id-column{
width:10%;
text-align:center;
}
table.accessally-view-order-table .accessally-view-purchase-description-column{

}
table.accessally-view-order-table .accessally-view-purchase-date-column{
width:10%;
}
table.accessally-view-order-table .accessally-view-purchase-total-column{
width:10%;
}
table.accessally-view-order-table .accessally-view-purchase-total-paid-column{
width:10%;
}
table.accessally-view-order-table .accessally-view-purchase-total-due-column{
width:15%;
}
table.accessally-view-order-table .accessally-view-purchase-status-column{
width:10%;
}
table.accessally-view-subscription-table .accessally-view-purchase-id-column{
width:10%;
text-align:center;
}
table.accessally-view-subscription-table .accessally-view-purchase-description-column{

}
table.accessally-view-subscription-table .accessally-view-purchase-date-column{
width:10%;
}
table.accessally-view-subscription-table .accessally-view-purchase-total-column{
width:10%;
}
table.accessally-view-subscription-table .accessally-view-purchase-total-due-column{
width:10%;
}
table.accessally-view-subscription-table .accessally-view-purchase-status-column{
width:10%;
}
.accessally-view-purchase-total-paid-column .accessally-positive-amount{
color:green;
}
.accessally-view-purchase-total-due-column .accessally-positive-amount{
color:red;
}
.accessally-purchase-status-1{
color:red;
}
.accessally-view-purchase-show-payment-plan-checkbox{
display:none;
}
.accessally-view-purchase-show-payment-plan-checkbox{
display:none;
}
.accessally-view-purchase-show-payment-plan-checkbox:checked+label {
display: inline-block;
width: 22px;
height: 22px;
background-color: white;
background-repeat: no-repeat;
}
.accessally-view-purchase-show-payment-plan-checkbox+label {
display: inline-block;
width: 22px;
height: 22px;
background-color: black;
background-repeat: no-repeat;
position:absolute;
}
.accessally-view-purchase-show-payment-plan-decoration-label, .accessally-view-purchase-show-payment-plan-label {
cursor:pointer;
}
.accessally-view-purchase-show-payment-plan-label {
margin-left:30px;
}
tr.accessally-view-purchase-payment-plan-row {
background-color:#efefef;
}
input[type=”submit”].accessally-view-purchase-charge-now-button {
background-color: #00a5b3;
border: none;
padding: 5px 10px;
color: white;
border-radius: 5px;
box-shadow: 0 0 3px 3px #f1f1f1;
cursor: pointer;
font-size: 12px;
}
input[type=”submit”].accessally-view-purchase-charge-now-button:hover {
background-color: #a9b533;
}
.accessally-view-purchase-charge-now-section {
display:inline-block;
margin-bottom:10px;
}
.accessally-view-purchase-charge-now-selection {
height:20px;
display:block;
margin:10px 0;
}

Note: the credit card information used by the recurring payments MUST be updated as part of the [accessally_list_subscription] shortcode display.

Keap/Infusionsoft Ecommerce: Allow Credit Card Updating

Are you using Infusionsoft’s e-commerce system to sell your products, offers, and subscriptions? AccessAlly includes a simple shortcode that you can use for clients to update their own credit card information inside the membership site.

This shortcode lets users see which credit cards they currently have on file. You can also let them add a new card or update an existing one with this shortcode.

This shortcode will allow users to update the credit card(s) they have on file, so that successful subscription payments (made through the Infusionsoft order forms) can go through.

Step 1: Go to AccessAlly > Settings > Payment Settings > CRM

Screenshot of Keap - Infusionsoft enable settings

STEP 2: Enable Credit Card Management

Check the box to enable this shortcode. By default, customers cannot update the existing credit card on file. This helps prevent a working credit card from becoming invalidated.

However, if you’d like to allow your customers to update/edit the credit cards they have on file, simply check the corresponding box.

STEP 3: Add shortcode to page

Add the shortcode [accessally_credit_card_update] to the page of your choice.

If you have enabled the option to update existing credit cards, a new “update” button will appear:

Press here to reveal

.accessally-credit-card-view-section {
margin:10px 0;
border:1px solid #e4e4e4;
}
.accessally-credit-card-view-id-section {
display:none;
}
.accessally-credit-card-view-content-section {
display:inline-block;
width:90%;
}
.accessally-credit-card-view-label-column {
display:inline-block;
width:150px;
text-align:right;
padding-right:20px;
}
.accessally-credit-card-view-content-column {
display:inline-block;
}
input.accessally-credit-card-edit-button, a.accessally-credit-card-edit-button {
background-color: #00a5b3;
border: none;
padding: 10px 15px;
color: white;
border-radius: 5px;
box-shadow: 0 0 3px 3px #f1f1f1;
cursor: pointer;
font-size: 12px;
text-decoration:none;
}
input.accessally-credit-card-edit-button:hover, a.accessally-credit-card-edit-button:hover {
background-color: #a9b533;
}
.accessally-credit-card-success-message {
color:green;
background-color: #eafdfd;
padding: 10px;
border: 1px solid #e4e4e4;
-webkit-box-shadow: none;
box-shadow:none;
margin: 10px auto;
}
.accessally-credit-card-error-message {
color:red;
background-color: #eafdfd;
padding: 10px;
border: 1px solid #e4e4e4;
-webkit-box-shadow: none;
box-shadow:none;
margin: 10px auto;
}
.accessally-credit-card-edit-label-column {
display:inline-block;
width:30%;
vertical-align:middle;
}
.accessally-credit-card-edit-input-column {
display:inline-block;
width:50%;
vertical-align:middle;
}
.accessally-credit-card-edit-row {
height:40px;
}
.accessally-credit-card-edit-input-column input{
padding:8px 5px;
width:100%;
}
.accessally-credit-card-edit-input-column select{
height:31px;
}

Ontraport Ecommerce: Allow Credit Card Updating

If you’re using Ontraport’s order forms, this shows you how your customers can update their credit cards for recurring subscription orders inside your AccessAlly site.

Your members will be able to add new credit cards and process payments directly in AccessAlly (yes, even if they purchased initially through an ONTRAForm).

Update ONTRAPORT credit card

New credit cards added through AccessAlly will appear in the list, but they will not be auto-selected as the default payment method. You will need to manually update the payment method for existing subscriptions so the new credit card is used for future payments.

Step 1: Go to AccessAlly > Settings > Payment Settings > CRM

Screenshot of Ontraport credit card update settings

STEP 2: Enable Credit Card Management

Check the box to enable this shortcode.

STEP 3: Add shortcode to page

Add the shortcode [accessally_credit_card_update] to the page of your choice.

The shortcode needed to update this credit card information inside Ontraport (which is where their payment info is stored when using Ontraport’s order forms) is:

[accessally_credit_card_update]

Use the shortcode adder to insert this shortcode into whatever WordPress page you are directing clients to, when asking them to update their credit card information.

Keep in mind that you need SSL enabled for this to work.

Optional: Enable notification on credit card update

Because manual changes might be required when clients add new cards, AccessAlly can send you notifications when that happens.

Optionally, you can also customize the email subject prefix so you can filter the notification emails to their own folder.

Optional: Change payment method for existing subscription

Select the subscription to change, and click on “Edit Order”.

Select the new credit card in the “Payment Info” section and click “SUBMIT” to save.

You can also take a look at the Ontraport tutorial for more info.

What Happens When Someone Updates Their Credit Card?

A client can now update their card right inside your AccessAlly site.

The question is: does making the new card the “default card” also change payment method for existing subscriptions?

The answer: It does change the default card to the new one, but you will need to update the payment method for existing subscriptions manually.

Updated on April 22, 2021

Was this article helpful?

Related Articles

NO QUESTION GOES UNANSWERED

If you have any questions, we're just an email away.

We take your success seriously, and you'll always get a speedy reply from a real person during business hours.

Laptop with the AccessAlly demo site

AccessAlly is the most flexible way to sell and elegantly deliver digital offerings. All in one place.

WATCH THE DEMO

You'll get follow-up emails about AccessAlly and new features. Opt out anytime. Full privacy policy here.