diff --git a/client/src/components/Footer/__snapshots__/Footer.test.js.snap b/client/src/components/Footer/__snapshots__/Footer.test.js.snap
index 9a2882a7ba..013453cc21 100644
--- a/client/src/components/Footer/__snapshots__/Footer.test.js.snap
+++ b/client/src/components/Footer/__snapshots__/Footer.test.js.snap
@@ -23,9 +23,7 @@ exports[`<Footer /> matches snapshot 1`] = `
           Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff. You can 
           <a
             className="inline"
-            href="https://donate.freecodecamp.org"
-            rel="noopener noreferrer"
-            target="_blank"
+            href="/donate"
           >
             make a tax-deductible donation here
           </a>
@@ -48,9 +46,7 @@ exports[`<Footer /> matches snapshot 1`] = `
           About
         </a>
         <a
-          href="https://donate.freecodecamp.org"
-          rel="noopener noreferrer"
-          target="_blank"
+          href="/donate"
         >
           Donate
         </a>
diff --git a/client/src/components/Footer/footerLinks.json b/client/src/components/Footer/footerLinks.json
index 82f2f7a7cd..18d014edb1 100644
--- a/client/src/components/Footer/footerLinks.json
+++ b/client/src/components/Footer/footerLinks.json
@@ -4,7 +4,7 @@
       "title": "Our Nonprofit",
       "links": [
         { "to": "/news/about/", "text": "About" },
-        { "to": "https://donate.freecodecamp.org", "text": "Donate" },
+        { "to": "/donate", "text": "Donate", "internal": true },
         { "to": "/news/shop/", "text": "Shop" },
         {
           "to": "https://www.linkedin.com/school/free-code-camp/people/",
diff --git a/client/src/components/Footer/index.js b/client/src/components/Footer/index.js
index 8e27033e81..666f6ff1ca 100644
--- a/client/src/components/Footer/index.js
+++ b/client/src/components/Footer/index.js
@@ -38,11 +38,7 @@ function Footer() {
             <p>
               Donations to freeCodeCamp go toward our education initiatives, and
               help pay for servers, services, and staff. You can&nbsp;
-              <Link
-                className='inline'
-                external={true}
-                to='https://donate.freecodecamp.org'
-              >
+              <Link className='inline' to='/donate'>
                 make a tax-deductible donation here
               </Link>
               .
diff --git a/client/src/pages/donate.js b/client/src/pages/donate.js
new file mode 100644
index 0000000000..c510aadfe1
--- /dev/null
+++ b/client/src/pages/donate.js
@@ -0,0 +1,137 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import { StripeProvider, Elements } from 'react-stripe-elements';
+import { Grid, Row, Col, Button } from '@freecodecamp/react-bootstrap';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import { stripePublicKey, apiLocation } from '../../config/env.json';
+import { Spacer, Loader } from '../components/helpers';
+import DonateOther from '../components/Donation/components/DonateOther';
+import DonateForm from '../components/Donation/components/DonateForm';
+import DonateText from '../components/Donation/components/DonateText';
+import PoweredByStripe from '../components/Donation/components/poweredByStripe';
+import { signInLoadingSelector, isSignedInSelector, hardGoTo } from '../redux';
+
+const mapStateToProps = createSelector(
+  signInLoadingSelector,
+  isSignedInSelector,
+  (showLoading, isSignedIn) => ({
+    showLoading,
+    isSignedIn
+  })
+);
+
+const mapDispatchToProps = dispatch => ({
+  navigate: location => dispatch(hardGoTo(location))
+});
+
+const propTypes = {
+  isSignedIn: PropTypes.bool.isRequired,
+  navigate: PropTypes.func.isRequired,
+  showLoading: PropTypes.bool.isRequired
+};
+
+export class DonatePage extends Component {
+  constructor(...props) {
+    super(...props);
+    this.state = {
+      stripe: null,
+      showOtherOptions: false
+    };
+    this.handleStripeLoad = this.handleStripeLoad.bind(this);
+    this.toggleOtherOptions = this.toggleOtherOptions.bind(this);
+  }
+  componentDidMount() {
+    if (window.Stripe) {
+      /* eslint-disable react/no-did-mount-set-state */
+      this.setState(state => ({
+        ...state,
+        stripe: window.Stripe(stripePublicKey)
+      }));
+    } else if (document.querySelector('#stripe-js')) {
+      document
+        .querySelector('#stripe-js')
+        .addEventListener('load', this.handleStripeLoad);
+    }
+  }
+
+  componentWillUnmount() {
+    const stripeMountPoint = document.querySelector('#stripe-js');
+
+    if (stripeMountPoint) {
+      stripeMountPoint.removeEventListener('load', this.handleStripeLoad);
+    }
+  }
+
+  handleStripeLoad() {
+    // Create Stripe instance once Stripe.js loads
+    console.info('stripe has loaded');
+    this.setState(state => ({
+      ...state,
+      stripe: window.Stripe(stripePublicKey)
+    }));
+  }
+
+  toggleOtherOptions() {
+    this.setState(({ showOtherOptions }) => ({
+      showOtherOptions: !showOtherOptions
+    }));
+  }
+
+  render() {
+    const { showOtherOptions, stripe } = this.state;
+    const { showLoading, isSignedIn, navigate } = this.props;
+
+    if (showLoading) {
+      return <Loader fullScreen={true} />;
+    }
+
+    if (!showLoading && !isSignedIn) {
+      return navigate(`${apiLocation}/signin`);
+    }
+
+    return (
+      <Fragment>
+        <Helmet title='Support our nonprofit | freeCodeCamp.org' />
+        <Spacer />
+        <Grid>
+          <Row>
+            <Col sm={10} smOffset={1} xs={12}>
+              <h2 className='text-center'>Become a Supporter</h2>
+              <DonateText />
+            </Col>
+            <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+              <hr />
+              <StripeProvider stripe={stripe}>
+                <Elements>
+                  <DonateForm />
+                </Elements>
+              </StripeProvider>
+              <div className='text-center'>
+                <PoweredByStripe />
+                <Spacer />
+                <Button onClick={this.toggleOtherOptions}>
+                  {`${
+                    showOtherOptions ? 'Hide' : 'Show'
+                  } other ways to donate.`}
+                </Button>
+              </div>
+              <Spacer />
+            </Col>
+          </Row>
+        </Grid>
+        {showOtherOptions && <DonateOther />}
+      </Fragment>
+    );
+  }
+}
+
+DonatePage.displayName = 'DonatePage';
+DonatePage.propTypes = propTypes;
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DonatePage);
diff --git a/client/src/pages/donate.test.js b/client/src/pages/donate.test.js
new file mode 100644
index 0000000000..fd4e324207
--- /dev/null
+++ b/client/src/pages/donate.test.js
@@ -0,0 +1,25 @@
+/* global jest, expect */
+import React from 'react';
+import 'jest-dom/extend-expect';
+import ShallowRenderer from 'react-test-renderer/shallow';
+import { apiLocation } from '../../config/env.json';
+
+import { DonatePage } from './donate';
+
+describe('<ShowSettings />', () => {
+  it('redirects to signin page when user not logged in', () => {
+    const shallow = new ShallowRenderer();
+    shallow.render(<DonatePage {...loggedOutProps} />);
+    expect(navigate).toHaveBeenCalledTimes(1);
+    expect(navigate).toHaveBeenCalledWith(`${apiLocation}/signin`);
+    expect(true).toBeTruthy();
+  });
+});
+
+const navigate = jest.fn();
+const loggedOutProps = {
+  createFlashMessage: () => {},
+  isSignedIn: false,
+  showLoading: false,
+  navigate: navigate
+};
diff --git a/tools/scripts/build/__snapshots__/create-redirects.test.js.snap b/tools/scripts/build/__snapshots__/create-redirects.test.js.snap
index 773aa488fe..ddc8e71168 100644
--- a/tools/scripts/build/__snapshots__/create-redirects.test.js.snap
+++ b/tools/scripts/build/__snapshots__/create-redirects.test.js.snap
@@ -15,7 +15,6 @@ exports[`createRedirects matches the snapshot 1`] = `
 /code-of-conduct                              https://news.example.com/code-of-conduct 200
 /copyright                                    https://news.example.com/copyright-policy 200
 /copyright-policy                             https://news.example.com/copyright-policy 200
-/donate                                       https://donate.freecodecamp.org 200
 /privacy                                      https://news.example.com/privacy-policy 200
 /privacy-policy                               https://news.example.com/privacy-policy 200
 /shop                                         https://news.example.com/shop 200
diff --git a/tools/scripts/build/create-redirects.js b/tools/scripts/build/create-redirects.js
index 7fe10483d6..4f33b4ee6a 100644
--- a/tools/scripts/build/create-redirects.js
+++ b/tools/scripts/build/create-redirects.js
@@ -36,7 +36,6 @@ const template = `
 /code-of-conduct                              #{{NEWS}}/code-of-conduct 200
 /copyright                                    #{{NEWS}}/copyright-policy 200
 /copyright-policy                             #{{NEWS}}/copyright-policy 200
-/donate                                       https://donate.freecodecamp.org 200
 /privacy                                      #{{NEWS}}/privacy-policy 200
 /privacy-policy                               #{{NEWS}}/privacy-policy 200
 /shop                                         #{{NEWS}}/shop 200