Speed product provisioning with customized SaaS landing page fields

SaaS product type adoption in AWS Marketplace is growing fast and attracting more independent software vendors (ISVs). AWS Marketplace offers a serverless stack of services that enables sellers, ISVs, and Consulting Partners (CPs) to complete the required API integration for SaaS products in as little as ten minutes.

New sellers that aren’t familiar with the API integration in AWS Marketplace often choose to use the AWS SaaS Serverless Integration solution because it eases the development effort required to complete the API integration from scratch. This helps sellers with limited to no development team successfully complete the API integration and release their product faster.

This serverless integration deploys a landing page where a buyer can provide four default input fields—Company name, Contact person, Contact number, and Email address. If you need more information from the buyer to provision an account for them, this tutorial shows how to customize your landing page with additional input fields to enable that.

Out of scope for this blog post is the customization related to the style and structure of the landing page, as those type of changes will not impact the API integration. For example, you can change the logo, font color, and background, and those changes will be applied only to the files uploaded to the S3 bucket. The changes can then be propagated to the Amazon CloudFront distribution as soon as possible, depending on the caching time.

In this blog post, we show how to customize your landing page for the serverless SaaS integration by adding additional fields to the landing page. This is a sample solution that we used to demonstrate a possible scenario of customization that you can use as reference for the actual customization for their production deployment. You can also create input validations for the new variables added. We also show how to proceed to the next step after you complete your customization.

Prerequisites

To customize and deploy your fulfillment page for SaaS products using the SaaS serverless integration, you must complete the following prerequisites:

Register with AWS Marketplace as a paid seller.
Submit your SaaS listing in AWS Marketplace and ensure it has been published to either a Limited or Public status.
Verify you have received a product code and SNS topic unique to your product.
Ensure that you deploy the solution in the us-east-1 Region and using your seller account, which is the AWS account under which you listed your SaaS product.

The SaaS landing page is also referred to as the landing page, fulfillment URL, or registration page.

Solution walkthrough: Customizing SaaS landing page fields to speed provisioning

In this walkthrough, we are adding two additional fields in addition to the default four fields that come with the AWS Marketplace Serverless SaaS Integration Solution. In this example, Country Name and City Name are the two additional fields that a seller would like to add to their landing page.

To customize your SaaS landing page and add these fields, follow these steps.

A. Deployment package preparation

You must first customize two packages. These packages are associated to the HTML file and the Lambda function that takes the buyer’s information from the landing page and writes the records into the subscriber’s DynamoDB table. To do that, follow these steps:

Download the AWS Samples serverless integration from the GitHub repository to your local machine.
Unzip the AWS Samples serverless integration package and save the files to a location that you can easily refer to.
In the web subfolder, look for: index.html. In the src sub-folder, locate the register-new-subscriber.js Lambda function.
Open index.html and modify it to add the two new fields in the body of the file as shown in the following code snippet. The order doesn’t matter, as long as it matches your requirements. Ensure the input type matches the type of information you intend to collect, for example, text, tel, email, or other.

<title>Registration page</title>

</head>

<body class="text-center">
<div class="container">
<div id="alert"></div>

<form class="form-signin" method="POST" enctype="multipart/form-data">
<img class="mb-4" src="logo.png" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please enter your contact details</h1>

<label for="companyName" class="sr-only">Company name</label>
<input type="text" name="companyName" class="form-control" placeholder="Company name" required autofocus>

<label for="contactPerson" class="sr-only">Contact person</label>
<input type="text" name="contactPerson" class="form-control" placeholder="Contact person" required autofocus>

<label for="Contact phone" class="sr-only">Contact phone</label>
<input type="tel" name="contactPhone" class="form-control" placeholder="Contact phone" required autofocus>

<label for="contactEmail" class="sr-only">Email address</label>
<input type="email" name="contactEmail" class="form-control" placeholder="Email address" required autofocus>

<label for="CountryName" class="sr-only">Country Name</label> <input type="text" name="CountryName" class="form-control" placeholder="Country Name" required autofocus> <label for="CityName" class="sr-only">City Name</label> <input type="text" name="CityName" class="form-control" placeholder="City Name" required autofocus>

<button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>
<p class="mt-5 mb-3 text-muted">&copy; 2022</p>
</form>
</div>

Save your edited index.html file in the web subfolder.
Open register-new-subscriber.js Lambda function code. There are three places where you must update the code to capture the newly added fields. Refer to the code snippet that follows for each of the following three places you must update:

1. Add the additional fields to the list, keeping the same name and case as the input name tag added in the index.html file.
2. Add the additional fields to the if statement condition, keeping the same name and case as the input name tag added in the index.html file.
3. Insert the entries for the new items to ensure that the added fields are added to the DynamoDB table. Make sure you use the same name and case as the input name tag added in the index.html file. Make sure the item that you are adding is using the right DynamoDB attribute format, and refrain from using DynamoDB reserved words for any of your input names.

exports.registerNewSubscriber = async (event) => {
  const {
  // 6.a
    regToken, companyName, contactPerson, contactPhone, contactEmail, countryName, cityName,
  } = JSON.parse(event.body);

  // Validate the request
  // 6.b
  if (regToken && companyName && contactPerson && contactPhone && contactEmail && countryName && cityName) {
    try {
      // Call resolveCustomer to validate the subscriber
      const resolveCustomerParams = {
        RegistrationToken: regToken,
      };

      const resolveCustomerResponse = await marketplacemetering
        .resolveCustomer(resolveCustomerParams)
        .promise();

      // Store new subscriber data in dynamoDb
      const { CustomerIdentifier, ProductCode, CustomerAWSAccountId } = resolveCustomerResponse;

      const datetime = new Date().getTime().toString();

      const dynamoDbParams = {
        TableName: newSubscribersTableName,
        Item: {
          companyName: { S: companyName },
          contactPerson: { S: contactPerson },
          contactPhone: { S: contactPhone },
          contactEmail: { S: contactEmail },
          // 6.c
          countryName: { S: countryName },
          cityName: { S: cityName },
          customerIdentifier: { S: CustomerIdentifier },
          productCode: { S: ProductCode },
          customerAWSAccountID: { S: CustomerAWSAccountId },          
          created: { S: datetime },
        },
      };

Save the edited register-new-subscriber.js file, keeping the same file name and location.

B. Deploy the customized Serverless SaaS API integration package using AWS Cloud9

We used the AWS Cloud9 service to deploy the integration package. To do that, follow these steps:

1. Set up your AWS Cloud9 environment

Log in to your seller AWS account. Your user account should have admin or root access to the seller AWS account to create new resources.
Go to your AWS Cloud9 launch page: https://console.aws.amazon.com/cloud9control/home
To launch your environment, choose Create environment.

For more details about setting up your environment, see Setting up your Cloud9 environment near the beginning of the Serverless SaaS API integration Deployment Guide.

When you get to the implementation section in the Serverless SaaS API integration Deployment Guide, skip it and continue to step B.2.

2. Implementation

To implement in your Cloud9 environment, do the following:

Make sure that the deployment package you prepared is saved in an appropriate location on a local machine.
When your Cloud9 integrated development environment (IDE) is ready, on the top left side, choose File, select Upload Local Files…, and choose Select folder. While following the Serverless SaaS API integration Deployment Guide, do not clone the resources from the GitHub repository. The package available in GitHub repository doesn’t include the changes for the customization you want to achieve. Use your local files instead.
To view the environment, on the left panel, select the toggletree icon and ensure that the folder is uploaded to the environment. Proceed with the deployment of the Serverless SaaS integration following the remaining steps in the Serverless SaaS API integration Deployment Guide, starting on page 5.

3. Confirm your customization

Go to the AWS Marketplace Management Portal and sign in to your seller account. Update your SaaS listing with the SaaS landing page created from the deployment. To do that, follow the Update fulfillment options steps in the AWS Marketplace seller guide.
After successfully updating your SaaS landing page—also called a fulfillment URL— test your SaaS product to ensure that the API integration has successfully completed by following these steps:
1. Using an allow-listed account, go to your SaaS product page on AWS Marketplace and subscribe to the listing.
2. After subscribing, in the pop-up window, select Set up your account. You will be redirected to the SaaS landing page.
3. You should see the registration page that includes the fields you just added. Enter your company name, contact person, contact phone, email address, country name, and city name. Select Register. The following screenshot shows the updated registration page with the six fields and blue registration button.

Saas LandingPage with two additional customized fields

1. The page displays a Success! message. To verify that your additional fields are included in the DynamoDB table attributes, follow these steps:

1. 1. Log in to the AWS Management Console using your registered seller account.
  2. Navigate to the DynamoDB home page.
  3. In the navigation menu on the left side, select Tables. Search for your table name, which was defined when you launched the serverless SaaS integration previously in step 2- Implementation.
  4. Select the checkbox to the left of the table name, choose Actions, and select Explore items. You should see a table item that contains columns corresponding to the additional fields you added to your SaaS landing page. The following screenshot shows an example DynamoDB table with field columns for customer ID, city name, company name, contact email, contact person, and country name, corresponding to the field names from your SaaS landing page. The city name and country name specifically were the two fields we added as part of the landing page customization.
  5. If you see the two custom field columns, you have demonstrated that the SaaS integration with SaaS landing page fields customization has succeeded. For more about how to test your product, see Successfully testing your SaaS listing in AWS Marketplace.

The following screenshot shows an example DynamoDB table with field columns for customer ID, city name, company name, contact email, contact person, and country name, corresponding to the field names from your SaaS landing page. The circled city name and country name specifically were the two fields we added as part of the landing page customization.

C. Future customization

For any future customization, whether it’s related to a Lambda package or not, you must open your AWS Cloud9 environment and change the shell directory to the folder that contains the files with the necessary changes.
You then deploy the changes by running the following three commands to ensure the updated changes are deployed and applied to the integration setup. This follows the concepts of the continuous integration and continuous deployment (CI/CD) model. Make sure that you use the same S3 bucket and stack as you did in step B.2. Implementation.

sam build
sam package —output-template-file template.yaml —s3-bucket <DEPLOYMENT_S3BUCKET_PLACEHOLDER_VALUE>
sam deploy —template-file template.yaml —stack-name <STACK_NAME> —capabilities CAPABILITY_IAM

Conclusion

In this blog post, we showed how to customize your fulfillment option page for your SaaS product on AWS Marketplace, using the AWS Samples serverless SaaS integration. This tutorial provides you a walkthrough you can follow to achieve the SaaS URL fields customization required to collect the required information from your customers that you need to procure their account in your SaaS application, without needing to directly contact them to request more information. After successfully deploying and testing your custom fulfillment page, you request the AWS Marketplace Operations team to review, test, and publish your product to Public visibility.

About the authors

Lisungu Tresor Lisungu Oteko Tresor is a Technical Account Manager focusing on seller operations for AWS Marketplace and is passionate about Machine Learning applications, Cloud technology, Telecommunications and Cybersecurity. He is currently pursuing his PhD in Electronic and Electrical Engineering at University of Johannesburg. Outside of work, he enjoys playing with his kids, solving Sudoku, and playing chess.

Daniel-Quinn Daniel Quinn is a Support Engineer with the AWS Marketplace Seller Operations team who focuses on support ISVs in getting their SaaS products configured, tested, and listed on AWS Marketplace. He is also a subject matter expert regarding the AWS Marketplace listing process in the GovCloud Regions. Daniel is located in Arlington, VA and enjoys golfing, spending time with family and friends, and rooting for his favorite sports teams.

Tuan Vo

Tuan Vo is a Marketplace Specialist Solutions Architect who focuses on supporting sellers to list their products on AWS Marketplace. He supports large enterprises and public sector customers. Outside of work, Tuan enjoys traveling, trying out new food, and going on walks.

AWS Marketplace