Skip to main content

How to add an item to a customer cart with javascript or jQuery

You can add item(s) to customer carts by making a post request to the /add-to-cart url in your customer portal with javascript or jQuery.

Ryan P. avatar
Written by Ryan P.
Updated today

If you would like to build a "custom" cart for customers, without them having to make any selections in a widget, and bypass the first step of the checkout process you can use javascript to add item(s) to customer carts.

This is an advanced feature and will likely require a developer to implement. In general, the process works like this:

  1. The developer would need to add an iframe with our customer portal to their product page. It may be hidden with CSS but the content must be loaded.

  2. Add a tracking script integration, to inject custom JavaScript into our portal.

  3. As documented on https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage, set up an interface between their product page and our portal, to send the add-to-cart request from the portal end, and notify the product page when it's done

 A basic example adding a PLAN to the cart:

<script>
   $.post("[PAYWHIRL-SUBDOMAIN]/add-to-cart",{
        'type'   : "plan",
        'plan_id': 12345,
        'qty'    : 1

   }, function(data){

       //Redirect to Cart
       //<iframe src="[PAYWHIRL-SUBDOMAIN]/cart?gateway=[id]"><iframe>

   });
</script>

A basic example adding a PRODUCT, SERVICE or FEE to the cart:

<script>
   $.post("[PAYWHIRL-SUBDOMAIN]/add-to-cart",{
        'type'   : "product",
        'description': "My cool product",
        'amount' : 5.00,
        'qty'    : 1

   }, function(data){

       //Redirect to Cart
       //<iframe src="[PAYWHIRL-SUBDOMAIN]/cart?gateway=[id]"><iframe>

   });
</script>

Available Keys:

  • plan_id - Plan ID 

  • qty - Quantity 

  • amount - Price of item (optional when adding plans to the cart by id)

  • description - Name of item

  • sku - SKU of item

After you've added items to the cart with javascript or jQuery you will need to redirect the customers to a page on your website with an embedded cart using an iFrame or create a method (button, etc) so customers can access the cart/checkout when they are ready.

NOTE: You can also add items to the cart automatically without coding if you use PRICING TABLE widget(s) with a single item inside and enable the "bypass plan selection screen" setting under chained widget settings in the widget. 

Please let us know if you have any questions.

Sincerely,
The PayWhirl Team

Did this answer your question?