Hosted Page Settings

This section describes how to customize the look, feel, and behavior of your Hosted Pages. If you need information on how to use the Hosted Pages to sell Subscriptions, please see the Hosted Page Integration documentation.

Customizing the Hosted Signup Page

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

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

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.

We’ve put together a Using your own CSS for Hosted Signup Page for our hosted pages.

Custom Links

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.

Enable Coupons

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

Accepted Cards

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

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 GET requests.

The available parameters are:

  • first_name: Fills the value for the customer’s “First name” (Fills value for both Shipping/Contact info and Billing info, unless `billing_first_name` is provided)
  • last_name: Fills the value for the customer’s “Last name” (Fills value for both Shipping/Contact info and Billing info, unless `billing_first_name` is provided)
  • billing_first_name: Fills the value for the Billing Address’s “First Name” field (Overrides value provided by first_name, if any)
  • billing_last_name: Fills the value for the Billing Address’s “Last Name” field (Overrides value provided by last_name, if any)
  • 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”
  • coupon_code: Fills the value for the coupon code to use with the subscription

Pre-populating quantity-based components can be set by passing in the component id (visible in your components list) and desired quantity.

Please note the order of the parameters matters to properly set the desired quantity for each component.

?components[][component_id]=16899&components[][allocated_quantity]=9

(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](http://support.chargify.com/faqs/api/api-subscriptions).)

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

Return URL and parameters

The Return URL is configured in the Product Options on a per-product basis, but is documented here for its effect on the Hosted Payment Pages.

When creating or editing a product, you may specify a Return URL after successful signup, Return URL after successful account update and Return parameters.

The Return URL after successful signup is the URL that the user will be redirected to after they sign up using the hosted page. The Return URL after successful account update is the URL that the user will be redirected to after they update their payment details using the “self-service” hosted card update page. The Return parameters specify the data that will be passed back in the query string of both Return URLs (i.e. it is shared between both URLs).

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
  • signup_revenue: The revenue, formatted as a string of decimal separated dollars and cents, from the subscription signup ($50.00 would be formatted as 50.00)
  • signup_payment_id: The ID of the transaction that generated the revenue

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.