Examples

Reference

Example of Chargify.js

Example of subscriber-facing HTML form

Sample page

<!DOCTYPE html>
<html>
    <head>
        <script src="https://js.chargify.com/latest/chargify.js"></script>
    </head>

    <body>
        <form id='chargify-form'>
            <div id="chargify1"></div>
            <div id="chargify2"></div>
            <div id="chargify3"></div>
            <div id="chargify4"></div>

            <input id="chargify-token" type="hidden" />

            <button type="submit">Submit Form</button>
        </form>
    </body>
</html>

Minimal Example

Minimal Example with Credit Card

The following example contains minimal information. It is a minimalist approach to working with Chargify.js and credit cards.

<script>
    var chargify = new Chargify();

    chargify.load({
        // selector, where the iframe will be included on your page
        // optional, if you have a `selector` for every field ('fields' option)
        selector: '#chargify1',

        // (i.e. '1a2cdsdn3lkn54lnlkn')
        publicKey: 'your-public-api-key',

        // form type (possible values: 'card' or 'bank')
        type: 'card',

        // points to your Chargify site
        serverHost: 'https://acme.chargify.com'
    });
</script>

Minimal Example with ACH

The following example contains minimal information. It is a minimalist approach to working with Chargify.js and bank accounts.

<script>
    var chargify = new Chargify();

    chargify.load({
        // selector, where the iframe will be included on your page
        // optional, if you have a `selector` for every field ('fields' option)
        selector: '#chargify1',

        // (i.e. '1a2cdsdn3lkn54lnlkn')
        publicKey: 'your-public-api-key',

        // form type (possible values: 'card' or 'bank')
        type: 'bank',

        // points to your Chargify site
        serverHost: 'https://acme.chargify.com'
    });
</script>

Full Examples

Full Example with Credit Card

The following is a full example of using Chargify.js with a credit card.

var chargify = new Chargify();

chargify.load({
    // selector, where the iframe will be included on your page
    // optional, if you have a `selector` for every field ('fields' option)
    //selector: '#chargify-form',

    // (i.e. '1a2cdsdn3lkn54lnlkn')
    publicKey: 'your-public-api-key',

    // form type (possible values: 'card' or 'bank')
    type: 'card',

    // points to your Chargify site
    serverHost: 'https://acme.chargify.com',

    // flag to show/hide the credit card image
    // true: hides the credit card image
    // visible otherwise
    hideCardImage: false,

    // optional label/translation (i.e. '(optional field)') for optional fields
    // Especially useful if you use 'fields' option
    optionalLabel: '(optional field)',

    // required label/translation (i.e. '*') for required fields
    // Especially useful if you use 'fields' option
    requiredLabel: '*',

    // optional global styles that include iframe styles,
    // styles for fields, inputs, labels and messages
    style: {
        // to style an iframe, use the iframe's container selector
        '#chargify-form': { border: '1px dashed #ffc0cb57' },

        // `field` is the container for each field
        field: {
            backgroundColor: 'orange',
            paddingTop: '10px',
            paddingBottom: '10px',
            borderRadius: '5px'
        },

        // `input` is the input HTML element
        input: {
            backgroundColor: '#e6e6e6',
            paddingTop: '2px',
            paddingBottom: '1px',
            placeholder: { color: '#eee' }
        },

        // `label` is the label container
        label: {
            backgroundColor: 'lightblue',
            paddingTop: '2px',
            paddingBottom: '1px'
        },

        // `message` is the invalid message container
        message: {
            backgroundColor: 'red',
            color: 'white',
            paddingTop: '2px',
            paddingBottom: '1px'
        }
    },

    // use this option if you want to include each field
    // in the separate iframe
    fields: {

        firstName: {
            // selector, where the iframe with this field will be included
            // on your page
            selector: '#chargify1',

            // ot overrides default label
            label: 'FIRST NAME',

            // it overrides default placeholder
            placeholder: 'John',

            // if a given field is optional by default, you can make it required
            required: false,

            // it overrides default error message
            message: 'First name is not valid. Please update it.',

            // it overrides or defines max length
            maxlength: '30',

            // it overrides global styles for this field only
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    placeholder: { color: 'green' }
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        lastName: {
            selector: '#chargify1',
            label: 'LAST NAME',
            placeholder: 'Doe',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        number: {
            selector: '#chargify2',
            label: 'Number',
            placeholder: 'xxxx xxxx xxxx xxxx',
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        month: {
            selector: '#chargify2',
            label: 'Mon',
            placeholder: 'mm',
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        year: {
            selector: '#chargify2',
            label: 'Year',
            placeholder: 'yyyy',
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        cvv: {
            selector: '#chargify2',
            label: 'CVV code',
            placeholder: '123',
            required: false,
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        address: {
            selector: '#chargify3',
            label: 'Address',
            placeholder: '1234 Hill St',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '70',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        address2: {
            selector: '#chargify3',
            label: 'Address 2',
            placeholder: '1234 Hill St',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '70',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        city: {
            selector: '#chargify3',
            label: 'City',
            placeholder: 'Austin',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        state: {
            selector: '#chargify3',
            label: 'State',
            placeholder: 'TX',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '2',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        zip: {
            selector: '#chargify3',
            label: 'Zip Code',
            placeholder: '10001',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '5',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        country: {
            selector: '#chargify4',
            label: 'Country',
            placeholder: 'US',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        }
    }
});

Full Example with ACH

The following is a full example of using Chargify.js with ACH. ACH is only available for certain gateways. To learn more about ACH and Chargify, please view our documentation.

var chargify = new Chargify();

chargify.load({
    // selector, where the iframe will be included on your page
    // optional, if you have a `selector` for every field ('fields' option)
    //selector: '#chargify-form',

    // (i.e. '1a2cdsdn3lkn54lnlkn')
    publicKey: 'your-public-api-key',

    // form type (possible values: 'card' or 'bank')
    type: 'bank',

    // points to your Chargify site
    serverHost: 'https://acme.chargify.com',

    // flag to show/hide the credit card image
    // true: hides the credit card image
    // visible otherwise
    hideCardImage: false,

    // optional label/translation (i.e. '(optional field)') for optional fields
    // Especially useful if you use 'fields' option
    optionalLabel: '(optional field)',

    // required label/translation (i.e. '*') for required fields
    // Especially useful if you use 'fields' option
    requiredLabel: '*',

    // optional global styles that include iframe styles,
    // styles for fields, inputs, labels and messages
    style: {
        // to style an iframe, use the iframe's container selector
        '#chargify-form': { border: '1px dashed #ffc0cb57' },

        // `field` is the container for each field
        field: {
            backgroundColor: 'orange',
            paddingTop: '10px',
            paddingBottom: '10px',
            borderRadius: '5px'
        },

        // `input` is the input HTML element
        input: {
            backgroundColor: '#e6e6e6',
            paddingTop: '2px',
            paddingBottom: '1px',
            placeholder: { color: '#eee' }
        },

        // `label` is the label container
        label: {
            backgroundColor: 'lightblue',
            paddingTop: '2px',
            paddingBottom: '1px'
        },

        // `message` is the invalid message container
        message: {
            backgroundColor: 'red',
            color: 'white',
            paddingTop: '2px',
            paddingBottom: '1px'
        }
    },

    // use this option if you want to include each field
    // in the separate iframe
    fields: {

        firstName: {
            // selector, where the iframe with this field will be included
            // on your page
            selector: '#chargify1',

            // ot overrides default label
            label: 'FIRST NAME',

            // it overrides default placeholder
            placeholder: 'John',

            // if a given field is optional by default, you can make it required
            required: false,

            // it overrides default error message
            message: 'First name is not valid. Please update it.',

            // it overrides or defines max length
            maxlength: '30',

            // it overrides global styles for this field only
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    placeholder: { color: 'green' }
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        lastName: {
            selector: '#chargify1',
            label: 'LAST NAME',
            placeholder: 'Doe',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        bankName: {
            selector: '#chargify2',
            label: 'Bank Name',
            placeholder: 'My Bank',
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        routingNumber: {
            selector: '#chargify2',
            label: 'Routing',
            placeholder: '123412341234',
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        accountNumber: {
            selector: '#chargify2',
            label: 'Acct. Number',
            placeholder: '123412341234',
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        accountType: {
            selector: '#chargify2',
            label: 'Acct. Type',
            placeholder: 'Select One...',
            required: true,
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        accountHolderType: {
            selector: '#chargify2',
            label: 'Acct. Holder',
            placeholder: 'Select One...',
            required: true,
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        address: {
            selector: '#chargify3',
            label: 'Address',
            placeholder: '1234 Hill St',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '70',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        address2: {
            selector: '#chargify3',
            label: 'Address 2',
            placeholder: '1234 Hill St',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '70',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        city: {
            selector: '#chargify3',
            label: 'City',
            placeholder: 'Austin',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        state: {
            selector: '#chargify3',
            label: 'State',
            placeholder: 'TX',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '2',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        zip: {
            selector: '#chargify3',
            label: 'Zip Code',
            placeholder: '10001',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '5',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },

        country: {
            selector: '#chargify4',
            label: 'Country',
            placeholder: 'US',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        }
    }
});