Load the Castle browser SDK as a UMD from npm

app/assets/javascripts/castle.js

@@ -21,14 +21,15 @@
     var submitted = false;
 
     form.addEventListener("submit", function (event) {
-      var sdkReady = window.Castle && typeof Castle.createRequestToken === "function";
+      var sdk = window.__castle || window.Castle;
+      var sdkReady = sdk && typeof sdk.createRequestToken === "function";
       if (submitted || !sdkReady) {
         return; // already handled, or no SDK configured — submit as-is
       }
 
       event.preventDefault();
 
-      Castle.createRequestToken()
+      sdk.createRequestToken()
         .then(function (token) {
           setToken(form, token);
         })

app/views/layouts/_castle_js.html.erb

@@ -1,10 +1,17 @@
 <% if ENV["CASTLE_PK"].present? %>
-  <%# Castle browser SDK. Mints the request token that ties the browser to the %>
-  <%# server-side risk/filter calls. See app/assets/javascripts/castle.js. %>
-  <script src="/vendor/castle-js/castle.browser.js"></script>
+  <%# The 3.x UMD build is named @castleio/castle-js, so seed module.exports as window.Castle first. %>
   <script>
-    if (window.Castle) {
-      Castle.configure({ pk: "<%= j ENV['CASTLE_PK'] %>" });
+    if (!window.Castle) {
+      window.exports = window.exports || {};
+      window.module = window.module || { exports: window.exports };
+      window.Castle = window.module.exports;
+    }
+  </script>
+  <script src="/vendor/castle-js/castle.umd.js"></script>
+  <script>
+    window.Castle = window.Castle || (window.module && window.module.exports) || window["@castleio/castle-js"];
+    if (window.Castle && typeof Castle.configure === "function") {
+      window.__castle = Castle.configure({ pk: "<%= j ENV['CASTLE_PK'] %>" }) || window.Castle;
     }
   </script>
 <% end %>

package.json

@@ -8,7 +8,10 @@
     "url": "git+https://github.com/castle/castle-ruby-example.git"
   },
   "license": "MIT",
+  "scripts": {
+    "postinstall": "node scripts/ensure-castle-umd.js"
+  },
   "dependencies": {
-    "@castleio/castle-js": "^2.8.4"
+    "@castleio/castle-js": "^2.8.5"
   }
 }

scripts/ensure-castle-umd.js

@@ -0,0 +1,15 @@
+const fs = require('fs');
+const path = require('path');
+
+const dist = path.join(__dirname, '..', 'node_modules', '@castleio', 'castle-js', 'dist');
+const dest = path.join(dist, 'castle.umd.js');
+if (!fs.existsSync(dist) || fs.existsSync(dest)) {
+  process.exit(0);
+}
+
+const source = fs.readdirSync(dist).find((name) => (
+  name.startsWith('castle.') && name.endsWith('.js') && name !== 'castle.js'
+));
+if (source) {
+  fs.copyFileSync(path.join(dist, source), dest);
+}

spec/controllers/vendor/castle_js_controller_spec.rb

@@ -14,8 +14,8 @@
       expect(response).to have_http_status(:not_found)
     end
 
-    it 'serves castle.browser.js from the npm install' do
-      get :show, params: { filename: 'castle.browser.js' }
+    it 'serves castle.umd.js from the npm install' do
+      get :show, params: { filename: 'castle.umd.js' }
 
       expect(response).to have_http_status(:ok)
       expect(response.media_type).to eq('application/javascript')