Classy Pay

Environments

Environment Script Link API Link
Production https://pay.classy.org/javascripts/classypay.js https://pay.classy.org
Staging https://staging-pay.stayclassy.org/javascripts/classypay.js https://staging-pay.stayclassy.org

Classy Pay APIs

Please refer directly to the REST documentation here: Classy Pay API Docs

Embedded Checkout

Embedded checkout is a Classy Pay javascript library that renders a checkout form into the caller's page. In addition, embedded checkout provides a flexible framework to store and retrieve additional application meta data on the transaction object created during checkout. Embedded checkout returns all collected information (sans sensitive payment information like credit card number or bank account number) to the calling application including information that can later be used to make additional transactions or void/refund existing transactions.

Useful Links

Description Link
Full example jsfiddle Example
Minimal example jsfiddle Example
Classy Pay api documentation Classy Pay API Docs

Import & Configuration

$(document).ready(function() { classyPaySetup({ targetDivId: 'classypay', classyPayEndpoint: 'https://pay.classy.org/t/llstnt.jd?s=lls', donationAmount: 25.50, hideSubmit: true, // prefill the form formData: { firstName: 'Jason', lastName: 'Bourne', address1: '11 Acme St', zip: '654321', city: 'City of Acme', state: 'CA', email: 'jbourne@candidate.net', phone: '(415)111-2222', employer: 'unemployed', birthMonth: '09', birthDay: '02', birthYear: '1975', participant: 'Jason Bourne', // add your own application data to classypay objects transaction_meta_age: 'your own custom field attached to transaction', transaction_meta_height: 'your own custom field attached to transaction', transaction_meta_ref: 'your own custom field attached to tx', // pass to classypay, but don't store, just hand back on OK my_meta_data: 'just hand this back to me later in tx resp' } }, function(transactionResponse) { // called when tx completes /* TransactionResponse contains all data you pass in * including formData and any additional collected * data at time of checkout/registration/donation. */ console.log(JSON.stringify(transactionResponse)); // example: hide the div when transaction is complete and show thank you $('#classypay').hide(); $('#thankyou').show(); }); });

Details

This is the call to load the Classy Pay javascript library.

Classy Pay requires a div element to populate the checkout block. If this is undefined, a console error is displayed and the div is not rendered.

Classy Pay provides a function: classyPaySetup to be called in your own javascript code.

classyPaySetup(settings, callback);

The settings parameter is an object with the following properties:

Property Description Comments
targetDivId The id of the div to render the contents of the checkout block in. This is not optional, the Classy Pay javascript library does check to see if the div exists and if not, logs an error and skips the rendering process.
classyPayEndpoint The URL pointing to the Classy Pay environment you are connecting to. Several environments are available including a sandbox environment and production environment.
donationAmount The total amount to be displayed and charged in the checkout block. This is not optional. This is a double without any currency notation. If this is not supplied, a message will display requesting this information instead of the form.
hideSubmit Whether or not to show the submit button on the form. If you have your own submit button for you form or site, use this configuration to turn off the built in submit button. In your own flow, call classyPayCheckout Javscript function to submit instead.
formData Contains three types of data: form pre-fill data, Classy Pay object meta data, your own application data. See explanation below.

The formData property is an object with the following characteristics:

Type Naming Convention Behavior
pre-fill data camelCase These properties map directly to form input fields to pre-populate the form based on your own application's prior data entry.
Classy Pay object meta data snake_case: transaction_meta_ The text following the second underscore denotes the unique value associated with the Classy Pay object meta data. This meta data will be stored with the transaction Classy Pay model and retrievable via direct API GET calls and also returned during successful checkout to the Classy Pay javascript caller.
application data snake_case: _meta_ The text following the second underscore denotes the unique value associated with your own application data. You can place text before the first underscore, however this is not required. This data is not stored in Classy Pay, however it will be returned to the application upon successful checkout.

The callback parameter is the method you wish to be called upon successful checkout. Method prototype is of the form:

function(transactionResponse) {...}

The transactionResponse object contains the values passed in to the formData object during Classy Pay setup in addition to any data collected in the form and transaction result.

Once called, classyPaySetup generates the checkout block and renders the block in the div provided as part of the setup options. Once a checkout completes, your callback function will be called.

Embedded Update Recurring

Embedded Update Recurring is a Classy Pay javascript library that renders an update recurring form into the caller's page. This form when submitted updates a recurring donation payment method and settings around when a recurring payment is made.

Useful Links

Description Link
Full example jsfiddle Example
Minimal example jsfiddle Example
Just update recurring payment method example jsfiddle Example
Just update recurring settings example jsfiddle Example
Classy Pay api documentation Classy Pay API Docs

Import & Configuration

$(document).ready(function() { classyPaySetup({ targetDivId: 'classypay', classyPayEndpoint: 'https://pay.classy.org/t/updaterecurring.jd?s=lls', recurringId: 1 // prefill the form formData: { donationAmount: 100.00, zip: '654321', recurOn: 15, recurUntil: '2020-01-01', fot: 'false', expirationMonth: 05, expirationYear: 2020 } }, function(updateResponse) { // called when update completes /* UpdateResponse contains all data you pass in * including formData and any additional collected * data at time of recurring update. */ console.log(JSON.stringify(updateResponse)); // example: hide the div when update is complete and show done div $('#classypay').hide(); $('#done').show(); }); });

Details

For information on how the Classy Pay javascript library is used, see Embedded Checkout above.

The settings parameter is an object with the following properties:

Property Description Comments
targetDivId The id of the div to render the contents of the update recurring block in. This is not optional, the Classy Pay javascript library does check to see if the div exists and if not, logs an error and skips the rendering process.
classyPayEndpoint The URL pointing to the Classy Pay environment you are connecting to. Several environments are available including a sandbox environment and production environment.
recurringId The ID of the recurring donation object in Classy Pay. This is not optional. If this is not supplied, a message will display requesting this information instead of the form.
formData Contains pre-fill data. See explanation below.

The formData property is an object with the following characteristics:

Type Naming Convention Behavior
pre-fill data camelCase These properties map directly to form input fields to pre-populate the form based on your own application's prior data entry.

The callback parameter is the method you wish to be called upon successful recurring update. Method prototype is of the form:

function(updateResponse) {...}

The updateResponse object contains the values passed in to the formData object during Classy Pay setup in addition to any data collected in the form and update result.

Once called, classyPaySetup generates the update recurring block and renders the block in the div provided as part of the setup options. Once a recurring update completes, your callback function will be called.

Embedded Create Payment

Embedded Create Payment is a Classy Pay javascript library that renders a create payment form into the caller's page. This form when submitted creates a new payment method by authorizing the new payment method but not charging the payment method.

Useful Links

Description Link
Full example jsfiddle Example

Import & Configuration

$(document).ready(function() { classyPaySetup({ targetDivId: 'classypay', classyPayEndpoint: 'https://staging-pay.stayclassy.org/t/createpayment.jd?s=lls', // prefill the form formData: { firstName: 'Jason', lastName: 'Bourne', address1: '143 MIA', address2: 'Floor 6', city: 'Boston', state: 'MA', email: 'jason.bourne@acme.org', zip: '654321', expirationMonth: 05, expirationYear: 2020 } }, function(createResponse) { // called when create completes /* CreateResponse contains all data you pass in * including formData and any additional collected * data at time of create payment. */ console.log(JSON.stringify(createResponse)); // example: hide the div when create is complete and show done div $('#classypay').hide(); $('#done').show(); }); });

Details

For information on how the Classy Pay javascript library is used, see Embedded Checkout above.

The settings parameter is an object with the following properties:

Property Description Comments
targetDivId The id of the div to render the contents of the create payment block in. This is not optional, the Classy Pay javascript library does check to see if the div exists and if not, logs an error and skips the rendering process.
classyPayEndpoint The URL pointing to the Classy Pay environment you are connecting to. Several environments are available including a sandbox environment and production environment.
formData Contains pre-fill data. See explanation below.

The formData property is an object with the following characteristics:

Type Naming Convention Behavior
pre-fill data camelCase These properties map directly to form input fields to pre-populate the form based on your own application's prior data entry.

The callback parameter is the method you wish to be called upon successful create payment. Method prototype is of the form:

function(createResponse) {...}

The createResponse object contains the values passed in to the formData object during Classy Pay setup in addition to any data collected in the form and create result.

Once called, classyPaySetup generates the create payment block and renders the block in the div provided as part of the setup options. Once a create payment completes, your callback function will be called.

FAQ

Question Answer
How do I get started as quickly as possible? See this jsfiddle example giving the minimal amount code required in your page to render the checkout page: Example
I need checkout details, how can I get it? Classy Pay returns all checkout information in the form of a callback which you can provide in configuration to Classy Pay
I need to pre-fill the form with my own data, how can I do this? In the Classy Pay setup object, the field formData provides the means to pass in any form element value you want as default
I have my own application data I want to store with Classy Pay, how can I do this? In the Classy Pay setup object, using formData you can define variables for the transaction to store application data on this object, see documentation for details, however any variable starting with transaction_meta_ will be stored as meta data on Classy Pay object of transaction type
I don't want to store any of my application data with Classy Pay but I do want Classy Pay to hand some data back to me, how can I do that? In the Classy Pay setup object, using formData you can define variables with _meta_ in the name to have Classy Pay return this data back to you via your callback