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

machine.js

// https://xstate.js.org/viz/?gist=ab052f1186730c080005e55cd8aaf97f
  
  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const checkoutMachine = Machine(
    {
    id: "checkout",
    initial: "plan",
    context: {
        totalDue: 0,
        balanceDue: 0,
        paymentMethods: {},
    },
    states: {
        // * plan tender methods
        plan: {
            on: {
                ADD_PAYMENT_METHOD: {
                    target: "plan",
                },
                UPDATE_PAYMENT_METHOD: {
                    target: "plan",
                },
                REMOVE_PAYMENT_METHOD: {
                    target: "plan",
                },
                TENDER_START: "#checkout.pending",
            },
        },

        // * processing payment for all tender options
        pending: {
          on: {
            RESOLVE: "success",
            REJECT: "error",
          }
        },
        
        voiding: {
          on: {
            RESOLVE: "voided",
            REJECT: "error"
          }
        },

        // * one or more payment options failed
        error: {
          on: {
            TENDER_START: "pending",
            VOID_TRANSACTION: "voiding",
          }
        },

        // * all payment methods were successfully processed; final state
        success: {
            type: "final",
        },
        
        voided: {
          type: "final"
        }
    },
},
{},);