wiki-plugin-shoppe 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-plugin-shoppe",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Multi-tenant digital goods shoppe for federated wiki, powered by Sanora",
   "keywords": [
     "wiki",

package/server/server.js

@@ -9,6 +9,19 @@ const sessionless = require('sessionless-node');
 
 const SHOPPE_BASE_EMOJI = process.env.SHOPPE_BASE_EMOJI || '🛍️🎨🎁';
 
+const TEMPLATES_DIR = path.join(__dirname, 'templates');
+const RECOVER_STRIPE_TMPL = fs.readFileSync(path.join(TEMPLATES_DIR, 'generic-recover-stripe.html'), 'utf8');
+const ADDRESS_STRIPE_TMPL = fs.readFileSync(path.join(TEMPLATES_DIR, 'generic-address-stripe.html'), 'utf8');
+
+function getAllyabaseOrigin() {
+  try { return new URL(getSanoraUrl()).origin; } catch { return getSanoraUrl(); }
+}
+
+function fillTemplate(tmpl, vars) {
+  return Object.entries(vars).reduce((html, [k, v]) =>
+    html.replace(new RegExp(`\\{\\{${k}\\}\\}`, 'g'), v), tmpl);
+}
+
 const DATA_DIR     = path.join(process.env.HOME || '/root', '.shoppe');
 const TENANTS_FILE = path.join(DATA_DIR, 'tenants.json');
 const CONFIG_FILE  = path.join(DATA_DIR, 'config.json');
@@ -681,7 +694,13 @@ async function getShoppeGoods(tenant) {
       image: product.image ? `${getSanoraUrl()}/images/${product.image}` : null,
       url: isPost
         ? `/plugin/shoppe/${tenant.uuid}/post/${encodeURIComponent(title)}`
-        : `${getSanoraUrl()}/products/${tenant.uuid}/${encodeURIComponent(title)}`
+        : product.category === 'book'
+          ? `/plugin/shoppe/${tenant.uuid}/buy/${encodeURIComponent(title)}`
+          : product.category === 'product' && product.shipping > 0
+            ? `/plugin/shoppe/${tenant.uuid}/buy/${encodeURIComponent(title)}/address`
+            : product.category === 'product'
+              ? `/plugin/shoppe/${tenant.uuid}/buy/${encodeURIComponent(title)}`
+              : `${getSanoraUrl()}/products/${tenant.uuid}/${encodeURIComponent(title)}`
     };
     const CATEGORY_BUCKET = { book: 'books', music: 'music', post: 'posts', 'post-series': 'posts', album: 'albums', product: 'products' };
     const bucket = goods[CATEGORY_BUCKET[product.category]];
@@ -702,7 +721,7 @@ function renderCards(items, category) {
       ? `<div class="card-img"><img src="${item.image}" alt="" loading="lazy"></div>`
       : `<div class="card-img-placeholder">${CATEGORY_EMOJI[category] || '🎁'}</div>`;
     const priceHtml = (item.price > 0 || category === 'product')
-      ? `<div class="price">$${item.price}${item.shipping ? ` <span class="shipping">+ $${item.shipping} shipping</span>` : ''}</div>`
+      ? `<div class="price">$${(item.price / 100).toFixed(2)}${item.shipping ? ` <span class="shipping">+ $${(item.shipping / 100).toFixed(2)} shipping</span>` : ''}</div>`
       : '';
     return `
       <div class="card" onclick="window.open('${item.url}','_blank')">
@@ -926,6 +945,54 @@ async function startServer(params) {
     res.json({ success: true });
   });
 
+  // Purchase pages — shoppe-hosted versions of the Sanora payment templates
+  async function renderPurchasePage(req, res, templateHtml) {
+    try {
+      const tenant = getTenantByIdentifier(req.params.identifier);
+      if (!tenant) return res.status(404).send('<h1>Shoppe not found</h1>');
+
+      const title = decodeURIComponent(req.params.title);
+      const sanoraUrl = getSanoraUrl();
+      const productsResp = await fetch(`${sanoraUrl}/products/${tenant.uuid}`);
+      const products = await productsResp.json();
+      const product = products[title] || Object.values(products).find(p => p.title === title);
+      if (!product) return res.status(404).send('<h1>Product not found</h1>');
+
+      const imageUrl = product.image ? `${sanoraUrl}/images/${product.image}` : '';
+      const ebookUrl = `${sanoraUrl}/products/${tenant.uuid}/${encodeURIComponent(title)}/ebook-download`;
+      const shoppeUrl = `${req.protocol}://${req.get('host')}/plugin/shoppe/${tenant.uuid}`;
+
+      const html = fillTemplate(templateHtml, {
+        title:           product.title || title,
+        description:     product.description || '',
+        image:           `"${imageUrl}"`,
+        amount:          String(product.price || 0),
+        formattedAmount: ((product.price || 0) / 100).toFixed(2),
+        productId:       product.productId || '',
+        pubKey:          '',
+        signature:       '',
+        sanoraUrl,
+        allyabaseOrigin: getAllyabaseOrigin(),
+        ebookUrl,
+        shoppeUrl
+      });
+
+      res.set('Content-Type', 'text/html');
+      res.send(html);
+    } catch (err) {
+      console.error('[shoppe] purchase page error:', err);
+      res.status(500).send(`<h1>Error</h1><p>${err.message}</p>`);
+    }
+  }
+
+  // Books + no-shipping products → recovery key + stripe
+  app.get('/plugin/shoppe/:identifier/buy/:title', (req, res) =>
+    renderPurchasePage(req, res, RECOVER_STRIPE_TMPL));
+
+  // Physical products with shipping → address + stripe
+  app.get('/plugin/shoppe/:identifier/buy/:title/address', (req, res) =>
+    renderPurchasePage(req, res, ADDRESS_STRIPE_TMPL));
+
   // Post reader — fetches markdown from Sanora and renders it as HTML
   app.get('/plugin/shoppe/:identifier/post/:title', async (req, res) => {
     try {

package/server/templates/generic-address-stripe.html

@@ -0,0 +1,572 @@
+<!doctype html>
+<html>
+<head>
+  <script src="https://js.stripe.com/v3/"></script>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=1.00, minimum-scale=1.00">
+
+  <!--these are the tags that create the web preview card. You can use og:, or twitter: tags or both-->
+  <meta name="twitter:title" content="{{title}}">
+  <meta name="description" content="{{description}}">
+  <meta name="twitter:description" content="{{description}}">
+  <meta name="twitter:image" content={{image}}>
+
+  <meta name="og:title" content="{{title}}">
+  <meta name="og:description" content="{{description}}">
+  <meta name="og:image" content={{image}}>
+
+  <title>{{title}}</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; height: 100vh; overflow: hidden; background: #0f0f12;">
+<div id="main-container" style="
+  width: 100vw; 
+  height: 100vh; 
+  display: flex; 
+  overflow: hidden;
+  flex-direction: row;
+">
+  <!-- Product Section -->
+  <div id="product-section" style="
+    flex: 1; 
+    display: flex; 
+    flex-direction: column; 
+    justify-content: center; 
+    align-items: center; 
+    padding: 20px; 
+    box-sizing: border-box;
+    min-height: 0;
+    overflow: hidden;
+  ">
+    <teleport pubKey="{{pubKey}}" signature="{{signature}}" message="{{title}}{{description}}{{amount}}" spell="sanora-club" amount="{{amount}}">
+    <div style="width: 100%; max-width: 500px; text-align: center; color: white;">
+      <img id="product-image" style="width: 100%; height: auto; max-height: 40vh; object-fit: contain; border-radius: 8px;"></img>
+      <script type="text/javascript">
+        document.getElementById('product-image').src = {{image}};
+      </script>
+      <h2 style="margin: 20px 0 10px 0; font-size: clamp(1.2rem, 4vw, 2rem);">{{title}}</h2>
+      <h4 style="margin: 10px 0; opacity: 0.8; font-weight: normal; font-size: clamp(0.9rem, 2.5vw, 1.1rem);">{{description}}</h4>
+    </div>
+    </teleport>
+  </div>
+
+  <!-- Forms Section -->
+  <div id="forms-section" style="
+    flex: 1; 
+    display: flex; 
+    flex-direction: column; 
+    justify-content: center; 
+    align-items: center; 
+    padding: 20px; 
+    box-sizing: border-box;
+    min-height: 0;
+    overflow: auto;
+  ">
+    <div id="address-form" style="width: 100%; max-width: 500px; margin-bottom: 20px;"></div>
+    
+    <form id="payment-form" class="payment-form" style="
+      width: 100%; 
+      max-width: 500px; 
+      background: #2a2a2e; 
+      padding: 20px; 
+      border-radius: 15px; 
+      border: 1px solid #444;
+      display: none;
+    ">
+        <div id="payment-element" style="margin-bottom: 20px;"></div>
+        <button id="submit-button" style="
+          width: 100%; 
+          padding: 15px; 
+          background: linear-gradient(90deg, green, purple); 
+          color: white; 
+          border: none; 
+          border-radius: 22.5px; 
+          font-size: 16px; 
+          font-weight: bold; 
+          cursor: pointer;
+        ">Pay now</button>
+        <div id="error-message" class="error-message" style="display: none; color: #ff6b6b; margin-top: 10px; text-align: center;"></div>
+        <div id="loading" class="loading" style="display: none; color: white; margin-top: 10px; text-align: center;">Processing payment...</div>
+    </form>
+  </div>
+</div>
+
+<script type="text/javascript">
+  // Responsive layout logic
+  function updateLayout() {
+    const mainContainer = document.getElementById('main-container');
+    const productSection = document.getElementById('product-section');
+    const formsSection = document.getElementById('forms-section');
+    
+    if (window.innerWidth > window.innerHeight) {
+      // Landscape: side by side
+      mainContainer.style.flexDirection = 'row';
+      productSection.style.flex = '1';
+      formsSection.style.flex = '1';
+      mainContainer.style.overflow = 'hidden';
+    } else {
+      // Portrait: vertical layout, always show 2 elements
+      mainContainer.style.flexDirection = 'column';
+      productSection.style.flex = '1';
+      formsSection.style.flex = '1';
+      mainContainer.style.overflow = 'hidden';
+    }
+  }
+
+  // Initial layout
+  updateLayout();
+  
+  // Update on resize
+  window.addEventListener('resize', updateLayout);
+</script>
+
+<script type="text/javascript">
+  (function(window) {
+    'use strict';
+
+    function calculateFormHeight(formConfig) {
+      const fieldCount = Object.keys(formConfig).filter(key => key !== 'form').length;
+      const headerHeight = 85;           
+      const fieldHeight = 70;            
+      const submitButtonHeight = 45;     
+      const bottomPadding = 30;          
+      
+      return headerHeight + (fieldCount * fieldHeight) + submitButtonHeight + bottomPadding;
+    }
+
+    function getBackgroundAndGradients(formConfig) {
+      const dynamicHeight = calculateFormHeight(formConfig);
+
+      const svg = `<rect width="500" height="${dynamicHeight}" fill="transparent"/>
+      
+      <!-- Form Container with Metallic Background -->
+      <linearGradient id="metallicBackground" x1="0%" y1="0%" x2="100%" y2="100%">
+	<stop offset="0%" stop-color="#2a2a2e"/>
+	<stop offset="50%" stop-color="#323236"/>
+	<stop offset="100%" stop-color="#2a2a2e"/>
+      </linearGradient>
+      <rect x="50" y="50" width="400" height="${dynamicHeight}" rx="15" fill="url(#metallicBackground)" 
+	stroke="#444" stroke-width="1"/>
+      
+      <!-- Subtle Metallic Highlight -->
+      <line x1="51" y1="52" x2="449" y2="52" stroke="#555" stroke-width="1" opacity="0.5"/>
+      
+      <!-- Form Header -->
+      <text x="250" y="85" font-family="Arial, sans-serif" font-size="24" font-weight="bold" 
+	fill="#ffffff" text-anchor="middle">US SHIPPING ADDRESS</text>
+      
+      <!-- Define the gradient for active input borders -->
+      <linearGradient id="inputGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+	<stop offset="0%" stop-color="purple"/>
+	<stop offset="100%" stop-color="green"/>
+      </linearGradient>
+      
+      <!-- Button Gradient -->
+      <linearGradient id="buttonGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+	<stop id="submitButtonGradientStart" offset="0%" stop-color="green"/>
+	<stop id="submitButtonGradientEnd" offset="100%" stop-color="purple"/>
+      </linearGradient>
+
+      <linearGradient id="buttonPressedGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+	<stop offset="0%" stop-color="purple"/>
+	<stop offset="100%" stop-color="green"/>
+      </linearGradient>`;
+
+      return svg;
+    }
+
+    function getSegmentedSelector(x, y, text, options) {
+      const borderId = `${text.replace(/\s+/g, '')}Border`;
+      const selectorId = `${text.replace(/\s+/g, '')}Selector`;
+      
+      const segmentWidth = 340 / options.length;
+      
+      let segments = '';
+      let segmentTexts = '';
+      
+      options.forEach((option, index) => {
+        const segmentX = x + (index * segmentWidth);
+        const segmentId = `${selectorId}_${index}`;
+        
+        segments += `<rect id="${segmentId}" x="${segmentX}" y="${y + 10}" width="${segmentWidth}" height="40" rx="${index === 0 ? '8 0 0 8' : index === options.length - 1 ? '0 8 8 0' : '0'}" fill="#1c1c20" stroke="#444" stroke-width="1" style="cursor: pointer;" data-option="${option}" data-selected="false"/>`;
+        
+        segmentTexts += `<text x="${segmentX + segmentWidth/2}" y="${y + 33}" font-family="Arial, sans-serif" font-size="14" fill="#bbbbbb" text-anchor="middle" style="pointer-events: none;">${option}</text>`;
+      });
+
+      const svg = `<text x="${x}" y="${y}" font-family="Arial, sans-serif" font-size="14" fill="#bbbbbb">${text}</text>
+        <!-- Segmented Container -->
+        <rect id="${borderId}" x="${x}" y="${y + 10}" width="340" height="40" rx="8" fill="transparent" stroke="#444" stroke-width="2"/>
+        ${segments}
+        ${segmentTexts}
+        <!-- Hidden input to store value -->
+        <foreignObject x="${x}" y="${y + 55}" width="1" height="1" style="overflow: hidden;">
+          <input xmlns="http://www.w3.org/1999/xhtml" id="${selectorId}" type="hidden" data-field="${text}"/>
+        </foreignObject>`;
+
+      return svg;
+    }
+
+    function getInput(x, y, text, inputType) {
+      const borderId = `${text.replace(/\s+/g, '')}Border`;
+      const inputId = `${text.replace(/\s+/g, '')}Input`;
+
+      const svg = `<text x="${x}" y="${y}" font-family="Arial, sans-serif" font-size="14" fill="#bbbbbb">${text}</text>
+	<!-- Field Background -->
+	<rect id="${borderId}" x="${x}" y="${y + 10}" width="340" height="40" rx="8" fill="#1c1c20" 
+	      stroke="#444" stroke-width="2" class="input-field"/>
+	<!-- Inset shadow effect -->
+	<rect x="${x + 2}" y="${y + 12}" width="336" height="36" rx="6" fill="none" 
+	      stroke="#000" stroke-width="1" opacity="0.3"/>
+	<!-- HTML Input Field -->
+	<foreignObject x="${x + 5}" y="${y + 15}" width="330" height="30">
+	  <input xmlns="http://www.w3.org/1999/xhtml" id="${inputId}" type="text" placeholder="Enter ${text.toLowerCase()}" data-field="${text}" spellcheck="false" style="width:100%; height: 100%; background-color: transparent; color: white; border: none; outline: none; padding: 8px 12px; font-size: 14px; font-family: Arial, sans-serif; border-radius: 6px;"/>
+	</foreignObject>`;
+
+      return svg;
+    }
+
+    function getSubmitButton(x, y) {
+      return `<rect id="submitButton" x="${x}" y="${y}" width="300" height="45" rx="22.5" fill="#666666" style="cursor: not-allowed;">
+	  </rect>
+	  <text x="${x + 150}" y="${y + 28}" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#999999" text-anchor="middle" dominant-baseline="middle" style="pointer-events: none;">SUBMIT</text>
+      `;
+    }
+
+    function enableSubmitButton() {
+      const submitButton = document.getElementById('submitButton');
+      const submitButtonText = submitButton.nextElementSibling;
+      
+      submitButton.setAttribute('fill', 'url(#buttonGradient)');
+      submitButton.setAttribute('style', 'cursor: pointer;');
+      submitButtonText.setAttribute('fill', 'white');
+    }
+
+    function disableSubmitButton() {
+      const submitButton = document.getElementById('submitButton');
+      const submitButtonText = submitButton.nextElementSibling;
+      
+      submitButton.setAttribute('fill', '#666666');
+      submitButton.setAttribute('style', 'cursor: not-allowed;');
+      submitButtonText.setAttribute('fill', '#999999');
+    }
+
+    function validateForm(formJSON) {
+      const requiredFields = Object.keys(formJSON).filter(key => 
+        key !== 'form' && formJSON[key].required
+      );
+      
+      const allValid = requiredFields.every(key => {
+        const fieldConfig = formJSON[key];
+        
+        if (fieldConfig.type === 'segmented') {
+          const selectorId = `${key.replace(/\s+/g, '')}Selector`;
+          const selector = document.getElementById(selectorId);
+          return selector && selector.value && selector.value.trim() !== '';
+        } else {
+          const inputId = `${key.replace(/\s+/g, '')}Input`;
+          const input = document.getElementById(inputId);
+          return input && input.value && input.value.trim() !== '';
+        }
+      });
+      
+      if (allValid) {
+        enableSubmitButton();
+      } else {
+        disableSubmitButton();
+      }
+      
+      return allValid;
+    }
+
+    function getForm(formJSON, onSubmit) {
+      const keys = Object.keys(formJSON);
+      const inputs = keys.map((key, index) => {
+        if (key === "form") return '';
+        
+        const fieldConfig = formJSON[key];
+        if (fieldConfig.type === 'segmented') {
+          return getSegmentedSelector(80, 70 * index + 130, key, fieldConfig.options);
+        } else {
+          return getInput(80, 70 * index + 130, key, fieldConfig.type);
+        }
+      });
+      
+      const svg = getBackgroundAndGradients(formJSON) + inputs.join('') + getSubmitButton(100, 70 * (keys.length) + 130);
+
+      const dynamicHeight = calculateFormHeight(formJSON);
+
+      const container = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      container.setAttribute('viewBox', `0 0 500 ${dynamicHeight + 100}`);
+      container.setAttribute('width', '100%');
+      container.setAttribute('height', 'auto');
+      container.innerHTML = svg;
+
+      setTimeout(() => {
+	Object.keys(formJSON).forEach((key, index) => {
+	  if(key === 'form') {
+	    return;
+	  }
+
+	  const fieldConfig = formJSON[key];
+	  const borderId = `${key.replace(/\s+/g, '')}Border`;
+	  
+	  if (fieldConfig.type === 'segmented') {
+	    const selectorId = `${key.replace(/\s+/g, '')}Selector`;
+	    const selector = document.getElementById(selectorId);
+	    
+	    // Add click handlers for segments
+	    fieldConfig.options.forEach((option, optionIndex) => {
+	      const segmentId = `${selectorId}_${optionIndex}`;
+	      const segment = document.getElementById(segmentId);
+	      
+	      if (segment) {
+	        segment.addEventListener('click', () => {
+	          // Clear all segments
+	          fieldConfig.options.forEach((_, clearIndex) => {
+	            const clearSegmentId = `${selectorId}_${clearIndex}`;
+	            const clearSegment = document.getElementById(clearSegmentId);
+	            if (clearSegment) {
+	              clearSegment.setAttribute('fill', '#1c1c20');
+	              clearSegment.setAttribute('data-selected', 'false');
+	            }
+	          });
+	          
+	          // Select clicked segment
+	          segment.setAttribute('fill', '#3eda82');
+	          segment.setAttribute('data-selected', 'true');
+	          
+	          // Update hidden input value
+	          if (selector) {
+	            selector.value = option;
+	          }
+	          
+	          // Update border
+	          const borderElement = document.getElementById(borderId);
+	          if (borderElement) {
+	            borderElement.setAttribute('stroke', 'url(#inputGradient)');
+	          }
+	          
+	          // Validate form
+	          validateForm(formJSON);
+	        });
+	      }
+	    });
+	  } else {
+	    const inputId = `${key.replace(/\s+/g, '')}Input`;
+	    const inputElement = document.getElementById(inputId);
+	    
+	    if (inputElement) {
+	      inputElement.addEventListener('input', (evt) => {
+	        const borderElement = document.getElementById(borderId);
+	        if (borderElement) {
+	          borderElement.setAttribute('stroke', 'url(#inputGradient)');
+	        }
+	        
+	        // Validate form
+	        validateForm(formJSON);
+	      });
+	    }
+	  }
+	});
+
+	const submitButton = document.getElementById('submitButton');
+	if (submitButton) {
+	  submitButton.addEventListener('click', () => {
+	    if (!validateForm(formJSON)) {
+	      console.log('Form validation failed');
+	      return;
+	    }
+	    
+	    console.log('Submit button clicked');
+	    
+	    // Create button animation
+	    const animation = document.createElementNS("http://www.w3.org/2000/svg", "animate");
+	    animation.setAttribute("attributeName", "offset");
+	    animation.setAttribute("values", "-0.5;2.5");
+	    animation.setAttribute("dur", "300ms");
+	    animation.setAttribute("repeatCount", "1");
+
+	    const secondAnimation = document.createElementNS("http://www.w3.org/2000/svg", "animate");
+	    secondAnimation.setAttribute("attributeName", "offset");
+	    secondAnimation.setAttribute("values", "0.5;3.5");
+	    secondAnimation.setAttribute("dur", "300ms");
+	    secondAnimation.setAttribute("repeatCount", "1");
+
+	    const startGradient = document.getElementById('submitButtonGradientStart');
+	    const endGradient = document.getElementById('submitButtonGradientEnd');
+	    
+	    if (startGradient && endGradient) {
+	      startGradient.appendChild(animation);
+	      endGradient.appendChild(secondAnimation);
+	      animation.beginElement();
+	      secondAnimation.beginElement();
+	    }
+
+	    // Collect form values
+	    const formValues = {};
+	    Object.keys(formJSON).forEach((key) => {
+	      if(key === 'form') {
+		return;
+	      }
+
+	      const fieldConfig = formJSON[key];
+	      
+	      if (fieldConfig.type === 'segmented') {
+	        const selectorId = `${key.replace(/\s+/g, '')}Selector`;
+	        const selector = document.getElementById(selectorId);
+	        if (selector) {
+	          formValues[key] = selector.value;
+	        }
+	      } else {
+	        const inputId = `${key.replace(/\s+/g, '')}Input`;
+	        const inputElement = document.getElementById(inputId);
+	        if (inputElement) {
+	          formValues[key] = inputElement.value;
+	        }
+	      }
+	    });
+
+	    if (onSubmit) {
+	      onSubmit(formValues);
+	    }
+	  });
+	}
+	
+	// Initial validation
+	validateForm(formJSON);
+      }, 100);
+
+      return container;
+    }
+
+    window.getForm = getForm;
+
+  })(window);
+</script>
+
+<script>
+  const formConfig = {
+      "Name": {type: "text", required: true},
+      "Address 1": {type: "text", required: true},
+      "Address 2": {type: "text", required: false},
+      "City": {type: "text", required: true},
+      "State": {type: "text", required: true},
+      "Zip Code": {type: "text", required: true}
+  };
+
+  function handleSubmit(formData) {
+      console.log('Form submitted:', formData);
+      // Do whatever you want with the form data
+      window.formData = formData;
+      document.getElementById('payment-form').style.display = 'block';
+      window.addPaymentForm();
+  }
+
+  const form = getForm(formConfig, handleSubmit);
+  document.getElementById('address-form').appendChild(form);
+</script>
+
+<script type="text/javascript">
+  let stripe;
+  let elements;
+  let response;
+
+  const paymentForm = document.getElementById('payment-form');
+  const submitButton = document.getElementById('submit-button');
+  const errorMessage = document.getElementById('error-message');
+  const loadingMessage = document.getElementById('loading');
+
+  async function getPaymentIntentWithoutSplits(amount, currency) {
+    try {
+      const payload = {
+	timestamp: new Date().getTime() + '',
+	amount: {{amount}}, 
+	currency: 'USD',
+	payees: [] 
+      };
+
+      const res = await fetch(`{{allyabaseOrigin}}/processor/stripe/intent`, {
+        method: 'put',
+        body: JSON.stringify(payload),
+        headers: {'Content-Type': 'application/json'}
+      });
+
+      const response = await res.json();
+console.log('got intent response', response);
+
+      stripe = Stripe(response.publishableKey);
+      elements = stripe.elements({
+        clientSecret: response.paymentIntent
+      });
+
+      const paymentElement = elements.create('payment');
+      paymentElement.mount('#payment-element');
+    } catch(err) {
+  console.warn(err);
+    }    
+  };
+
+  window.confirmPayment = async () => {
+    const order = {
+      title: "{{title}}",
+      productId: "{{productId}}",
+      formData
+    };
+    await fetch('{{sanoraUrl}}/user/orders', {
+      method: 'PUT',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({timestamp: new Date().getTime() + '', order})
+    });
+    try {
+      const { error } = await stripe.confirmPayment({
+          elements,
+          confirmParams: {
+              return_url: '{{shoppeUrl}}',
+          },
+      });
+
+      if(error) {
+        showError(error.message);
+      }
+    } catch(err) {
+      showError('An unexpected error occurred.');
+console.warn('payment error: ', err);
+    }
+  };
+
+  paymentForm.addEventListener('submit', async (event) => {
+    event.preventDefault();
+
+    if (!stripe || !elements) {
+      return;
+    }
+
+    // Disable payment form submission while processing
+    setLoading(true);
+
+    await window.confirmPayment();
+
+    setLoading(false);
+  });
+
+  const showError = (message) => {
+    errorMessage.textContent = message;
+    errorMessage.style.display = 'block';
+    setTimeout(() => {
+      errorMessage.style.display = 'none';
+      errorMessage.textContent = '';
+    }, 5000);
+  };
+
+  const setLoading = (isLoading) => {
+    submitButton.disabled = isLoading;
+    loadingMessage.style.display = isLoading ? 'block' : 'none';
+  };
+
+  const start = () => {
+    getPaymentIntentWithoutSplits({{amount}}, 'USD');
+  };
+
+  window.addPaymentForm = start;
+</script>
+</body>
+</html>