Skip to main content

Hosted Sign-Up Pages

ChargeOver provides hosted sign-up pages or checkout forms for each of your plans and products.

Enable Hosted Sign-Up Pages

  1. Go to your Settings then Add-Ons then Hosted Sign-up Pages
  2. Click Get Started
  3. To add and customize a new hosted signup form template, click the New Hosted Form button
    • You can also edit an already existing template by clicking the name of the form you want to edit and select the "Edit Tab"

  1. You'll be brought to a page with an array of options that allow you to choose things like
    • What fields are on the form
    • Whether the customer should be sent a welcome email or payment receipt after signing up
    • Whether to show terms & conditions etc.

If you do not see the option for a customization you want to make, you can contact us here. We may be able to make additional changes for you that are not available in the UI, such as adding custom fields.

  1. Go to Plans & Products
  2. Click on the product you want to find the link for
  3. Under Plan/ Product Overview, click the Hosted Sign-up Form/Link button

  1. This will give you the link to the hosted signup form. You can send this link to your customer(s) or link to it from your webpage

  1. Go to Settings then Add-Ons and Hosted Sign-Up Pages
  2. Click the Get sign-up form link button next to a template

  1. Select the product that you want the sign-up form link for from the drop down menu

You will be given the sign-up form link for the product you have selected.

Pre-Authorizations, Declines and Hosted Signup Pages

By default, if someone signs up using a hosted signup form with a bad card, the subscription is still created.

The customer is then presented with an invoice to pay.

If this behavior is undesirable, you can turn on pre-authorizations on the payment gateway. This causes a $1.00 charge to happen to the card immediately, prior to the actual subscription being created. If the $1.00 charge is declined, then the subscription is never created.

This isn't 100% effective (e.g. there can be a case where the $1.00 auth succeeds... but a larger $100 charge after the subscription create then declines) but it should be better than nothing.

Use Sign-Up Pages for One-Time Purchases

Hosted sign-up pages can be used in different ways. If you don't want to use them to sign up customers for recurring subscriptions, you can use it for a one-time registration or purchase instead.

  1. Create a product that only has a Setup Fee. You will want to use the Flat Pricing option to do this

  1. Save
  2. Now that the product has been created, you can click Hosted Sign-Up Form/Link in the right corner of the screen

  1. Copy whichever link you want to use

  1. Now, when a customer uses the hosted sign-up page, a One-Time invoice will be created for that specific product
  2. You will be able to find the one-time invoice in your Invoices. It will look something like this

If you look at the line items, you can see the only charges are a one-time charge and a credit card processing fee.

There are no recurring charges because this product was purposefully not be set up as a subscription.

Sending Email Receipts

To set up emails to be sent after a successful signup form submission:

  1. Access desired form's settings by clicking on it's name

  1. Click on the Edit Tab
  2. To send welcome emails after a successful form submission, enable "Send a welcome email?"
  3. To send payment receipts, enable "Send a payment receipt?"
    • A payment success email will be sent if payment is successful
    • A failed payment email will be sent if payment is declined

note

If you are collecting a payment and the transaction is declined, no welcome email will be sent, even if it is enabled.

For Developers

Embedding Hosted Sign-Up Pages in an <iframe>

You can embed ChargeOver's hosted sign-up pages into your own site, via an <iframe>.

The HTML code looks like this:

<iframe width="100%" height="800" src="PUT THE HOSTED SIGN-UP PAGE URL HERE">
</iframe>

If you see a message indicating the page cannot be displayed (possibly due to security protections), make sure you whitelist the domain name your <iframe> is hosted on.

URL Parameters For Pre-Populating Forms

ChargeOver supports a number of URL paramters you can add to the hosted sign-up page URL to pre-populate some of the fields on the hosted sign-up forms.

For example, if your hosted sign-up page URL is this:

  • https://example.chargeover.test/r/signup/etnx5zsg6ha9/3d80a13dd017

You can append ?email=jane@example.com&name=Jane Doe to pre-populate the Your Email and Your Name fields on the form:

  • https://example.chargeover.test/r/signup/etnx5zsg6ha9/3d80a13dd017?email=keith@uglyslug.com&name=Jane Doe

Available URL Parameters

URL ParameterDescription
email=The customer's email address
company_name=The customer's company name
phone=The customer's phone number
name=The customer's first and last name
customer_external_key=The customer external key value
customer_custom_X=Customer custom field value; Set X to the custom field number
package_custom_X=Subscription custom field value; Set X to the custom field number
package_external_key=The subscription external key value
package_quantity=The quantity to purchase
package_holduntil_datetime=Delay the date of first payment; use a date or an expression like "+7 days"
currency=A 3-characters currency ISO code to present pricing in (example: "USD" or "CAD")

ChargeOver.js

If you want to host forms on your own website, but still securely collect credit card information, you can use ChargeOver.js.

Using ChargeOver.js gives additional flexibility like being able to add your own fields, completely control look the look and feel of the forms, and allow people to signup for multiple plans at one time etc.