All Collections
Multi-Platform Subscription App (Not for Shopify)
Custom Development & API
How to add an item to a customer cart with javascript or jQuery
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 over a week ago

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. 

Related Articles:

Please let us know if you have any questions.

Sincerely,
The PayWhirl Team

Did this answer your question?