can anyone help me with integrating stripe into my reason app
currently i have components like this but i just get a blank white screen.
also it talks about loading the stripe.js into the page where is this loaded? since im trying to load a module with the elements nested inside, im new to reason and i dont understand how to do the react interop, even tho ive read the guide many times
react scripts im using are here https://github.com/stripe/react-stripe-elements
checkout.re
type state =
| LOADING
| ERROR
| CHECKOUT
type action =
| FAILEDTOFETCH
| CHECKOUT
let reducer = (action, _state) =>
switch(action) {
| FAILEDTOFETCH => ReasonReact.Update(ERROR)
| CHECKOUT => ReasonReact.Update(CHECKOUT)
};
let component = ReasonReact.reducerComponent("Checkout");
let make = children => {
...component,
initialState: () => LOADING,
reducer,
didMount: self => {
self.send(CHECKOUT);
},
render: (self) =>
switch(self.state){
| ERROR => <div> ( ReasonReact.string("An Error Occured !!") ) </div>
| LOADING => <div className=Styles.app>
<div> ( ReasonReact.string("Loading... ") ) </div>
</div>
| CHECKOUT => <div className=Styles.app>
<div> ( ReasonReact.string("Checkout goes here") ) </div>
<Stripe />
</div>
}
};
stripe.re
[@bs.module] external inject: ReasonReact.reactClass = "../node_modules/react-stripe-elements/lib/components/inject";
[@bs.module] external elements: ReasonReact.reactClass = "../node_modules/react-stripe-elements/lib/components/Elements";
[@bs.module] external element: ReasonReact.reactClass = "../node_modules/react-stripe-elements/lib/components/Element";
[@bs.module] external provider: ReasonReact.reactClass = "../node_modules/react-stripe-elements/lib/components/Provider";
[@bs.module] external paymentrequestbuttonelement: ReasonReact.reactClass = "../node_modules/react-stripe-elements/lib/components/PaymentRequestButtonElement";
let make = (children) =>
ReasonReact.wrapJsForReason(
~reactClass=elements,
~props=Js.Obj.empty(),
children,
);