How to Integrate Payment Gateways into HubSpot Quotes | HubSpot.Extend() 2022

Foreign hi everyone, thank you for joining this session and I hope everyone is having a great day so far. In this session we are going to discuss how we have integrated payment gateways in HubSpot to accept payments using HubSpot codes, HubSpot forms and direct payment links. We will build together a custom payment module, a custom code template and process the payments for quote. We will also discuss serverless functionalities to validate the payment update quote status and create timeline activities for associated objects and for those I haven't met before, My name is Umakan Soma and my pronunciations are he and him. I'm head of Products and partnership at MakeWebBetter and I started my HubSpot journey back in 2015 and since then I have been involved in developing and planning integrations and leading the team of HubSpot developers who are building integrations and teams moving forward with this session agenda as mentioned, our goal is to integrate payment gateways to accept payments using HubSpot codes. We will start with the overview of HubSpot codes for those who are not familiar with the same and then we will discuss why we have to integrate a payment gateway following up with a complete step by step process of integrating PayPal buttons and in this journey we will build together a custom code module, a custom code template and using the custom code template then we will create a customized template to make it available for codes creation. Then we will build together a serverless endpoint and validate the payment update code properties and create update contact and deals. We will discuss the challenges and solve them together with our use case. In the end we will share our framework that integrates with multiple gateways and how developers can build custom code templates and website with collecting payment gateways using HubSpot forms as well as HubSpot CRM card for the payment links. Our framework Pompeii is ready to integrate with any payment gateway and have built in HubSpot integration functionalities to quickly and easily integrate with payment gateways of your choice or based on your client's demand. Let's start with the HubSpot codes so if you have to access the codes you have to go to the sales navigation and this quotes right here. This will open the quotes page and if you have the quotes already created they will be listed right here and if not you will see this result from where you have to create a quote. So by clicking this Create Quote button it will open the Quote wizard, write this and there you will have option to associate with a deal to create a quote. You Must have a deal created so you can select the existing one or you can create a new deal. If you don't have let me select the existing tail of mine HubSpot onboarding and go to the next step here. As you can see we have the code templates as a first choice. Those code templates are the templates created typically by the sales managers to have ready to use templates for the sales teams so that they can simply select the template and it will appear right there. By default. HubSpot provides us three templates. Modern basic and the original one. So and we can have the custom code template created as well. We will discuss about that and we will actually create a custom code template later on. And then we have the code name, this appears from the deal name and if you want you can change it as well. Whatever you will write, it will appear right here. And then we have the domain because this quote is going to be a web URL, web page URL. So all the connected domain will appear here. So you can select which domain you want for your quotes and then the slug. So to identify each of your code this has to be unique and then the expiration date of quotes. And we have some comments to buyer and purchase terms as well. When you hit next here we will have the buyer's information. So my deal already has a contact created. Similarly if you have if you have contacts associated with the deal, all those will appear here and you can have the buyer company as well like this. So you can create a new one or you can have the existing one based on your choice. And you can have multiple buyers associated with a quote. So all the buyers that are associated with the deal will appear here. In the next step the sender information will appear here and then you can have your company information as well. You can change the company information from here or you it it can be auto populated from your company's branding. So let me type the company name right here and you can have all the information right there. In the next step here we have the line items. So all the line items that the deal has will appear right here. And with the more freedom of selecting the billing start date, this can be at payment or the custom one. And then we have the billing frequency one time or the subscription payments based on the monthly, quarterly, semi quarterly and then the quantity and unit pricing for each line item. You can have the discounts percentage discount or the fixed amount discount. And then you can have the multiple line items as well. You can add the line items by selecting from the product library. Or you can create the custom line items for a particular quote. You can actually rearrange those line items as well by simply drag drop like this. And the way you want to appear them in code can depend on this. And then we also have the freedom to add one time discount, one time fee and taxes in the next step. The most important step for us is this. So here we have option to include the signatures and signature can be a space where someone can have the signature or we can use the e signature that HubSpot provides where we can select the buyers and the counter signers and then we have the payment option. In the payment option we have HubSpot payments and Stripe. But the thing is HubSpot payments are only available for the United States for now. And this is what we are going to solve. We are going to let sellers select the payment gateway of their choice worldwide. So at the end we are going to convert this template right here. Let's go to the preview section. So we are going to change this template right here to something similar like this where we will have option to actually have PayPal buttons to accept the payments using the PayPal Gateway right here. So let's move forward how we are going to create this into this. Let me publish this code. After you hit this publish code button, a pop up will appear to let us write the email with this code or copy the link and send it directly. If we click on this write email it will open the deal and then we will have an option to send the quote. We can also create the quotes from the deal view from here in the left side. And if you click on the add button, we will have option directly to select the template. Now if we have to attach the code button, the payment buttons right here to accept the payments from the PayPal, what we have to do is to create a custom code template. Before proceeding with the custom code templates, let's see how we can create the customized code templates. So in HubSpot you have to click on the settings and then the objects and inside the quotes you will have this customized code templates tab. And if you click on the create customized code template you will see those available templates and those are the templates provided by the HubSpot itself. The basic modern original and proposal. So to create a customized code template you have to select any one of those, like let me select the Modern. You can rename this model updated or whatever you want to do. And then you will have, you will have features that are module defined. So all of those the features available here are modules and then you can have the features like for the logo, some settings and you can enable disable those things for particular codes. Okay. Similarly, what we have to do if we want to add to those features of modules, we also need to create a custom module that we will create like this payment. We will create a PayPal payment module right there and we will create with the minimum settings. But those are not the limited. You can go ahead and have all the settings or all the requirements that you want. So let's start with that. To do that let's first check those available templates. So in the Design manager you have the sub spot and then you have the CMS code themes there you have those modules and the templates. So inside the templates you have those basic right here Modern and the original one. So we are going to create the custom template and for that we are going to use the HubSpot CLI and let's start with that. We will start by cloning this CMS code themes into our local and then from there we will make the changes and build this custom code custom code template together. So here I have already initiated and connected with the portal of my choice. You can do this by following the steps of pubspot CLI and now I'm going to clone the folder and let me do it HSFETCH theme and I'm going to do that store it inside the folder of phmpe. You can have any name that you want. It will take some moments, so let me pause in the meantime, once successful you will have the message of this success and then you can see the folder of your name is here. And then you will have the templates available. And you can see all three templates of Basic, Modern and Original are here. But we are going to work with this modern. So let us delete this Basic and original one. And similarly you can check all the modules here as well. So you can keep those module and can reference to the HubSpot provided folder. But I'm going to keep those for now. And let's change this name of this modern and let's make this Modern form payoff. Let me actually change this to once we save this and let me upload this folder using the Watch command folder and marking it as initial upload. It will take some time, so let it upload. Once uploaded you will see the success message right here. And let's go and check inside the Design manager. So let me open the Design manager and let's go and check if templates are available. So you will see this FormPay folder is uploaded and inside the templates we have the modern template right here with the name that we provided. Now let's check if this template is available for the customized code template because that is our end goal. Now we will go and check inside the objects codes. There we have the customized code templates and let's create the one. And here we are. FormPay PayPal is available. So if we choose this we will see all the features of the basic, the modern template are here. Now let's add and we will see all the features of modern templates are here. Now as we see here we have the payments module with all the functionalities. So ideally we will also create a custom module for the PayPal payment. We will start with the no settings for now, but later on you can have your settings and you can keep adding the functionalities to do that we will start by creating a module for that. Let's go to the design manager Again open the FormPay folder here in the modules let's create another module so new file and then let's select the module from here and mark it as quotes module. Let me Name this to PayPal again you can name this to anything. And this will create a module here. Let me label it and make the changes. Okay, now let's clone this module or in our CLI and to do that we have to copy the path of this module. So let me do it. Copy path. Let me clone this now and in the modules we will find our form PayPal module right here. Okay. And you will see the meta file. Meta file. And you will see this meta file with the host template type as code. And in the modules HTML here we are going to add our code. So as we are going to connect with the PayPal we have decided to go with the PayPal buttons integration. And here, this is the code that we are going to use. So let us copy this code and use it right here. Let me put this in module HTML. Yeah, and then we have to change this client id. So let me do it. So I have updated it with the Sandbox client ID and without making any changes as we are going to do it step by step, let's go and check. Let's have a preview of this template right here. So but before doing that we also need to include this module inside the code template. And to do that let's come to the modern HTML file, the code template folder and we are going to remove two of these payments because we are not going to use those payments in our portal right now. And here I'm going to wrap this inside the container class and we can have our custom classes as well. So let me use right here and here we have to include the module, do that again. The same format of module, name of the module and the path. So it has in the modules folder and there we have Pompe PayPal. Okay, now let's go and check in the custom code template if PhonePe PayPal is available. To do that, let's again go to the codes and customize code template. Let's select the FormPay PayPal and here it is. FormPay is available. Okay, and we can see those PayPal buttons are listed over here as well. Now let's again come to our code here. And as you can see, currently the amount value passing static and then the currency is also static at this moment. So now let's make this dynamic. To do that we will go and check inside the layouts, the basis file. And this will give us the idea of how to use the available variables of the code. And as you can see, currently we have the amount static as well as the currency as well. And we can also pass the line items that are associated with this particular quote and deal to make sure the invoice or the details available inside the PayPal correct and have more information right there. And to do that we have to make those things dynamic. But before doing that, we must know what are the data and variables available with the codes that we can access. HubSpot developer documentation for the CMS and the codes has all the variables available. But if you want to do it and check it by yourself, Inside the templates we have the layouts and there we have the base HTML file. Here you can go and check we have the variables available. So most of the variables are available in the template data. And HubSpot also provides us some of the mock data so that we can have the preview. And in case we don't have any the data it can show the preview. We will start by creating a serverless function. To create a serverless function, we need to create a folder with the function suffix. Let's do it. I'm going to name it Formpe. Inside this we have to create two files. One is serverless JSON that is going to have all the variables and other information and we are going to create one JS file. So suppose file payment JS. Now we have this serverless JSON file. Let me add the configuration here. So I have copied this code that we have created earlier. And in this I have created this endpoint of payment complete and this is going to call this PayPal payment JS that has all the logic and the method is going to be the of type post and then we have some client ID and client secret from the PayPal and access token of your HubSpot portal. This access token we have generated private app. And now let's review this PayPal payment code. Here we have to complete two goals. Number one, to validate the payment by checking the quote ID and the second thing is like to update the code. So the variable that we have created, we are going to update it right here. So for that we have used the support library by including the API client. And then we have the PayPal endpoint. And here we are validating the payment and to validate the payment here from our module using our module, what we are doing is we are making a call and in this file we have two goals to achieve. The first goal is to validate the payment and the second goal is to update the code. So validating the so to validate the payment we are using the PayPal library and to make the request with the HubSpot we are using the HubSpot API client, we have this sandbox PayPal and here we are checking by using the quote ID and that we are passing from above module. So in the module to call this serverless function we have to use this library first that we have included here and then on approve whenever the payment is approved, we are calling this making a post request to this endpoint with the order data and inside the quote we have passed this custom ID and invoice id. So this is going to be the quote ID to validate those details. And that's what we are doing in this PayPal payment. So using the quote ID we and and using this transaction ID we are pulling the details, sending that those details to this custom serverless endpoint of type post. And here we are making a request with the PayPal validating those details and then changing the property of code. But currently we have a limitation with the code like any of the published code cannot be changed directly. So we have to first change the status to draft, make the form payment status to paid and then again make it the status of this to approve. Currently we have some issues and the APIs are not available for this. So we have used this rule. But we have endless limitations. I mean we have endless opportunities here. We can create the custom objects like payments or can use the payments object in Future whenever we have the API of those accessibility. Once we complete this we are sending a status code of 200 and then we are making sure to have an alert or we can have the location reload so that after payment the code can be reloaded and then a status of quote is paid can be sold right over there. So this is all done. Let's upload this code, make sure the code is available and then we will move forward and create a code and then complete the payment and see it. All right, let's do it. So now we are done with the code part and let's go and check with the HubSpot design manager here. As we can see the serverless functions are here and our module is created with the template and modules. Now let's go and create a customized code template and make it available for the sales team. So we will go to the settings, objects, codes, customized code template and let's create a template using FormPay PayPal. We will keep the name same and here we have the form PayPal. So let's make it as it is. Let us save this. And now let's go to the quotes and let's create a quote. We will select the same deal of HubSpot onboarding in the templates. We will use the FERMP PayPal and as you can see it's available here right now. Let's name it the PayPal. Let's name it with the PayPal and as you can see in the preview we have the PayPal buttons right here. We will move forward and we have the contact here, the the brine, the seller's information in the line items. If you want to change this or keep this, let's make it 5,000 for now. Let's move forward. No signature and no payments. Because we are using the PayPal payment. We will move ahead and have a preview of this code. And now let me publish this. I will have this link. Let me go ahead and open this. And here it is with the PayPal buttons. Now let me move go ahead and make this purchase. When you Click on this PayPal button it will open a model or can redirect you in another tab based on your browser settings. So if here let me login after login I will see this option right here and you can see the amount that we passed of 5,000 here. And let me go ahead and make the purchase. After the payment is completed you will redirect it back to here. And as you can see the quote is paid as marked here. So yeah, we have completed this process altogether and we have built the custom module custom template. We have integrated with the PayPal and we have marked the quote is paid. Now let's move forward and as this quote is paid let's also go and check in PayPal if those informations like line item, SKU and prices are going there correctly or not. And to do that let's come and review this quotation. This is the PayPal activity of payment and here we can see sip to details right here. The gross amount is here of 5,000. We have the SKUs of marketing enterprise and sales enterprise with the details like market name that we decided, quantity and prices of those line items. Additionally we also have the invoice ID that we are passing as a quote. You can have other invoices if you want to pay and some custom information or customer IDs as well. So yeah, we can clearly verify that all of the information that we are passing from there are dynamically passing here and are correctly captured by PayPal. So as we have completed the process by building together a custom code template, custom payment module and serverless functions to accept payments and log back in CRM. And I hope that everyone enjoyed this process. But to achieve this we need HubSpot's sales enterprise, especially for the serverless function. So we decided to make it available for lower tiers and to save some of the developers time and let them focus to build solutions without reinventing the wheel. For that we have come up with FormPay and it's our framework to integrate any payment gateway to accept payments using HubSpot codes. And we have also added the support for forms and payment links. FormPay is quick and easy way to accept secure payments without worrying about the complex integration processes. With FormPay we have taken care of payment validation by replacing the serverless functionality as well as by providing ready to use custom modules and custom templates so that developers and agencies can reuse them. We have also added support for multiple payment gateways so that in the single quote customer can choose the preferred payment gateway. And with different options as well like payment using form and direct payment links, we are creating custom timeline activities and custom properties for better reporting and automation. And with the FormPay you have ready to use integration available with many of the popular payment gateways like Stripe, Amazon, Pay, add in and PayPal. You can also have the libraries to integrate with any of the payment gateways and we are currently adding the other gateways as well. FormPay has the libraries to take in care and Talk with the HubSpot and the modules available to easily integrate any of the new payment gateways so that agencies and developers can easily build a custom template of their choice by referencing to our payment gateways. Let me show you one of our template that we have created and that is ready to be used by agencies and developers for any of their clients. So this is the one of the template that you can create with formpe and here you can see the most exciting part of having multiple gateways available right here. So for this we have used the source code API to directly upload the custom module and custom template to your design manager. So you don't have to worry about creating the custom template or module. You just have to go and customize the template from the interface. And if you want to change the design, we have used the classes and we have the very good documentation available so the developers can easily customize our templates. Let me also show you the other possibilities of collecting payment on using forms and how you can easily include the form to accept payments using landing pages. Let me show you a quick overview of our FormPay for those who want to integrate and build over our formpay. So once you log in you will see your connected portals right here you can have as many portals as you want to be connected with the FormPay and you can select one of the portal. I've selected this and here you will have this forms and quotes options right here like quotes we already discussed. So I will go ahead and show you one of the form that we have created so we can go and edit the form. And here we will have all the details of the form and the preview of particular form as well. So all the forms that are there with HubSpot will be listed here, all the forms will be listed here and then you can Change the names etc. For the form. And we also have the functionality to accept the donations and some donation related settings like if you want to have the title of the donation and some descriptions you can have your logo and you can give the freedom of having the payments in the memory of someone kind of and the donation button text other, some some other donation features as well if you want to convert any of the form into the donation forms and then the payment settings like the amount that you want to accept and some redirection settings if you don't have in the form. And then here all of the connected payment gateways will appear so you can select and you can have the selected gateways for particular payment gateways and some personalization settings right here in the theme settings. So this is the preview that will appear. This is in the text mode, so we will have the test mode here. You can actually share the URL of this particular payment link or you can embed this into your landing pages or website pages. So let's go ahead and also create a landing page and then embed this code right over there. You can also embed this in any other platforms. But let's go ahead and create with the HubSpot itself. Okay, so let's go ahead and create a landing page. Let me create a landing page right here. Course details. Let me name it or you can name it whatever you want. Let me hit the create page. I'm going to use one of our theme academia. You can have your and then might be the single. You can start from the scratch. So here I want to accept the payment for this particular course and for that I will add the text box here. For now there is text and then right here and let me open the source code for easy view. You can have your preferred methods for this and including this. And let's have a preview. Here it is. You can apply your stylings, whatever you want. And as you can see the form is here with the payment options. We are open for any feedbacks or suggestions for this formpay by any agencies. Thank you so much everyone and looking forward for your feedbacks and any suggestions to make this better. Thanks again.