--- a/toolkit/components/payments/jar.mn
+++ b/toolkit/components/payments/jar.mn
@@ -4,9 +4,11 @@
 
 toolkit.jar:
 %   content payments %content/payments/
     content/payments/paymentDialog.css                (content/paymentDialog.css)
     content/payments/paymentDialog.js                 (content/paymentDialog.js)
     content/payments/paymentDialogFrameScript.js      (content/paymentDialogFrameScript.js)
     content/payments/paymentDialog.xhtml              (content/paymentDialog.xhtml)
 %   resource payments %res/payments/
-    res/payments (res/paymentRequest.*)
+    res/payments                                      (res/paymentRequest.*)
+    res/payments/components.js                        (res/components.js)
+    res/payments/reducers.js                          (res/reducers.js)

new file mode 100644
--- /dev/null
+++ b/toolkit/components/payments/res/components.js
@@ -0,0 +1,49 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * Shorthand for creating elements (to avoid using a JSX preprocessor)
+ */
+const r = React.createElement;
+
+class TotalItem extends React.Component {
+  render() {
+    console.log("TotalItem Render", this.props);
+    return (
+      r("div", {id: "total"},
+        r("h2", {className: "label"}, this.props.label),
+        r("span", {className: "value"}, this.props.amount.value),
+        " ",
+        r("span", {className: "currency"}, this.props.amount.currency)
+       )
+    );
+  }
+}
+
+class PaymentRequestSummary extends React.Component {
+  render() {
+    console.log("PaymentRequestSummary render", this.props);
+    return (
+      r("div", {id: "host-name"}, this.props.request.topLevelPrincipal.URI.displayHost),
+      r(TotalItem, this.props.request.paymentDetails.totalItem));
+  }
+
+}
+
+const ConnectedPaymentRequestSummary = ReactRedux.connect(function mapStateToProps(state, ownProps) {
+  console.log("mapStateToProps", state, ownProps);
+  return { request: state.request, ...ownProps };
+})(PaymentRequestSummary);
+
+class PaymentRequestDialog extends React.Component {
+  render() {
+    return (
+      r(ReactRedux.Provider, {store: this.props.store},
+        r(ConnectedPaymentRequestSummary, this.props)
+       )
+    );
+  }
+}

--- a/toolkit/components/payments/res/paymentRequest.js
+++ b/toolkit/components/payments/res/paymentRequest.js
@@ -65,24 +65,23 @@ let PaymentRequest = {
 
   onChromeToContent({detail}) {
     let {messageType} = detail;
 
     switch (messageType) {
       case "showPaymentRequest": {
         this.request = detail.request;
 
-        let hostNameEl = document.getElementById("host-name");
-        hostNameEl.textContent = this.request.topLevelPrincipal.URI.displayHost;
-
-        let totalItem = this.request.paymentDetails.totalItem;
-        let totalEl = document.getElementById("total");
-        totalEl.querySelector(".value").textContent = totalItem.amount.value;
-        totalEl.querySelector(".currency").textContent = totalItem.amount.currency;
-        totalEl.querySelector(".label").textContent = totalItem.label;
+        let store = Redux.createStore(paymentRequestReducer, {
+          request: detail.request,
+        });
+        console.log("getState", store.getState());
+        ReactDOM.render(r(PaymentRequestDialog, {
+          store,
+        }), document.getElementById("app"),);
         break;
       }
     }
   },
 
   onPaymentRequestLoad(requestId) {
     let cancelBtn = document.getElementById("cancel");
     cancelBtn.addEventListener("click", this, {once: true});

--- a/toolkit/components/payments/res/paymentRequest.xhtml
+++ b/toolkit/components/payments/res/paymentRequest.xhtml
@@ -1,24 +1,28 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title></title>
-  <link rel="stylesheet" href="resource://payments/paymentRequest.css" />
+  <link rel="stylesheet" href="resource://payments/paymentRequest.css"/>
+  <!-- TODO: fork -->
+  <script src="resource://shield-recipe-client-vendor/React.js"></script>
+  <script src="resource://shield-recipe-client-vendor/ReactDOM.js"></script>
+  <script src="resource://shield-recipe-client-vendor/PropTypes.js"></script>
+  <script src="resource://shield-recipe-client-vendor/classnames.js"></script>
+  <script src="resource://activity-stream/vendor/redux.js"></script>
+  <script src="resource://activity-stream/vendor/react-redux.js"></script>
+  <script src="resource://payments/reducers.js"></script>
+  <script src="resource://payments/components.js"></script>
   <script src="resource://payments/paymentRequest.js"></script>
 </head>
 <body>
-  <div id="host-name"></div>
+  <div id="app"></div>
 
-  <div id="total">
-    <h2 class="label"></h2>
-    <span class="value"></span>
-    <span class="currency"></span>
-  </div>
   <div id="controls-container">
     <button id="cancel">Cancel payment</button>
   </div>
 </body>
 </html>

new file mode 100644
--- /dev/null
+++ b/toolkit/components/payments/res/reducers.js
@@ -0,0 +1,10 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+function paymentRequestReducer(state, action) {
+  console.log("paymentRequestReducer:", state, action);
+  return state;
+}