Hosted Signup Page

Chargify offers a hosted/white label signup page for all of our customers. The hosted page allows you to integrate with the Chargify platform without having to worry about collecting credit card information or writing custom code yourself. You can point your customers to a unique URL on the Chargify site and we will securely handle subscription signup and payment processing.

To use hosted signup pages with the Beanstream gateway, you must enable billing address collection.

screenshot.jpg

Each Product has its own hosted signup page page and unique URL. You can find the URLs for these pages on your product overview screen, as indicated in the following image:

hosted-signup-page-link-location.png

Customizing the Hosted Signup Page - Site Settings

You can customize the look and feel of your hosted page to match your site by uploading a logo, providing custom CSS and JavaScript, and specifying URLs that link back to your site.

Page Title

The title will be displayed at the top of the page and in the title of the browser window. The {{product_name}} and {{product_family}} keywords will be replaced with the actual product name and product family name of the product. If left blank, the title will be set as the "Product Family Name: Product Name".

Upload your logo

upload.jpg

To upload a logo, click the 'Settings' tab and then select the 'Hosted Page Settings' in the menu on the left. Use the file upload button to select your image. Supported file types are .gif, .jpeg, and .png. Images will automatically be resized to a maximum width of 800px and a maximum height of 100px.

Add Custom CSS and JavaScript

cssjs.jpg

The 'Hosted Page Settings' tab also provides input fields to collect custom CSS and JavaScript for your site. Content in the CSS field will be included at the top of the page in a stylesheet tag. Custom JavaScript will be included at the bottom of the page and wrapped in a script tag.

Custom Links

links.jpg

The 'Hosted Page Settings' tab also provides input fields to collect custom urls. If a 'Home link URL' is provided, the title of the page or the Logo will link to that URL. 'Terms and conditions URL' and 'Privacy policy URL' links will appear in the footer if provided. Additionally, if a Terms link is provided a checkbox will appear to require the user to agree to the terms.

terms.jpg

Enable Coupons

The checkbox under 'Enable coupons' determines whether or not a coupon field is shown on the hosted payment page.

Accepted Cards

cards.jpg

Check the checkbox next to each card logo for that logo to display on the hosted payment page. Note that unchecking one of the the cards will not prevent users from entering a card of that type.

Customizing the Hosted Signup Page - Product Settings

Several options exist to customize the hosted signup page on a per product basis.

Requesting/Requiring Shipping and Billing addresses

addresssetting.jpg

On the settings page for a product you can determine whether or not you want to collect the shipping and billing address information for the user. When an address is 'requested', the fields appear on the page but are not required. Clicking the 'require' checkbox will make the fields mandatory.

Pre-populating Data

When linking to the hosted payment page, it is possible to have certain values pre-populated by passing parameters as a "application/x-www-form-urlencoded" encoded data set (this simply a normal query string for GET requests, and a normal form post for POST requests).

The available parameters are:

  • first_name: Fills the value for the customer's "First name"
  • last_name: Fills the value for the customer's "Last name"
  • email: Fills the value for the customer's "Email address"
  • reference: Sets a hidden field to supply a value for the customer's "reference" value (the unique identifier you use for the customer within your own application
  • organization: Sets a hidden field to supply a value for the customer's organization name (not currently a visible form input element)
  • billing_zip: Fills the value for the cardholder's "Billing ZIP code"

(For a description of how these attributes apply to the created customer and payment profile, please refer to the "Subscription Input Attributes" section of the Subscriptions API documentation.)

For example, accessing a hosted signup page URL with the following query string would generate the form pre-populated as shown below:

?first_name=John&last_name=Doe&email=john.doe@example.com&reference=1234

hosted-signup-pre-populated.png

Return URL and parameters

When configuring a product, it is possible to specify a Return URL and Return parameters.

params.jpg

The Return URL is the URL that the user will be redirected to after a successful transaction. The Return parameters specify the data that will be passed back in the query string of the Return URL.

The available parameters are:

  • subscription_id: The Chargify generated unique identifier for the subscription that was created
  • customer_id: The Chargify generated unique identifier for the customer that was created
  • customer_reference: Your unique reference if one was sent in the pre-populated data
  • product_handle: The product API handle
  • product_id: The Chargify generated unique identifier for the product

Return parameters are specified using a single brace around the name of the parameter and separated with an ampersand.

For example, a Return URL of:

http://example.com/callback

With these Return parameters:

subscription_id={subscription_id}&customer_reference={customer_reference}

Would result in the URL:

http://example.com/callback?subscription_id=1&customer_reference=1234

Note: Return parameters should not be considered authoritative. Granting irrevocable access to users based on these values is not advised. They should be considered hints until the user is verified via a secure API read.