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

machine.js

const paymentMachine = Machine({
  id: 'payment',
  initial: 'plan',
  states: {
    plan: {
      initial: '$10',
      states: {
        '$10': { on: { SWITCH_PLAN: '$20' } },
        '$20': { on: { SWITCH_PLAN: '$10' } },
        hist: { type: 'history' },
      },
      on: { NEXT: 'method' },
    },
    method: {
      initial: 'cash',
      states: {
        cash: { on: { SWITCH_CARD: 'card' } },
        card: { on: { SWITCH_CASH: 'cash' } },
        hist: { type: 'history' },
      },
      on: { PLAN: 'plan.hist' },
      on: { NEXT: 'review' },
    },
    review: {
      on: { PREVIOUS: 'method.hist' },
    }
  }
});