Custom Javascript and CSS (Modern)

For information on how to add Custom JavaScript and CSS to your Public Pages, please see Public Page Default Settings and Public Signup Page Settings.

The following collection of code is provided as a reference, and is provided as-is. You are responsible for ensuring it works properly on your page(s), as well as maintaining this code for the future. Any modifications you make to this code, or modifications you make to code in similar sections, are your responsibility.

These snippets of code are intended as examples to show how to select and modify different elements on the Public Pages. We provide the JavaScript examples below to serve as a starting point for customizing your pages. Depending on your level of expertise, it may be necessary to engage a web developer to accomplish more complex requirements.

Each snippet has been tested in isolation. If snippets are combined with each other, or with existing custom JavaScript and CSS on your Public Pages, unexpected behavior may occur. Please test your Public Pages thoroughly to make sure the behavior satisfies your requirements.

If you are interested in viewing more JavaScript snippets that are specific to certain billing scenarios, we recommend checking out our sample product setups here.. This section offers some specific in-depth workflows that we provide as a starting point to customize your sites.

Please do not include <script> tags in your entries. Chargify automatically inserts this tag on your behalf.

JavaScript Examples

Limit Signups to US

This JavaScript code will limit the country dropdown to only have US selectable.

Adding Custom Validations

This code will allow you to set specific fields as required on the Public Pages. In the example below, we are requiring 3 seperate custom fields.

Require Organization

This snippet will require that a potential subscriber enter data in the organization field.

Require Phone Number

This snippet will require that a potential subscriber enter data in the phone field. Please be aware that this will not require a 10 digit number. If you wish to require a certain length phone number, we recommend using the JS for “Require 10 Digit Phone Field”.

Require 10 Digit Phone Field

This snippet will require a potential subscriber to enter a 10-digit phone number. Please be aware that you will need to add the additional CSS snippet below this to highlight the missing required digits in the phone field.

The “Custom Validations” snippet above will accept “1” as a valid phone number. This snippet will require the full 10 digits of a phone number to be entered to condsider the signup to be valid.

CSS for highlighting of missing required phone field.

Reordering Components

Presently, Chargify orders components alphabetically on Public Signup Pages. With the snippet below, you can re-order the components however you prefer.

Capturing Custom Field Data via Query String

With a small amount of JS, you can populate a custom field for a new signup via a Public Signup Page. The examples below use a custom field called sales.

Additionally, you’ll need to populate / replace the id of subscription_metafields_10463. Simply replace 10463 with the ID of your custom field in your site.

Chargify Modern Public Signup Pages

Chargify Classic Public Signup Pages

For a full overview, and to understand more of this workflow, we require you to view full instructions on how to implement this workflow.

Hide Recurring Fee in Summary Information

This will hide the recurring charges. This method is incredibly useful if you wish to offer a gift subscription that should only obtained via a coupon, resulting in a charge of $0.00.

Hide Recurring Fee and Component Charges in Summary Information

This will hide the recurring charges and component charges on the Public Page.

Hide “None” Choice on Custom Fields

The following JS will remove the option to select “None” in the custom field dropdown. The first choice will be the first choice on the list of options the merchant has created.

$(function() { 
 $("#subscription_metafields_xxxx option[value='']").remove();
 $("#subscription_metafields_xxxx option[value='']").remove();
 $("#subscription_metafields_xxxx option[value='']").remove();

Change Label Text

This will change the text of a label on your Public Page. The example code shown is for the Organization label.

Change Setup Fee Text

This will change the setup fee text to be anything you want it to be.

Change Submit Button Text

This will change the submit button text from the default “Place My Order” to anything you want it to be.

Change Today’s Total Text

This will change the Today’s Total text to add USD, or the currency of your choice in the Public Signup Page.

function addUsd() {
$('#todays-charge > td:nth-child(2)').append(' USD');
$(document).bind("afterSummaryRefresh", addUsd);

Force Two Components to be Equal

In case you ever need to have one component equal the same value as another you can use this script to accomplish the task.

Force Component to Equal Specific Number

/*Force quantity of 1 in component box on hosted page*/
$(function () {

var updateTotal = $("#apply_component_button");

var component = $("#component_allocated_quantity_462149");


component.change(function () {

Allow a single selection of a group of on/off components on Public Signup Pages

This is an example of limiting selection of a set of on/off components on Chargify hosted pages to select only a single component. This script can be utilized by adding it to your “Custom Javascript” on the “Public Signup Pages” found under the “Settings” tab.

This script will alter the behavior of how the radio buttons work.

Note if your customer turns off javascript there is no to protect against this. Here is the example of how to achieve it:

Change wording on receipt page after signup

$('body > div.wrapper > div.success-receipt > div.success-receipt__heading').append("INSERT TEXT YOU WOULD LIKE TO SEE ON RECEIPT PAGE");

Language Translations

You will need to input the translation and put in in the Custom Javascript box in the Public Signup Page. Everything that is uppercase is where you would put the translation for that field.


Chargify supports the usage of JQuery on your Public Signup Pages.

For example, if you’d like to include a third-party script that is hosted elsewhere, you can use the JQuery.getscript function to load a JavaScript file from the server using a GET HTTP request, then execute it.

  $.getScript( "" )
    .done(function( script, textStatus ) {
      console.log( textStatus );
    .fail(function( jqxhr, settings, exception ) {
      $( "div.log" ).text( "Triggered ajaxError handler." );

CSS Examples

Hide One Component

// <- hides only the first component

Remove “Recurring Fee” message on Public Signup Page

Copy/paste the following CSS into your Public Page.

#summary-recurring-charges { display: none; }

Remove “this product expires in 1 day” message on Public Signup Page

Copy/paste the following CSS into your Public Page.

.plan__summary-total-description { display: none; }

Signup Page CSS Classes

The following is a list of all CSS classes used on the Public Signup Page.

Signup Page CSS IDs

The following is a list of all CSS IDs used on the Public Signup Page.