Main / Blog / 
How to Integrate HubSpot Form and PayPal Payments Without Hustle?

How to Integrate HubSpot Form and PayPal Payments Without Hustle?

When you need to collect payments from your website, PayPal button might be the best solution. However, if you need to collect customer information to send to HubSpot form  before the payment, things get a bit complicated.

The following code allows you to redirect your customers to PayPal account after after filling out the HubSpot form.

PayPal Payment Gateway

After the form is submitted, it automatically redirects to your business PayPal page with predefined amount and product name.

PayPal Integration - DepositFix

Here is the complete source code you can use to integrate your HubSpot forms and PayPal Payments:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypalform">
<input type="hidden" name="item_name" value=""/>
<input type="hidden" name="amount" value=""/>
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="cmd" value="_xclick"/>
<input type="hidden" name="custom" value="true"/>
<input type="hidden" name="business" value=""/>
</form>
<div id="hs-form-container"></div>


<script>

   var HubSpotPayPal = {

       init: function (params) {

           HubSpotPayPal.initPayPalForm(params.paypalEmail, params.amount, params.productName);

           hbspt.forms.create({
               portalId: params.hubSpotPortalId,
               formId: params.hubSpotFormId,
               target: "#hs-form-container",
               onFormSubmit: function ($form) {
                   setTimeout(function () {
                       $("#paypalform").submit();
                   }, 10);
                   return false;
               }
           });
       },

       initPayPalForm: function(paypalEmail, amount, productName){

           $("#paypalform [name='business']").val(paypalEmail);
           $("#paypalform [name='amount']").val(amount);
           $("#paypalform [name='item_name']").val(productName);
       }
   }

   HubSpotPayPal.init({
       paypalEmail: "den.lunev@gmail.com",
       amount: "170",
       productName: "My New Product",
       hubSpotPortalId: "2767376",
       hubSpotFormId: "14109ada-6a61-4d63-a1db-430b6ce0926d"
   });

</script>

You just need to update the last part:

   HubSpotPayPal.init({
       paypalEmail: "[Your PayPal business account]",
       amount: "[Amount]",
       productName: "[Name of your product or service]",
       hubSpotPortalId: "[Your HubSpot portal Id]",
       hubSpotFormId: "[Your HubSpot form Id]"
   });

Looking for complete payment solution for HubSpot? Check DepositFix.

Looking to learn more? Check our free PayPal module for HubSpot

Ready to start
accepting payments
with your HubSpot forms?
Start
a Free Trial