Steps to install E-commerce app

NOTE: Please use Canadian or american stripe/paypal account for acceptance of clients payment.

Marketplace

Go to Marketplace -> E-commerce for HubSpot

1. Installation

Goto App Marketplace and search for the app.click on connect now button.User will be redirected to the below page.

Click on the login button to open the login page and then do the login.

After Successful login User will be redirected to the all apps page of webdew.

Click on the pay button to buy the app and install it into your hubspot portal.The user has to pay 29 dollars.

After Payment, the user will be asked to select the portal in which he/she wants to install the app.

After Successful Installation User needs to do the settings for the app.

click on Ecommerce Settings by clicking on APPS > Ecommerce >Settings or Installed button shown in the ecommerce card.

Now You can install this app into multiple portals. Please check the screenshot below. 

2. Settings

Select  Apps in the sidebar and then  select Ecommerce > settings as shown below

Put all credentials here for payment and logo.

Where you can get stripe keys, please follow below steps :

You have to login or sign up if you do not have an account.
Go to : https://dashboard.stripe.com/login

 

After login stripe account, please open this link https://dashboard.stripe.com/test/developers for API keys.

Select API Keys menus from the left sidebar.

For Paypal Client ID : 

You have to login paypal developer account or sign up if you do not have account: 

https://developer.paypal.com/home/

Click on Log in to Dashboard

Login with using your secure credentials.

After login below window will be shown. Select on “My Apps & Credentials”:

Select any previous app or create app.

Copied below sandbox credentials for paypal:

Copied above keys and paste on settings please check now below further steps:

Stripe PK and Stripe SK fields are used to set stripe payment gateway in your app.Add “Publishable key” and “Secret key” in these fields provided by users stripe account.

Paypal field is used to set paypal payment gateway in your app.Add the API key for paypal account in this field for your e-commerce app.

Logo link field is used to set your e-commerce app logo in header .You can use your company logo for an e-commerce app by uploading the logo image in files in your HubSpot account then copy that image public link and paste it here.

3. Sync

After setting click on Sync Data on top right as shown below in  screenshot. Click Sync Cart Link and create Product Image field in products of hubspot account.

Click on Sync Cart link button to create product image field in your products available in your HubSpot account.

Sync takes some time for processing.

4. Templates

Seven templates will be created in design tools after installing the e-commerce app.

• Products
• Cart
• Product_detail
• Checkout
• Thankyou
• orderList
• Invoice

5. Pages

With Seven Templates seven landing pages will also get generated .User has to edit the page and use the respective templates.

1. Go to landing page option from marketing dropdown menu:

2. Click on edit button:

3. Click on select template button:

4. Search the respective template:

 

5. Click on use template button:

6. User needs to set page title before publishing the page:

7. Set page title and publish the page:

Note: Set your page titles the same as template names.

Title for the Product_detail template will be product_detail. 

Title for the Products page will be products. 

Title for the checkout page will be checkout.

Title for the Cart page will be cart.

Title for the thank_you page will be thank_you.

Title for the invoice page will be invoice.

Title for the orderList page will be orderList.

 

6. Turn Password protection on 

For pages like invoice and order list user must add password protection while creating the page .

Now these pages will be accessed only by registered users . 

7. Products

Adding Images in Files to use it in products and for Logo

• Go to Marketing->Files and templates -> Files

• Now click on upload files button to add images

• After uploading the images copy the public url to use it in products

• Go to Products library ,open any product and find property “Product Image” which has been created during sync data.

After setting all product images and setting logo image in webdew setting page, you are now good to go to use the app.

NOTE: Currently E-commerce app accepts only dollar format price.It could be any dollar AUD,Ca or American dollar.

for eg :product price will be $ 120.

Initially open the Products page and here user will see all its products available in HubSpot account

Products

User can add products to cart by clicking on add to cart button and view details of that particular product by clicking on view details button

Product Details

Cart

After clicking on the view cart button the page below will be opened.

Checkout Page 

After clicking on the checkout button below the page will be shown. Click continue after filling all required field.

 

After continue shipping information shown.

Payments

Stripe payment gateway implemented for cards and paypal for direct account.

Fill in the correct card details here and pay.

If you want to pay with paypal then the below screen will be shown.

After payment successfully done you will be redirected to thank you page

 

HubSpot Data

After payment contacts, deals and line items have been generated on the hubspot account.

Thanks !!

For the registration process users can follow the below steps.
Membership login and register in HubSpot : 

These are the authentication templates

Setting this template go to gear button in top right corner:

Click on Website > Private content:

Go To template for set auth pages:

Find register page into dropdown and set. If you want to set registration email then you can create also:

Select Sign in template here:

Select password reset request template:

Select password reset template:

Go to general tab for after login page setup:

Set pages for login / logout redirections:

After above setting please go to forms for create register request HubSpot form:

Create form with mandatory fields: 

Take hidden field with form_entry property in contacts and set default value 1. This will help in list filtration:

Copy embedded code of form:

Go to the inside lms project and create a new file as a register request page template:

Select new file in lms:

Enter name of template:

Add embedded form in the page:

Go to landing page and create registration request page:

Select register request template in page:

Form shown in page as like below:

Enter register request form and submit:

Show thank you message:

After form submission contact has been created in HubSpot"

Create list for email send:

Create list here:

Filter set on form entry in list of contacts:

After check the list then shown contact here and click on that contact for sending request:

Go to right side in list memberships and click on manage:

Click on Manage registration email sending:

Click on resend registration email:

Received email in gmail account:

Click on register button for set password:

After click on register page will redirect to registration page:

Login here:

If you will forgot password then click on forgot you password and reset your password:

Reset password page:

After enter email and send for reset password request: 

After login which page you have set in website settings will working here.

 

E-commerce app Release Notes

Release notes are displayed in descending order from the most recent release to the oldest. Known Issues are listed with the most recent release.

Version 2.0.2 Release

Released April 2023.

New And Noteworthy

1. Email notification.

Changes In Functionality

1. The users will be notified of the installation and cancellation of the application.
2. The users will get an email before the renewal of the application.

Closed Issues

There are no Closed Issues in this release.

Version 2.0.1 Release

Released March 2022.

New And Noteworthy

1. New Dashboard is installed for the User interface.
2. The check box option has been removed. Now users can directly select the portal on which the app is installed.

Changes In Functionality

We have created a new workflow for new & existing users.

1. Payment is now subscription-based. It can be monthly or yearly. There are coupons with promotion codes also available for the new user.
2. Payment Successful, Cancelation, Renewal Receipt Emails are automatically sent to each user who has installed the app.
3. The payment is non-refundable.

Closed Issues

1. There are no Closed Issues in this release.

Thanks !!