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.

f1


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

f2


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

f3


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

f4


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

f5

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. 

f6

2. Settings


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

Put all credentials here for payment and logo.

f7

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

f8

 

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

f9


Select API Keys menus from the left sidebar.

f9

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

f10

Login with using your secure credentials.

f11


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


f12


Select any previous app or create app.

f13

Copied below sandbox credentials for paypal:

f14

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

f14

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


f15

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.

f16

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

f17

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:

d232

f21

2. Click on edit button:

f22


3. Click on select template button:

f23


4. Search the respective template:

f24

 

f25

5. Click on use template button:

f26


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

f27

7. Set page title and publish the page:

f28


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 .

f29

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


f30

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

f31

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

f32

f33


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

f34

f35

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

f36

Cart

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

f37

Checkout Page 

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

f38

 

f39

After continue shipping information shown.

Payments

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

f40

f41


Fill in the correct card details here and pay.

f42

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

f43

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

 

f44

HubSpot Data

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

f45


Thanks !!

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

f46

These are the authentication templates

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

f47


Click on Website > Private content:

f48


Go To template for set auth pages:

f49


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

f50


Select Sign in template here:

f51


Select password reset request template:

f52

Select password reset template:

f53

Go to general tab for after login page setup:

f54


Set pages for login / logout redirections:

f55


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

f56


Create form with mandatory fields: 

f57


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

f58

Copy embedded code of form:

f59

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

f60


Select new file in lms:

f61

Enter name of template:

f62


Add embedded form in the page:

f63


Go to landing page and create registration request page:

f64

Select register request template in page:

f65


Form shown in page as like below:

f66


Enter register request form and submit:

f67

Show thank you message:

nhgh

After form submission contact has been created in HubSpot"

f68


Create list for email send:

f69


Create list here:

f70

f71

f72


Filter set on form entry in list of contacts:

f73f74


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

f75


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

f76


Click on Manage registration email sending:

f77


Click on resend registration email:

f78

f79

Received email in gmail account:

f79


Click on register button for set password:

f80

After click on register page will redirect to registration page:

f81

Login here:

f82

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

f83

Reset password page:

f21

After enter email and send for reset password request: 
f20

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

f19

f18f18

 

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.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 !!