payment.js to pre-process doodle data

payment.js

function getScreenshot() {
    // Get html for doodle
	var shadowDoodle = document.querySelector('css-doodle').shadowRoot,
		mainDoodle = shadowDoodle.innerHTML,
		introDoodle = $('css-doodle').prop('outerHTML').replace(/\s\s+/g, ' '),
		dataDoodle = introDoodle + mainDoodle;

	// Create a form on the fly and submit it to screenshot generator server
	var doodleForm = document.createElement('form');
	var doodleTitleInput = document.createElement('input'); 
	var doodleCodeInput = document.createElement('input');

	doodleForm.method = 'POST'; 
	doodleForm.action = 'http://localhost:3000/generate'

	doodleTitleInput.name = 'doodle-title';
	doodleTitleInput.value = $('.product-title').attr('data-name');
	doodleForm.appendChild(doodleTitleInput); 

	console.log(introDoodle); 

	// Preprocess introDoodle
	var regexp = /<css-doodle[^>]+>/;
	introDoodle = regexp.exec(introDoodle)[0];

	var containerStyleTag = '<style class="style-container">';
	var trimStartIdx = mainDoodle.indexOf(containerStyleTag) + containerStyleTag.length;
	var trimEndIdx = mainDoodle.indexOf('.container');
	var customStyle = "<style>body { margin: 0; } .container { width: 320px; height: 480px; grid-template-rows: repeat(12, 1fr); grid-template-columns: repeat(8, 1fr); }</style>";

	var processedMainDoodle = introDoodle + mainDoodle.substring(0, trimStartIdx) + mainDoodle.substring(trimEndIdx, mainDoodle.length) + customStyle + '</css-doodle>';
	// console.log(processedMainDoodle); 

	doodleCodeInput.name = 'doodle-code';
	doodleCodeInput.value = processedMainDoodle; 
	doodleForm.appendChild(doodleCodeInput); 

	console.log(processedMainDoodle);

	// return; 

	document.body.appendChild(doodleForm);

	doodleForm.submit(); 
}


document.querySelector('.order_btn').addEventListener('click', function(e) {
	e.preventDefault();
	getScreenshot(); 
});