How to install Collect and connect HubSpot to Stripe

Here's a walkthrough demo video of how to install Collect and connect it to HubSpot and Stripe. By doing this, your Stripe and HubSpot accounts will be connected to one another.



Connecting Collect to both Stripe and HubSpot, respectively

JAKE: So I've already logged into my account and the first step that I got to do is go into my account and connect it to everything.

So when you first sign up, you start with this 14 day free trial. The yellow banner means that you're in free trial. If it's red that means that your trial has expired and if it's green then that means that you have an account in good standing.

Um so at this point we don't actually need to choose a plan in order for this to work, everything should work within the free trial. So the first step is to connect stripe to Collect and in order to do this we want to get our stripe um secret key.

Now the secret key can be found under developers. I am in test mode right now with stripe um, and then api keys is where you hold both your publishable key and your secret key. So we're going to reveal our secret key -

PAUL: And that's where I went wrong when I first got started with stripe as I tried using the publishable key.

JAKE: Yeah so good note we're going to copy this and bring it over into stripes. I always clear this field out just to be sure um, and then entering the new one. Uh, the reason why this is not visible is uh, this is a security feature. You don't want any buddy to know your secret key and any time you have a website that means that there's a front end capabilities which if we saw these numbers here, that means that hacker on the back end would be able to see those numbers and have access to your stripe account. So that is why we got them out so that nobody can see them save and once we are connected it turns from purple to green so we know that our key is set up there and that's it, that's strike connected,

PAUL: That's it, stripes connecte and what we're assuming there is that the products
are already set up in strike because that's...?

JAKE: Oh, yeah at this point Stripe's already set up, we were already good to go there. So so so stripe right here, stripe is collectors saying who's stripe account to my connecting to. So this secret key is going to give them access to all of this is going to give them access to your customer base, your products, your balances, payments and then the different stripe, a piece that exist, work with all these different features but for the most part we focus on on the product side of things. Once we're done, brilliant, so now hopes for yep, so to connect hubspot uh and I've created a empty hubspot account here, so I'm going to give it authorization. Um This is basically just saying that you're giving collect permission to view the contact records, your website, content, workflows and forms, um this is all stuff that's required in order to build a page and put payments on it connect and I think you need to have the right rights on your hubspot to do that from memory.

Um Yes you have to be an admin or have um certain features within your hubspot settings turned on to allow you to connect apps to hubspot but that's all controlled in the hubspot setting side. So we now have a connected account and if we um yeah so the account is connected turned from purple to green and now we're ready to generate our Collect key. So this key is used within the modules on the page and it's basically the bridge that says yes we've connected stripe, we've connected hubspot both are working and your account is in good standing, so this key will not work if you see a red bar across the page up here, so we're going to generate our key and we've given you a little clip board here to copy that key um where you choose to save, it is up to you uh it is something that we're going to have to reach out for um on more than one occasion, so I like to throw it into a note or somewhere handy where I can just copy it and grab it later for future use, so put that in there and now we're ready to download the modules into our hubspot account.

So um We have multiple modules here, they all do something different but the one that 90% of people are going to use on their pages, the standard card module, this creates a 1 to 1 relationship between one of your stripe products and one of your hubspot pages um so if you're selling seats to a webinar or subscription to something, you're going to use the standard card module. So I'm going to download that. This process can take a few minutes for everything to go into hubspot itself, so where I'm going to go check and see if the download worked in hubspot is in my design tools,

PAUL: I think it's worth mentioning it straight downloads to hubspot, doesn't it? It doesn't download in case there's any doubt you're not download into your desktop and putting into hubspot Straight from collect straight into your hubspot?


JAKE: Yeah, so it's not it's not a file that you you get a folder for in your desktop or anything. Um we can see here we have collected by digital 22 standard card module and when I opened it up here's all that lovely intimidating code gibberish. Um So if you 11 place where there might be errors and errors can occur is if you were to open this up and instead of seeing all of this, you basically just saw one line that said could not find file or could not get or or something to that effect that means that the download didn't work and you should probably pop back in here and try it again


PAUL: If your internet dropped off or something
like that or it's not ready or

JAKE: Yeah, like I said, sometimes, sometimes it takes like five minutes for these things to show up in reportable and sometimes they happen almost instantly. So there's the redirect module and it looks like it worked. So now these modules are ready to use in hubspot pages. Um so at this point you are actually finished with your collect portal. The only thing left to do here is to pop in to choose your plan, and you can go with a monthly plan or an annual plan. Um but as for downloading modules and setting up keys and other things you are done, so moving forward, you obviously need this key and we've saved that in a place, but let's jump into how to add it to a page,

Adding Collect Modules to your HubSpot page

JAKE: I guess if you want, you could stop it and make it two different videos at this point. Um but
so creating a page, we have a theme and collect works with 100% of hubspot themes, so them all to create a page and the module can be dropped in any of these templates. There isn't a specific template that you have to use. It all depends on how you want your page laid out. So, grab the blank here.

PAUL: So when I have my theme in hubspot, there'd be my templates there.

JAKE: Yeah, and the and the module is designed to match your theme design. So when we talk about theme settings and form settings, um you see that the uh card element actually inherits the styling of of your theme. So to find the module we are now in hubspot, you have three categories for modules.

Um because your module is not connected directly to a specific theme, it's actually going to be visible in all modules and the easiest way to find it is to just search for standard card or card.

Um it'll bring this up and then you can you don't you're not searching for collect, you're searching  for the name of the module, you know?

Yeah, so really much. Okay, so too much information in here. Makes the page
look weird. Okay.

All right, so there we go. We've we've added in a module um and it's next some text but you'll notice that the module doesn't actually have anything in it. The first thing we have to enter in here is our api key that we've saved.

So again just grab it from wherever you put it and that part is done. Now again this is telling collect who's stripe account to go searching for. But right here you'll notice that this particular module also wants your stripe PK. Now this is a publishable key.

So popping back into stripe that is the publishable key right here. So uh the one that starts with P. K. We're going to match that up with the straight PK in the module. This is a stripe terminology thing. Again that I struggled with, like I said about the first key my my brain went into strike products for strike peek a book, publishable key so the publishable key and I mean we could probably change the wording of this a little bit to make that um clearer as well and now in the products themselves um we're going to test our monthly subscription.

So again what are we looking for? What does hubspot want? Hubspot wants the stripe price I'd. So we're going to find that in our product and This is where it gets a little bit confusing and this 100% falls on stripe.

Um This is not the product I. D. Um This right here with the little clipboard beside it is our product I. D. So what we're actually looking for is the price A. P. I. I. D. So maybe we need to clarify that a little bit more as well.

Um drop that one into here and I'm not going to add tax, we're not going to go with coupon but if we wanted to um we could enter our tax id from stripe. So if you have a tax rate set up we'll have an I. D. Here you can grab that and put it in place and this will automatically add tax. I'm going to close collect because we don't need it anymore.

Um Same thing with the coupon. If we were going to add a coupon option we just toggle this on and it'll automatically put a coupon field in the form but we don't need to do anything else with that and if we want to collect the billing address or the shipping address we just toggle those switches on and then when a, when it purchases successful you can either redirect them to another page of your website or a different place to proceed to the next step in the transaction or display your thank you message, maybe a call to action or something embedded in here.

Um but just like any stretch hubspot form, you can either redirected to another page or display an in line message so and that is pretty much it for here will apply those changes and if everything worked

We should see $59. That is the value of the product that we grabbed so you can publish the page from there on yep so let's give it a preview.

Yeah, I hope swamping in a new window now because we're in test mode and stripe. I know I can get away with using the um testing card number Which is just a whole bunch of 40 years in a row and then process we have a successful payment. When I go to stripe we have a successful payment when I go to my balances I am where is it? There we go. There we go, I'm rich I just collected money.

PAUL: Brilliant. Thanks a lot, Jake.

JAKE: No problem, thanks.