Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine({
  id: "PaymentForm",
  initial: "idle",
  states: {
  idle: {
    on: {
      SUBMIT: "loading",
    },
  },
  loading: {
    invoke: {
      src: "doPayment",
      onDone: {
        target: "success",
      },
      onError: {
        target: "error",
      },
    },
    on: {
      PAYMENT_RECEIVED: "success",
      PAYMENT_FAILED: "error",
    },
  },
  error: {
    on: {
      SUBMIT: "loading",
    },
  },
  success: {
    type: "final",
  },
},
  strict: true,

  }, {
  services: {
    async doPayment() {
      if (Math.random() < 0.5) {
        throw new Error("Payment failed");
      }

      return true;
    },
  },
});