JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
		<style>
			textarea {
				white-space: pre-line;
			}
			body {
				margin: 20px;
			}			
			.clear-console {
				display: block;
			}
		</style>
		<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>



		<textarea rows="10">Sample Sku's &#13;Gaming: 910-005099 &#13;Gaming: 910-004615 &#13; Sample theme&#13; 4852488000</textarea>
		
		<p>DR auth flow</p>		
		<button class="auth-token">Authorize</button>
		<br>
		<p> Cart operations </p>
		<input type="text" placeholder='sku' id="sku">
		<input type="text" placeholder='themeId' id="themeId">
		
		<input type="text" placeholder='lineItemId' id="lineItemId">
		<input type="text" placeholder='quantity' id="quantity">
		<input type="text" placeholder='action update/add/subtract based on quantity field' id="lineItemAction">
		
		<button class="add-to-cart" >add to cart</button>
		<button class="add-line-item" >add line item</button>
		<button class="get-cart" >get cart entries</button>
		<button class="delete-cart" >delete line item</button>
		
		<br><br>
		<p> View DR cart will work only in the accepted domains, so localhost wont work, for more information see the comments in the method implementation  </p>
		<button class="view-cart" >view DR cart</button> 
		

		
		<br><br>
		<button class="clear-console">clear console</button>
		<textarea id="viewlog" cols="130" rows="40"></textarea>

JavaScript

var sessionTokenUrl = "https://buy.logitech.com/store/logib2c/SessionToken?format=json";
		var secretKey,
		tokenUrl,
		addToCartLink,
		addToCartLineItemLink,
		updateLineItemLink,
		getCartLink,
		deleteLineItemsLink,
		viewCartLink;
		//PROD
		tokenUrl = "https://www.logitech.com/bin/cart/create?action=authorize";
		addToCartLink = "https://www.logitech.com/bin/cart/create?action=updatecart";
		addToCartLineItemLink = "https://www.logitech.com/bin/cart/create?action=updatelineitems";
	   	getCartLink = "https://www.logitech.com/bin/cart/create?action=getcart";
		deleteLineItemsLink = "https://www.logitech.com/bin/cart/create?action=deletelineitems",
		viewCartLink = "https://www.logitech.com/bin/cart/view";
			
		//TEST
		/*tokenUrl = "http://api-cte-ext.digitalriver.com/oauth20/token";
		addToCartLink = "https://api-cte-ext.digitalriver.com/v1/shoppers/me/carts/active?siteSettingAttEnv=DESIGN&format=json";
		addToCartLineItemLink = "https://api-cte-ext.digitalriver.com/v1/shoppers/me/carts/active/line-items?siteSettingAttEnv=DESIGN&format=json"
		updateLineItemLink = "https://api-cte-ext.digitalriver.com/v1/shoppers/me/carts/active/line-items/{{RESPONSE-LineItemID}}/?siteSettingAttEnv=DESIGN&format=json"
		getCartLink = "https://api-cte-ext.digitalriver.com/v1/shoppers/me/carts/active?siteSettingAttEnv=DESIGN&format=json"*/
	
	
		var accessToken;
		
		var sessionToken;
		document.addEventListener('DOMContentLoaded', function(){
			let sessionTokenBtn = document.querySelector('.session-token');
			let authTokenBtn = document.querySelector('.auth-token');
			let addToCartBtn = document.querySelector('.add-to-cart');
			let addLineItemBtn = document.querySelector('.add-line-item');
			let getCartEntriesBtn = document.querySelector('.get-cart');
			let deleteCartBtn = document.querySelector('.delete-cart');
			
			let viewCartBtn = document.querySelector('.view-cart');
			// Fetch session token and then auth token
			authTokenBtn.addEventListener('click',...