Anyone have a recommendation on how to get control of a [:form] control? I’m working with Stripe’s checkout function which is embedded inside a form. I’ve tried gaining control with an on-submit dispatch but I can’t seem to prevent the form’s submit action. Any tricks?

Is this a form you wrote, as opposed to something Stripe is providing to you?

You might need any or all of the following: call preventDefault on the event; call stopPropagation on the event, and/or return false from the handler.

(by “event” I mean the JS event that gets passed to your handler.)

I was reading about that and looks like it’s strongly discouraged https://github.com/Day8/re-frame/wiki/Beware-Returning-False

That said I can’t seem to get an event handler to get control. On slecting the checkout button that stripe provides the form action is submitted.

The form it’s embedded in is my own form, though I’m not sure yet what javascript wizardry they do to perhaps prevent me (or re-frame) from gaining control.

[:form {:on-submit #(re-frame/dispatch [:create-order/checkout]) }
    [:script {
              :src ""
              :class "stripe-button"
              :data-key  "<key>"
              :data-amount "2000"
              :data-name "Demo Site"
              :data-description "2 widgets ($20.00)"
              :data-image ""}]]

This, for example, ignores my event handler

Ok, I’d recommend

...
:on-submit (fn [e] (.preventDefault e) (re-frame/dispatch [:create-order/checkout]))...

I’ll give that a go

That didn’t work 😕

It’s possible they’re hard-wiring an on-click handler into their submit button

That’s what I’m thinking, was just hunting down their javascript to peek inside.

Hard to tell… I’ve tried pulling in the Stripe React components but with no luck https://github.com/cljsjs/packages/tree/master/react-stripe-elements

react-dom.inc.js:1815 Uncaught TypeError: _assign is not a function
    at react-dom.inc.js:1815
    at validateFormat (react-dom.inc.js:15)
    at react-dom.inc.js:16
(anonymous) @ react-dom.inc.js:1815
validateFormat @ react-dom.inc.js:15
(anonymous) @ react-dom.inc.js:16
react-highlight.inc.js:189 Uncaught ReferenceError: ReactDOM is not defined
    at Object.module.exports (react-highlight.inc.js:189)
    at __webpack_require__ (react-highlight.inc.js:21)
    at Object.module.exports (react-highlight.inc.js:100)
    at __webpack_require__ (react-highlight.inc.js:21)
    at Object.defineProperty.value (react-highlight.inc.js:72)
    at __webpack_require__ (react-highlight.inc.js:21)
    at react-highlight.inc.js:56
    at Object.defineProperty.value (react-highlight.inc.js:58)
    at __webpack_require__ (react-highlight.inc.js:21)
    at Object.<anonymous> (react-highlight.inc.js:48)

My lunch hour is about over, might have to tinker later. This demo shows success with these strip react components but is there something I need to do differently in re-frame to rope in native react components?

https://github.com/jborden/reagent-stripe-elements-demo

beginner here. I keep getting the errors

re-frame: no handler registered for effect: :event . Ignoring.
re-frame: no handler registered for effect: :loading . Ignoring.
re-frame: no handler registered for effect: :solutions . Ignoring.

# part of active-page handler 
(case page
       ;; -- URL @ "/" --------------------------------------------------------
       :home {:db set-page
              :set-history page}
       ;; -- URL @ "/about" -----------------------
       :about {:db set-page
               :set-history page}

       :solutions {:db (assoc db :active-page :solutions)
                   :dispatch [:get-solutions]})

(reg-event-fx
 :get-solutions
 (fn [{:keys [db]}]
   {:http-xhrio {:method :get
                 :uri (endpoint "solutions")
                 :response-format (json-response-format {:keywords? true})
                 :on-success      [:get-solutions-success]               
                 :on-failure      [:api-request-error :get-solutions]}
    :db (assoc-in db [:loading :solutions] true)}))

(reg-event-fx
 :get-solutions-success
 (fn [db [_ solutions]]
   (-> db
       (assoc-in [:loading :solutions] false)
       (assoc :solutions solutions))))

nvm I had the http handler as a reg-event-fx instead of reg-event-db

Gets me every time 😄 Welcome to re-frame by the way