Introduction

This use case details the steps required to integrate static pricing pages with SigningHub’s registration and billing system. It includes configuring the "Create Account" web page, enabling billing features, and setting up a Stripe connector in SigningHub Admin. Additional steps cover configuring billing within a service plan, creating a new product in Stripe, and integrating Taxamo by obtaining API tokens and setting up webhook URLs. The process concludes with updating static HTML pages and Stripe mapping files to ensure seamless integration and accurate payment processing.


How it works?

  1. Configure the 'Create Account Web Page', in SigningHub Admin.
  2. Configure a  Stripe connector, in SigningHub Admin.
  3. Enable Billing, in SigningHub Admin.
  4. Configure Billing in a Service Plan, in SigningHub Admin.
  5. Create a new product, in Stripe
  6. Get API tokens and configure webhook URL, in Taxamo.
  7. Update Static HTML pages.
  8. Update the Stripe mapping file.
  9. Complete the user registration and billing process.


Configure the 'Create Account Web Page' in SigningHub Admin

Navigate to 'Global Settings' under the 'Configurations' section in SigningHub Admin.


  1. In the "Create Account Web Page" field, input the static pricing page URL where the user registration process will initiate.



Configure a Connector in SigningHub Admin

To see in detail, how to create a Stripe Connector in SigningHub, click here.

Make the following configurations to a connector in SigningHub Admin:


  1. In the "Basic Information" section, choose "Stripe" as the "Provider".



  1. In the "Details" section, fill in the required fields.
  1. SigningHub also supports two other payment gateways; 'Worldpay' and 'SSLCommerz'.


Enable Billing in SigningHub Admin

Navigate to 'Billing' under the 'Configurations' section in SigningHub Admin.


  1. Check the 'Enable Billing' checkbox, and fill in the necessary details:




Configure Billing in a Service Plan in SigningHub Admin

To see in detail, how to create a service plan in SigningHub, click here.
Make the following configurations to a service plan in SigningHub Admin:


  1. In the 'Billing' section of the service plan, set the 'Billing Mode' as 'Online', and select the required payment type, as shown below:


Stripe Configurations (Only for Pay Regularly Plans)

Make the following configurations to your Stripe Account:


  1. Go the Product catalogue section, and click on the 'Create product' button. 



  1. Specify the details of the product, as required.



  1. Click on the 'More pricing options' button to add three different prices in Stripe; one for each currency supported in the SigningHub Admin (USD, EUR, GBP). After adding the prices, click on the "Next' button.
    Ensure the billing period (monthly or yearly) is set accordingly for each price.



  1. Click on the 'Add product' button.



  1. Either click on the created product from the product listing or click on the 'View product' button.



  1. Click one the overflow menu button, and click on the 'Copy price ID' option. Save this information to be used later.
    The Price ID (API ID for each product price) generated by Stripe will be used on the static HTML pricing pages to reference the correct service plan pricing.




Taxamo Configurations

Taxamo is utilized in this integration to manage VAT calculations and compliance with tax regulations. It ensures accurate tax handling for seamless billing and payment processing.

Make the following configurations to your Taxamo Account:


  1. Go to the 'Settings' section and click on the 'View API tokens' option.



  1. Copy the 'Public token' and the 'Private token'. These tokens need to be configured in the Stripe connector within the SigningHub Admin.



  1. Go to the 'Settings' section and click on the 'Configure webhooks' option.



  1. Click on the 'Configure new endpoint' button. 



  1. Specify the URL and the event types, then click on the 'Save changes' button.
  1. The callback URL format should be: [BASE URL]/Buy/TaxamoCallback
    For example if the base URL is "https://beta.web.signinghub.com" then the callback URL will be '"https://beta.web.signinghub.com/buy/taxamocallback". 


Update Static HTML Pricing Pages

It is crucial to update the static pages whenever service plans are modified or added, particularly for recurring payment plans.


Requirements

Description

Service Plan IDs

Each available service plan ID should be clearly referenced on the static pages. 
Whenever new plans are added or existing ones are updated, the corresponding service plan ID must be updated on the static page.

Plan Selection

Users should be able to choose their desired plan directly from the static page.

Payment Interval for Recurring Plans

For service plans with recurring payments, users should be able to select the payment interval; Monthly or Yearly.

Currency Selection

Users should be able to select their preferred currency, such as EUR, USD, or GBP.

Data Transmission to SigningHub

After users select a plan, payment interval, and currency, this information must be passed seamlessly to the SigningHub Registration or Upgrade page.

Redirection to SigningHub

Once all the necessary information is collected, users should be redirected to the SigningHub platform with the following URL structure:

  • [WEB_URL]/Register?planId=128&currency=USD&duration=2
  • [WEB_URL]/Buy/UpgradePlan?planId=97&currency=USD&duration=1
  • planId: The ID of the selected plan, as configured in the SigningHub Admin panel.
  • currency: The selected currency (must match one of the default currencies set in SigningHub Admin).
  • duration: The interval of the recurring payment:
    • 1 for Monthly
    • 2 for Yearly (for PAG plans, always set this to 2). 


  1. The integration applies to recurring payment plans only. 
  2. Keep the static pages up to date with the latest service plan IDs provided by SigningHub.


Stripe Service Plan Mapping

The Stripe mapping file, ServicePlan_StripePlan_mapping.json, located in the Default folder, must be updated periodically for regular payment plans. (No updates are required for Pay-As-You-Go (PAG) plans.)


For each plan with monthly and yearly pricing, three keys must be added to cover USD, EUR, and GBP prices. The key format should follow this structure:

[Plan ID from SH Admin]_[Currency]_[Billing Mode]


  • Plan ID: The unique ID from the SigningHub Admin panel.
  • Currency: The currency being used (USD, EUR, GBP).
  • Billing Mode: The payment interval (Monthly or Yearly).


The corresponding value is the price configured on Stripe for the service plan in that specific currency.



User Registration and Billing

  1. After the configurations, when a user initiates the process from the static page, as earlier configured in SigningHub Admin. Select the plan you want to buy.



  1. Click on the 'Proceed to Payment' button.



  1. After providing the necessary details, click on the 'Create Account' button. 

  1. The user will now be redirected to the stripe dialog to process the billing. The user can provide the payment details and click on the 'Proceed' button.

  1. After the payment has been processed, the billing process will complete. And the user will be redirected to the Login screen.


See Also