Accept Signups with Public Signup Pages

This guide will help you implement Public Signup Pages (PSPs) with your website or app. When you're finished, you will be able to accept customer-facing signups. 

Website Web App iFrame


Summary - Website

Feature
Public Signup Pages
You Need
Ability to edit your website; basic HTML experience
Code
Basic HTML (creating web links)
Difficulty
◉◉

Implementation Try it out Diagram

Best for non-logged in users who are subscribing directly on your website.

1. Create a button and redirect to a PSP HTML 
Create a button on your website that links to the PSP. Typically, this is done on a pricing page. Style your button when you're ready.

  1. Get a PSP URL
    First, you'll need to grab the proper link, based on the product your customer is subscribing to. Since your Catalog is already created, go to Catalog > Public Signup Pages. Next to the Product of your choice, click 'View URL' and copy the URL.

    getpsp.gif

  2. Create a subscribe button
    Create a button, and link to the PSP.
    <a href="https://chargify-implementation-samples.chargifypay.com/subscribe/2hdcr3k87g2n/pro">
      <button type="button">Subscribe Now</button>
    </a>

  3. Test
    After setting this up, you should be able to click the button, and have your website redirect to the proper PSP link.

2. Redirect to a success page
After your customer successfully submits the form, they should be redirected to either a Chargify-hosted receipt page or a custom redirect URL.

Chargify-hosted Receipt Page (default)
No setup is required. 

Custom Thank You Page
Inside Chargify, open your PSP settings under Catalog > Public Signup Pages. Next to the Product you are working with, click Actions > Edit, then scroll down to 'Return URL after successful signup'. Enter your URL, such as 'https://mywebsite.com/signup/thanks'. It will look like this:

confirm-thank-you-page.png

3. Test
Test your real use case, and make changes as needed.
- Restrict user from signing up again (eg: block the pricing page, do not show the 'subscribe now' button, etc)
4. Configure Settings Optional 

Now that your PSP is implemented, configure the settings. Choose which of the 2 methods below makes sense for your use case.

Method 1 - Configure Master PSP Settings   Help
Best for settings that apply to all PSPs that are not overridden at the individual PSP level. Go to Config > Settings > Public Page Default Settings. These settings control functionality that will extend to all individual PSPs, unless you override the setting on the individual PSP level.

Method 2 - Configure Individual PSP Settings   Help
Best for settings that apply to an individual PSP. Go to Catalog > Public Signup Pages. Next to the Product of your choice, click Actions > Edit. These settings control functionality such as currency, components, price points, card icons, custom fields, and more.


Summary - Web App

Feature
Public Signup Pages
You Need
Ability to edit your web app; HTML experience
Code
Basic HTML; Backend-code for logged in users (if necessary) 
Difficulty
◉◉◉

Implementation Try it out Diagram

Best for web apps where users are logged in, and they do not yet have a subscription. The user may click a 'subscribe now', 'signup now, or 'upgrade now' button on the top of your app, or view a pricing page in your app.

1. Create a prefilled button and redirect to a PSP HTML
  1. Get a PSP URL
    First, you'll need to grab the proper link, based on the product your customer is subscribing to. Since your Catalog is already created, go to Catalog > Public Signup Pages. Next to the Product of your choice, click 'View URL' and copy the URL.

    getpsp.gif

  2. Create a subscribe button with a prefilled reference value
    Create a button in your app that links to the PSP. Make sure to prefill all of the customer information you have about your user, using query parameters. The most important value to prefill is your user's ID, using the `reference` parameter. See the example below. 
    <!-- Syntax: URL?reference={reference} -->
    <a href="https://chargify-implementation-samples.chargifypay.com/subscribe/vhvsbg4r5w4g/pro-webapp?reference=user_7jlqrxl517jnmbpaewk6zg&first_name=some-value&last_name=some-value&email=some-email@example.com&phone=(555) 555-5555&organization=some-company">
      <button type="button">Subscribe Now</button>
    </a>

  3. Test
    After setting this up, you should be able to click the button, and have your website redirect to the proper PSP link with a reference value prepopulated.

 

2. Redirect back to your app
After your customer successfully submits the form, they should be redirected to a custom redirect URL in your app.

Inside Chargify, open your PSP settings under Catalog > Public Signup Pages. Next to the Product you are working with, click Actions > Edit, then scroll down to 'Return URL after successful signup'. Enter your URL, such as 'https://mywebsite.com/signup/thanks'. It will look like this:

confirm-thank-you-page.png

3. Test
Test your real use case. Make changes as needed.

You may also want to:
- Disable duplicate email signups (Config > Settings > Fields > checkmark 'Unique Emails'
- Restrict user from signing up again (eg: block the pricing page, do not show the 'subscribe now' button, etc)
4. Configure Settings Optional 

Now that your PSP is implemented, configure the settings. Choose which of the 2 methods below makes sense for your use case.

Method 1 - Configure Master PSP Settings   Help
Best for settings that apply to all PSPs that are not overridden at the individual PSP level. Go to Config > Settings > Public Page Default Settings. These settings control functionality that will extend to all individual PSPs, unless you override the setting on the individual PSP level.

Method 2 - Configure Individual PSP Settings   Help
Best for settings that apply to an individual PSP. Go to Catalog > Public Signup Pages. Next to the Product of your choice, click Actions > Edit. These settings control functionality such as currency, components, price points, card icons, custom fields, and more.


Summary - iFrame

Feature
Public Signup Pages
You Need
Ability to edit your website; HTML/JS/CSS experience
Code
Basic HTML; Javascript; CSS
Difficulty
◉◉◉

Implementation Try it out Diagram

Best for website or web app user experiences that appear on your domain. Before implementing iframes, please review this documentation.

1. Create a button and link customer to a PSP (on your domain) HTML
  1. Get a PSP URL
    First, you'll need to grab the proper link, based on the product your customer is subscribing to. Since your Catalog is already created, go to Catalog > Public Signup Pages. Next to the Product of your choice, click 'View URL' and copy the URL.

    getpsp.gif

  2. Create a subscribe button with a prefilled reference value
    Create a button in your app that links to page on your servers, such as /subscribe. This page will iframe the PSP. Optional - make sure to prefill any data you have about your user, especially your user's reference value in the 'reference' query parameter.
    <!-- Syntax: YOURURL?reference={reference} -->
    <a href="/subscribe?plan=pro&reference=user_7jlqrxl517jnmbpaewk6zg&first_name=This&last_name=This">
      <button type="button">Subscribe to Pro</button>
    </a>

  3. Test
    After setting this up, you should be able to click the button, and have your website redirect to the proper PSP link with a reference value prepopulated.
2. Create a subscribe page that contains the iframe HTML
The /subscribe page needs to render an iframe. Make sure to replace PSPLINK with the actual PSP link.

Single URL

Just put the PSP link. Easy enough.

Dynamic URLs
Maybe you offer 3 plans, or maybe you want to pass prefilled data. Render the full PSP link in your backend, and then pass it to your front end.  

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>iFrame sample</title>
    <!-- Custom styles for this template -->
    <link href="iframe.css" rel="stylesheet">
  </head>
  <body>
    <div class="container py-3">
      <main>
        <iframe src="PSPLINK"></iframe>
      </main>
    </div>
  </body>
</html>
3. Style the iframe  CSS
Use CSS to blend the iframe into your page, make it full size, remove borders, etc.

/* iframe.css */
iframe {
  position:fixed;
  top:0; 
  left:0; 
  bottom:0; 
  right:0;
  width:100%; 
  height:100%;
  border:none; 
  margin:0; 
  padding:0;
  overflow:hidden; 
  z-index:999999;
}
4. Configure the redirect  JS
With iframes, this involves 2 redirects. The PSP redirects to the iframe callback url which then redirects the user to your app dashboard.

  1. Set your iframe callback url in Chargify
    Open your PSP settings under Catalog > Public Signup Pages. Next to the Product you are working with, click Actions > Edit, then scroll down to 'Return URL after successful signup'. In this example, we'll set it to your iframe redirect link. This step is responsible for redirecting the signup to your iframe-callback script, so that script can then redirect the user back to your app dashboard. Your URL might be something like https://myapp.com/iframe-callback

  2. Configure your iframe callback and app dashboard
    This removes the iframe, and redirects the user to their end destination. Create a file called `/iframe-callback`, and add the following Javascript. Replace the href to determine where your user is actually redirected to.

    <script>
      //redirects away from iframe, and sends user to another page
      window.parent.location.href = "dashboard.html"; 
    </script>
5. Test
Test your real use case. Make changes as needed.

You may also want to:
- Disable duplicate email signups (Config > Settings > Fields > checkmark 'Unique Emails'
6. Configure Settings Optional 

Now that your PSP is implemented, configure the settings. Choose which of the 2 methods below makes sense for your use case.

Method 1 - Configure Master PSP Settings   Help
Best for settings that apply to all PSPs that are not overridden at the individual PSP level. Go to Config > Settings > Public Page Default Settings. These settings control functionality that will extend to all individual PSPs, unless you override the setting on the individual PSP level.

Method 2 - Configure Individual PSP Settings   Help
Best for settings that apply to an individual PSP. Go to Catalog > Public Signup Pages. Next to the Product of your choice, click Actions > Edit. These settings control functionality such as currency, components, price points, card icons, custom fields, and more.


Advanced Implementation Options

Each of these are optional.

Optional - Prefill customer data
You may want to prefill data such as a customer reference, first name, last name, etc. See all pre-fillable fields | Prefill Custom fields

As an example:
<!-- Syntax: PSPLINK?reference=123?first_name=Tommy&last_name=Emmanuel-->
<a href="https://chargify-sandbox-141.chargifypay.com/subscribe/yy2xt8wtsnm2/basic_plan?reference=123&first_name=Tommy&last_name=Emmanuel">
  <button type="button" class="w-100 btn btn-lg btn-primary">Subscribe to Pro</button>
</a>
Optional - Add custom css/javascript CSS JS
CSS controls design, and Javascript controls functionality and layout. View the resource section above to find pre-made templates.

Developers
You can write your own code and add it to any PSP under Catalog > Public Signup Pages. Next to the Product of your choice, click Actions > Edit > CSS + Javascript. Tip: use the browser console to test and debug code you want to add.

Non-developers   Get code snippets
Use these prewritten code snippets.


Resources

- PSP Theme Generator Javascript Widget
- PSP Theme Explorer
- PSP Designer

Was this article helpful?
1 out of 1 found this helpful