feat: use Stripe checkout on donate page

client/src/components/Donation/DonateForm.js

@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import {
-  Tabs,
+  Button,
-  Tab,
-  Row,
   Col,
-  ToggleButtonGroup,
+  Row,
+  Tab,
+  Tabs,
   ToggleButton,
-  Button
+  ToggleButtonGroup
 } from '@freecodecamp/react-bootstrap';
 // import { StripeProvider, Elements } from 'react-stripe-elements';
 
@@ -17,8 +17,10 @@ import {
   amountsConfig,
   durationsConfig,
   defaultAmount,
-  defaultStateConfig
+  defaultStateConfig,
+  onetimeSKUConfig
 } from '../../../../config/donation-settings';
+import { deploymentEnv } from '../../../config/env.json';
 import Spacer from '../helpers/Spacer';
 // import DonateFormChildViewForHOC from './DonateFormChildViewForHOC';
 import PaypalButton from './PaypalButton';
@@ -41,7 +43,8 @@ const propTypes = {
   navigate: PropTypes.func.isRequired,
   showLoading: PropTypes.bool.isRequired,
   stripe: PropTypes.shape({
-    createToken: PropTypes.func.isRequired
+    createToken: PropTypes.func.isRequired,
+    redirectToCheckout: PropTypes.func.isRequired
   })
 };
 
@@ -83,6 +86,9 @@ class DonateForm extends Component {
     this.getDonationButtonLabel = this.getDonationButtonLabel.bind(this);
     this.handleSelectAmount = this.handleSelectAmount.bind(this);
     this.handleSelectDuration = this.handleSelectDuration.bind(this);
+    this.handleStripeCheckoutRedirect = this.handleStripeCheckoutRedirect.bind(
+      this
+    );
     this.hideAmountOptionsCB = this.hideAmountOptionsCB.bind(this);
     this.resetDonation = this.resetDonation.bind(this);
   }
@@ -137,6 +143,36 @@ class DonateForm extends Component {
     this.setState({ donationAmount });
   }
 
+  async handleStripeCheckoutRedirect(e) {
+    const { stripe } = this.props;
+    const { donationAmount, donationDuration } = this.state;
+
+    const isOneTime = donationDuration === 'onetime';
+    const getSKUId = () => {
+      const { id } = onetimeSKUConfig[deploymentEnv || 'staging'].find(
+        skuConfig => skuConfig.amount === `${donationAmount}`
+      );
+      return id;
+    };
+
+    e.preventDefault();
+    const item = isOneTime
+      ? {
+          sku: getSKUId(),
+          quantity: 1
+        }
+      : {
+          plan: `${this.durations[donationDuration]}-donation-${donationAmount}`,
+          quantity: 1
+        };
+    const { error } = await stripe.redirectToCheckout({
+      items: [item],
+      successUrl: 'https://www.freecodecamp.org/news/thank-you-for-donating/',
+      cancelUrl: 'https://freecodecamp.org/donate'
+    });
+    console.error(error);
+  }
+
   renderAmountButtons(duration) {
     return this.amounts[duration].map(amount => (
       <ToggleButton
@@ -215,10 +251,11 @@ class DonateForm extends Component {
   }
 
   renderDonationOptions() {
-    // const { stripe, handleProcessing, isSignedIn } = this.props;
     const { handleProcessing, isSignedIn } = this.props;
     const { donationAmount, donationDuration } = this.state;
+
     const isOneTime = donationDuration === 'onetime';
+
     return (
       <div>
         {isOneTime ? (
@@ -230,6 +267,36 @@ class DonateForm extends Component {
           </b>
         )}
         <Spacer />
+        <Button
+          block={true}
+          bsStyle='primary'
+          className='btn-cta'
+          id='confirm-donation-btn'
+          onClick={this.handleStripeCheckoutRedirect}
+        >
+          Pay with Apple Pay
+        </Button>
+        <Spacer />
+        <Button
+          block={true}
+          bsStyle='primary'
+          className='btn-cta'
+          id='confirm-donation-btn'
+          onClick={this.handleStripeCheckoutRedirect}
+        >
+          Pay with Google Pay
+        </Button>
+        <Spacer />
+        <Button
+          block={true}
+          bsStyle='primary'
+          className='btn-cta'
+          id='confirm-donation-btn'
+          onClick={this.handleStripeCheckoutRedirect}
+        >
+          Pay with Card
+        </Button>
+        <Spacer />
         {isOneTime ? (
           this.renderPayPalMeLink(donationAmount)
         ) : (
@@ -241,8 +308,6 @@ class DonateForm extends Component {
             skipAddDonation={!isSignedIn}
           />
         )}
-        <Spacer />
-
         <Spacer size={2} />
       </div>
     );

config/donation-settings.js

@@ -23,6 +23,19 @@ const modalDefaultStateConfig = {
   donationDuration: 'month'
 };
 
+const onetimeSKUConfig = {
+  live: [
+    { amount: '100000', id: 'sku_GwHogRRJrCYGms' },
+    { amount: '25000', id: 'sku_GwHnCde23uDH5R' },
+    { amount: '6000', id: 'sku_H5mjFgpayAzJzT' }
+  ],
+  staging: [
+    { amount: '100000', id: 'sku_GvAeUdWLsmGO9O' },
+    { amount: '25000', id: 'sku_GvAdXbsotjFi7G' },
+    { amount: '6000', id: 'sku_GvAeJDgwjnGAdy' }
+  ]
+};
+
 // Configuration for server side
 const durationKeysConfig = ['year', 'month', 'onetime'];
 const donationOneTimeConfig = [100000, 25000, 6000];
@@ -109,6 +122,7 @@ module.exports = {
   donationOneTimeConfig,
   donationSubscriptionConfig,
   modalDefaultStateConfig,
+  onetimeSKUConfig,
   paypalConfigTypes,
   paypalConfigurator
 };