JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<h2>To Complete A Purchase</h2>
<p>You can use any date in the future for the card expiration date, and you can use any values for other purchase data such as your name, so long as you used the test card numbers shown below.</p>
<ul>
    <li>Card Number: 4242 4242 4242 4242</li>
    <li>CVV Code: *E4FP</li>
</ul>

<!--
    Configure a checkout button.
-->
<button onclick="fastspring.builder.checkout(); pushToFastSpring();">Checkout</button>

<!--
    DEMO EFFECTS
        - The below div will be updated to include the returned data from the data-popup-webhook-received
-->
<br /><br />Data returned: <div id="log"></div>
<br /><br /> <div id="log2"></div>

<!--
    DEMO SETUP
        - Initialize the Store Builder Library
-->
<script
    id="fsc-api"
    src="https://sbl.onfastspring.com/sbl/0.8.6/fastspring-builder.min.js"
    type="text/javascript"
    data-storefront="fastspringexamples.test.onfastspring.com/popup-fastspringexamples"
    data-popup-closed="dataPopupClosed"
    data-popup-webhook-received="dataPopupWebhookReceived"
    data-continuous="true">
</script>
<script type="text/javascript">
	function pushToFastSpring() {
		fastspring.builder.recognize(
			{
				"email":"[email protected]",
				"firstName":"Bruce",
				"lastName":"Baxter"
			}
		);
    		fastspring.builder.reset
    		fastspring.builder.add('secondsplash-pro-membership-subscription')
        fastspring.builder.checkout();
	}
</script>
<!--
    Initialize the cart for demo purposes
-->
<script>
    fastspring.builder.reset();
    fastspring.builder.add("phot-io-main-app");
    window.ProductBought = 'none'
</script>
<script>
    function dataPopupWebhookReceived(data) {
    		var json2 = JSON.stringify(data, null, 4)
        document.getElementById("log").innerHTML = "<pre>"+json2+"</pre>";
         if (data.items[0].product = "secondsplash-pro-membership-subscription") {
 document.getElementById("log2").innerHTML = "<pre>hello</pre>";}
    }
</script>
<!--
    dataPopupClosed
    ...