load turnstile when embedded

Author: ryanwoldatwork

app/views/components/forms/_custom.html.erb

@@ -109,7 +109,7 @@
         <% end %>
         <% if form.enable_turnstile? %>
         <div class="margin-top-2">
-          <div class="cf-turnstile" data-sitekey="<%= ENV.fetch("TURNSTILE_SITE_KEY", nil) %>" data-callback="onTurnstileSuccess"></div>
+          <div class="cf-turnstile" data-sitekey="<%= ENV.fetch("TURNSTILE_SITE_KEY", nil) %>"></div>
           <%= hidden_field_tag "cf-turnstile-response", nil %>
         </div>
         <% end %>
@@ -131,13 +131,3 @@
       autocomplete="off">
   </div>
 </form>
-
-<% if form.enable_turnstile? %>
-<script>
-function onTurnstileSuccess(token) {
-  document.querySelector("input[name='cf-turnstile-response']").value = token;
-}
-</script>
-
-<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
-<% end %>

app/views/components/widget/_fba.js.erb

@@ -38,6 +38,9 @@ function FBAform(d, N) {
 			if (this.options.formSpecificScript) {
 				this.options.formSpecificScript();
 			}
+			<% if form.enable_turnstile? %>
+			this.loadTurnstile()
+			<% end %>
 			d.dispatchEvent(new CustomEvent('onTouchpointsFormLoaded', {
 				detail: {
 					formComponent: this
@@ -642,6 +645,18 @@ function FBAform(d, N) {
 		modalId: function() {
 			return `fba-modal-${this.options.formId}`;
 		},
+		<% if form.enable_turnstile? %>
+		loadTurnstile: function() {
+			let script = document.createElement("script");
+			script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
+			script.async = true;
+			script.defer = true;
+			script.onload = function() {
+				document.querySelector("input[name='cf-turnstile-response']").value = token;
+			};
+			document.head.appendChild(script);
+		},
+		<% end %>
 	};
 };