- If you’re using Ontraport’s order forms, please jump to the appropriate section here.
- If you’re using Keap/Infusionsoft’s order forms, please jump to the appropriate section here.
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.)
ARTICLE CONTENT:
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.
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.
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
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.
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
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:
.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).
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
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.