feat(api): stripe checkout integration (#41666)

* feat: add api stripe checkout integration

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/redux/donation-saga.js

@@ -21,7 +21,11 @@ import {
   types as appTypes
 } from './';
 
-import { addDonation, postChargeStripe } from '../utils/ajax';
+import {
+  addDonation,
+  postChargeStripe,
+  postCreateStripeSession
+} from '../utils/ajax';
 
 const defaultDonationError = `Something is not right. Please contact donors@freecodecamp.org`;
 
@@ -55,6 +59,24 @@ function* addDonationSaga({ payload }) {
   }
 }
 
+function* createStripeSessionSaga({ payload: { stripe, data } }) {
+  try {
+    const session = yield call(postCreateStripeSession, {
+      ...data,
+      location: window.location.href
+    });
+    stripe.redirectToCheckout({
+      sessionId: session.data.id
+    });
+  } catch (error) {
+    const err =
+      error.response && error.response.data
+        ? error.response.data.message
+        : defaultDonationError;
+    yield put(addDonationError(err));
+  }
+}
+
 function* postChargeStripeSaga({ payload }) {
   try {
     yield call(postChargeStripe, payload);
@@ -72,6 +94,7 @@ export function createDonationSaga(types) {
   return [
     takeEvery(types.tryToShowDonationModal, showDonateModalSaga),
     takeEvery(types.addDonation, addDonationSaga),
-    takeLeading(types.postChargeStripe, postChargeStripeSaga)
+    takeLeading(types.postChargeStripe, postChargeStripeSaga),
+    takeLeading(types.createStripeSession, createStripeSessionSaga)
   ];
 }

client/src/redux/index.js

@@ -31,6 +31,7 @@ export const defaultFetchState = {
 };
 
 export const defaultDonationFormState = {
+  redirecting: false,
   processing: false,
   success: false,
   error: ''
@@ -81,6 +82,7 @@ export const types = createTypes(
     'updateDonationFormState',
     ...createAsyncTypes('fetchUser'),
     ...createAsyncTypes('addDonation'),
+    ...createAsyncTypes('createStripeSession'),
     ...createAsyncTypes('postChargeStripe'),
     ...createAsyncTypes('fetchProfileForUser'),
     ...createAsyncTypes('acceptTerms'),
@@ -150,6 +152,8 @@ export const addDonation = createAction(types.addDonation);
 export const addDonationComplete = createAction(types.addDonationComplete);
 export const addDonationError = createAction(types.addDonationError);
 
+export const createStripeSession = createAction(types.createStripeSession);
+
 export const postChargeStripe = createAction(types.postChargeStripe);
 export const postChargeStripeComplete = createAction(
   types.postChargeStripeComplete
@@ -400,6 +404,10 @@ export const reducer = handleActions(
       ...state,
       donationFormState: { ...state.donationFormState, ...payload }
     }),
+    [types.createStripeSession]: state => ({
+      ...state,
+      donationFormState: { ...defaultDonationFormState, redirecting: true }
+    }),
     [types.addDonation]: state => ({
       ...state,
       donationFormState: { ...defaultDonationFormState, processing: true }