{"id":1984,"date":"2024-11-16T07:45:22","date_gmt":"2024-11-16T07:45:22","guid":{"rendered":"https:\/\/samyakonline.biz\/blog\/?p=1984"},"modified":"2024-11-16T10:07:11","modified_gmt":"2024-11-16T10:07:11","slug":"bigcommerce-rest-storefront-api","status":"publish","type":"post","link":"https:\/\/samyakonline.biz\/blog\/bigcommerce-rest-storefront-api.html","title":{"rendered":"What is BigCommerce REST Storefront API? Key Features and Case Study of BigCommerce REST Storefront API?"},"content":{"rendered":"<p>The <strong>BigCommerce REST Storefront API<\/strong> is a powerful tool that allows developers to interact with and manage various aspects of an online store&#8217;s front end. This API is handy for customizing the shopping experience, managing carts and checkouts, and integrating additional functionalities into <a href=\"https:\/\/samyakonline.biz\/ecommerce\/bigcommerce-development-design.html\">BigCommerce-hosted storefronts.<\/a><\/p>\n<h2 class=\"wp-block-heading\">BigCommerce REST Storefront API Key Features<\/h2>\n<ul class=\"wp-block-list\">\n<li><strong>Cart Management:<\/strong> \u00a0 The REST Storefront API enables developers to manage the contents of a shopper&#8217;s cart using JavaScript.This includes adding, updating, and removing items from the cart.\u00a0 Example: Adding an item to the cart programmatically from a Stencil storefront.<\/li>\n<li><strong>Checkout Process:<\/strong>\u00a0 The API provides endpoints to handle the checkout process, including updating billing and shipping addresses, applying discounts, and processing payments.\u00a0 Example: Updating the billing address during checkout to ensure accurate order processing.<\/li>\n<li><strong>Order Management: <\/strong>Developers can retrieve and display order information to customers, such as recent orders and order status. Example: Displaying a customer&#8217;s recent order details on their account page.<\/li>\n<li><strong>Customization and Integration:<\/strong> The REST Storefront API allows for extensive customization of the storefront, enabling developers to create unique shopping experiences tailored to their brand&#8217;s needs.\u00a0 Example: Integrating third-party services or custom features directly into the storefront.<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\">Case Study: Using BigCommerce REST Storefront API to Manage COD Payment Method Based on Cart Amount<\/h2>\n<p><strong>Introduction:<\/strong><br \/>\nA business used the BigCommerce REST Storefront API to properly manage the availability of the Cash on Delivery (COD) payment method based on the cart amount. Specifically, the goal was to allow the COD option for orders that were above \u20b95000. The following is a case study to break down how we helped them do it.<\/p>\n<p><strong>Objectives:<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li>Our main aim was to reduce the risk associated with low-value COD orders.<\/li>\n<li>We wanted to automatically adjust the available payment methods based on cart value to better the user experience.<\/li>\n<li>We wanted to make sure customers are presented with appropriate payment options to smoothen the user experience.<\/li>\n<li>We streamlined the payment method management, thus reducing manual intervention.<\/li>\n<\/ul>\n<p><strong>Implementation Process:<\/strong><\/p>\n<p>We used the <strong>Fetch API<\/strong> to interact with the REST Storefront API and retrieve a shopper&#8217;s cart, checkout details, or order information.<\/p>\n<pre class=\"wp-block-code\"><code>  let cart = '\/api\/storefront\/carts\/';\n \n   \/\/ Fetch API to get cart details\n    fetch(cart)\n    .then((res) =&gt; res.json())\n    .then((cart_details)=&gt;{\n     console.log('cart details \\n'); \n     console.log(cart_details);\n     console.log('cart amount \\n'); \n     console.log(cart_details[0].cartAmount);\n     var cart_amount = cart_details[0].cartAmount;<\/code><\/pre>\n<p><strong>Logic to Hide COD Payment Method When Cart amount is greater than 5K<\/strong><\/p>\n<pre class=\"wp-block-code\"><code> if ((cart_amount &gt; 5000)) {\n                    console.log('Product price is greater than 5K');\n                    \/\/ 1. Selector for Credit Card and let it be there\n                         \/\/myselector[0].classList.add(\"hide\");\n                         \/\/myselector[0].style.display = \"none\";\n\n                    \/\/ 2. Selector for GPay and and let it be there\n                         \/\/myselector[1].classList.add(\"hide\");\n                         \/\/myselector[1].style.display = \"none\";\n\n\n                    \/\/ 3. Selector for Cash on Delivery and hide it\n                        \/\/myselector[2].classList.add(\"hide\");\n                        myselector[2].style.display = \"none\";\n\n       }<\/code><\/pre>\n<p>Source: <a href=\"https:\/\/developer.bigcommerce.com\/docs\/storefront\/cart-checkout\/guide\/rest-management\" rel=\"nofollow noopener\" target=\"_blank\">BigCommerce REST Storefront cart and checkout API<\/a><\/p>\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n<p>By <strong>leveraging the BigCommerce REST Storefront API<\/strong>, the business successfully implemented a dynamic system to manage payment methods based on cart value. This improved security and user experience while also streamlining the checkout process, ensuring customers had access to suitable payment options.<\/p>\n<p><strong>About the Author:<\/strong><br \/>\nSubhash Jain is a BigCommerce expert leading a team that harnesses the power of BigCommerce API. <a href=\"https:\/\/samyakonline.biz\/request-quote.html\">Contact today to get services on how to leverage the Storefront API for your BigCommerce store.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The BigCommerce REST Storefront API is a powerful tool that allows developers to interact with and manage various aspects of an online store&#8217;s front end. This API is handy for customizing the shopping experience, managing carts and checkouts, and integrating additional functionalities into BigCommerce-hosted storefronts. BigCommerce REST Storefront API Key Features Cart Management: \u00a0 The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1996,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[6],"tags":[],"class_list":["post-1984","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bigcommerce"],"modified_by":"Anil","_links":{"self":[{"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/posts\/1984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/comments?post=1984"}],"version-history":[{"count":0,"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/posts\/1984\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/media\/1996"}],"wp:attachment":[{"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/media?parent=1984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/categories?post=1984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/samyakonline.biz\/blog\/wp-json\/wp\/v2\/tags?post=1984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}