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.

Methods
Website Web App iFrame

Tools
Themes Designer JS Widget

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.

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 > View URL.

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>

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 an Advanced Billing-hosted receipt page or a custom redirect URL.

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

Custom Thank You Page
Inside Advanced Billing, 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:

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

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 > View URL.

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>

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 Advanced Billing, 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:

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

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

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 > View URL.
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.
```

<a href="/subscribe?plan=pro&reference=user_7jlqrxl517jnmbpaewk6zg&first_name=This&last_name=This">
  <button type="button">Subscribe to Pro</button>
</a>
```
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.

Set your iframe callback url in Advanced Billing
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
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

Open full screen

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

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>

Prefill custom field data using this simple javascript snippet:

//Example: The URL ends with ?custom1=gold&custom2=big
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

//Define custom fields
const custom1 = urlParams.get('custom1'); //gold
const custom2 = urlParams.get('custom2'); //big

//Prepopulate text custom field (XXXXX is your custom field ID)
$("#subscription_metafields_XXXXX").val(custom1);
$("#subscription_metafields_XXXXX").val(custom2);

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.

Optional - Add language translation JS

How to change language
Change the language on your page using this code snippet. Simply replace the text in the snippet.