diff --git a/static/js/shop.jsx b/static/js/shop.jsx
index 0224cb1..698a8c7 100644
--- a/static/js/shop.jsx
+++ b/static/js/shop.jsx
@@ -723,11 +723,22 @@ class ProductCartItem extends React.PureComponent {
                       data={options_data}
                       key={"processed_options" + index}
                       id={"processed_options" + index}
-                      target={((outvar, value) => {
-                        console.log(outvar, value);
-                        options_data[outvar] = value;
-                        this.setState(options_data);
-                      })}
+                      target={{
+                        construct: ((outvar, value) => {
+                          //console.log("construct", outvar, value, options_data);
+                          options_data[outvar] = value;
+                          this.setState(options_data);
+                        }),
+                        update: ((outvar, value) => {
+                          //console.log("update", outvar, value, options_data);
+                          if (outvar in options_data) options_data[outvar] = value;
+                          this.setState(options_data);
+                        }),
+                        unmount: ((outvar) => {
+                          //console.log("delete", outvar);
+                          delete options_data[outvar];
+                        })
+                      }}
                     />
                   </div>
               ) : null }
diff --git a/static/js/shop_components.jsx b/static/js/shop_components.jsx
index 4e94edd..f3be9d3 100644
--- a/static/js/shop_components.jsx
+++ b/static/js/shop_components.jsx
@@ -16,7 +16,11 @@ class Radio extends Component {
 
         // Bind the event handler to this
         this.handleClick = this.handleClick.bind(this);
-        this.props.target(this.props.outvar, this.state.variant);
+        this.props.target.construct(this.props.outvar, this.state.variant);
+    }
+
+    componentWillUnmount() {
+        this.props.target.unmount(this.props.outvar);
     }
 
     handleClick(variant) {
@@ -25,7 +29,7 @@ class Radio extends Component {
             ...this.state,
             variant: variant
         });
-        this.props.target(this.props.outvar, variant);
+        this.props.target.update(this.props.outvar, variant);
     }
 
     render() {
@@ -63,12 +67,16 @@ class Switch extends Component {
         super(props);
         // Initialize the state object with the initial values from the props
         this.state = {
-            checked:  props.outvar in props.data ? props.data[props.outvar] : !!(props.fallback)
+            checked: props.outvar in props.data ? props.data[props.outvar] : !!(props.fallback)
         };
 
         // Bind the event handler to this
         this.handleClick = this.handleClick.bind(this);
-        this.props.target(this.props.outvar, this.state.checked);
+        this.props.target.construct(this.props.outvar, this.state.checked);
+    }
+
+    componentWillUnmount() {
+        this.props.target.unmount(this.props.outvar);
     }
 
     handleClick() {
@@ -77,7 +85,7 @@ class Switch extends Component {
         this.setState({
             checked: new_checked
         });
-        this.props.target(this.props.outvar, new_checked);
+        this.props.target.update(this.props.outvar, new_checked);
     }
 
     render() {
@@ -113,11 +121,15 @@ class Line extends Component {
         super(props);
         // Initialize the state object with the initial values from the props
         this.state = {
-            text:  props.outvar in props.data ? props.data[props.outvar] : (props.fallback ? props.fallback : "")
+            text: props.outvar in props.data ? props.data[props.outvar] : (props.fallback ? props.fallback : "")
         };
         // Bind the event handler to this
         this.handleClick = this.handleClick.bind(this);
-        this.props.target(this.props.outvar, this.state.text);
+        this.props.target.construct(this.props.outvar, this.state.text);
+    }
+
+    componentWillUnmount() {
+        this.props.target.unmount(this.props.outvar);
     }
 
     handleClick(element) {
@@ -125,7 +137,7 @@ class Line extends Component {
         this.setState({
             text: text
         });
-        this.props.target(this.props.outvar, text);
+        this.props.target.update(this.props.outvar, text);
     }
 
     render() {
@@ -133,7 +145,8 @@ class Line extends Component {
         return (
             <div className="shop-switch" key={this.props.id}>
                 <label htmlFor={key} className="form-label">{this.props.title}: </label>
-                <input type="email" className="form-control" id={key} onChange={this.handleClick} value={this.state.text} />
+                <input type="email" className="form-control" id={key} onChange={this.handleClick}
+                       value={this.state.text}/>
             </div>
         );
     }
@@ -148,13 +161,17 @@ class SwitchLine extends Component {
         super(props);
         // Initialize the state object with the initial values from the props
         this.state = {
-            text:  props.outvar in props.data ? props.data[props.outvar].text : (props.fallback ? props.fallback.text : ""),
+            text: props.outvar in props.data ? props.data[props.outvar].text : (props.fallback ? props.fallback.text : ""),
             checked: props.outvar in props.data ? props.data[props.outvar].checked : (props.fallback ? props.fallback.checked : false)
         };
         // Bind the event handler to this
         this.handleText = this.handleText.bind(this);
         this.handleCheck = this.handleCheck.bind(this);
-        this.props.target(this.props.outvar, this.state);
+        this.props.target.construct(this.props.outvar, this.state);
+    }
+
+    componentWillUnmount() {
+        this.props.target.unmount(this.props.outvar);
     }
 
     handleText(element) {
@@ -163,7 +180,7 @@ class SwitchLine extends Component {
             text: element.target.value
         }
         this.setState(new_state);
-        this.props.target(this.props.outvar, new_state);
+        this.props.target.update(this.props.outvar, new_state);
     }
 
     handleCheck() {
@@ -173,7 +190,7 @@ class SwitchLine extends Component {
             checked: !this.state.checked
         }
         this.setState(new_state);
-        this.props.target(this.props.outvar, new_state);
+        this.props.target.update(this.props.outvar, new_state);
     }
 
     render() {
@@ -186,16 +203,17 @@ class SwitchLine extends Component {
                         className="form-check-input"
                         type="checkbox"
                         role="switch"
-                        id={key+"switch"}
+                        id={key + "switch"}
                         checked={this.state.checked}
                         onClick={this.handleCheck}
                         onChange={this.handleCheck}
                     />
-                    <label className="form-check-label" htmlFor={key+"switch"}>
+                    <label className="form-check-label" htmlFor={key + "switch"}>
                         {this.props.title}
                     </label>
                 </div>
-                <input type="email" className="form-control" id={key+"line"} onChange={this.handleText} value={this.state.text} disabled={!this.state.checked}/>
+                <input type="email" className="form-control" id={key + "line"} onChange={this.handleText}
+                       value={this.state.text} disabled={!this.state.checked}/>
             </div>
         );
     }
@@ -206,7 +224,6 @@ function SwitchLineWrapper(target, id, data, {title, fallback, outvar}) {
 }
 
 
-
 function UnimplementedComponent(type, id) {
     //console.error("Missing component with type:", type)
     return <div key={type + id} style={{background: "red"}}>UNIMPLEMENTED</div>