import {create_payement} from 'chargily-epay-react-js'
function App() {
  const handleClick = async()=>{
    const invoice = {
      "amount":600,
      "invoice_number":23,
      "client":"Ahmed malek", // add a text field to allow the user to enter his name, or get it from a context api (depends on the project architecture)
      "mode":"CIB",
      "webhook_url":"https://your_beeceptor_url.free.beeceptor.com", // here is the webhook url, use beecptor to easly see the post request and it's body, you will use this in backened to save and validate the transactions.
      "back_url":"https://www.youtube.com/", // to where the user will be redirected after he finish/cancel the payement 
      "discount" :0
  }
    try {
      await create_payement(invoice)
    } catch (error) {
      // handle your error here 
      console.log(error)
    }
  }
  return (
    <>
      {/* Here you can add a form, to get te client name, the mode Edahabiya or CIB, the amount & discount */}
      {/* It really depends on the project architecture, for example you will not need 
      to add a text field input to get the name of the user if he is  logged in
      (get the name from redux toolkit or react context api for example) */}
      
      
      <button onClick={handleClick}>testing</button>
    </>
  );
}
export default App;