diff --git a/src-ts/lib/button/Button.tsx b/src-ts/lib/button/Button.tsx
index 35594f5dd..0c66d6958 100644
--- a/src-ts/lib/button/Button.tsx
+++ b/src-ts/lib/button/Button.tsx
@@ -6,7 +6,7 @@ import '../styles/index.scss'
 import { IconOutline } from '../svgs'
 
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-export type ButtonStyle = 'icon' | 'link' | 'primary' | 'secondary' | 'tertiary' | 'text'
+export type ButtonStyle = 'icon' | 'icon-bordered' | 'link' | 'primary' | 'secondary' | 'tertiary' | 'text'
 export type ButtonType = 'button' | 'submit'
 
 export interface ButtonProps {
diff --git a/src-ts/lib/payment-form/PaymentForm.module.scss b/src-ts/lib/payment-form/PaymentForm.module.scss
index bcaea22f9..0b3dcf4c4 100644
--- a/src-ts/lib/payment-form/PaymentForm.module.scss
+++ b/src-ts/lib/payment-form/PaymentForm.module.scss
@@ -60,4 +60,10 @@
     .pay-button {
         width: 100%;
     }
+
+    .error {
+        @extend .body-small;
+        color: $red-120;
+        margin-bottom: $pad-lg;
+    }
 }
\ No newline at end of file
diff --git a/src-ts/lib/payment-form/PaymentForm.tsx b/src-ts/lib/payment-form/PaymentForm.tsx
index 404c172fc..840852e59 100644
--- a/src-ts/lib/payment-form/PaymentForm.tsx
+++ b/src-ts/lib/payment-form/PaymentForm.tsx
@@ -31,8 +31,10 @@ interface FieldDirtyState {
 }
 
 interface PaymentFormProps {
+    error: boolean
     formData: PaymentFormData
     isFormValid: boolean
+    onPay: () => void
     onUpdateField: (fieldName: string, value: string | boolean) => void
 }
 
@@ -175,7 +177,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 value={props.formData.name}
             />
 
-            <InputWrapper className={styles['input-wrapper']} label='Date' tabIndex={3} type='text' disabled={false}>
+            <InputWrapper className={styles['input-wrapper']} label='Country' tabIndex={3} type='text' disabled={false}>
                 <ReactSelect
                     value={props.formData.country}
                     onChange={(option) => props.onUpdateField('country', option)}
@@ -206,6 +208,14 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 A hold will be placed on your card for the full amount of the project. Once your work is live on the Topcoder platform, you will be charged.
             </div>
 
+            {
+                props.error && (
+                    <div className={styles['error']}>
+                        Your card was declined. Please try a different card.
+                    </div>
+                )
+            }
+
             <Button
                 className={styles['pay-button']}
                 size='lg'
@@ -214,6 +224,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 name='pay-button'
                 label={`Pay ${props.formData.price}`}
                 disable={!props.isFormValid}
+                onClick={props.onPay}
             />
         </div>
     )
diff --git a/src-ts/lib/styles/_buttons.scss b/src-ts/lib/styles/_buttons.scss
index 9256346a6..68c731458 100644
--- a/src-ts/lib/styles/_buttons.scss
+++ b/src-ts/lib/styles/_buttons.scss
@@ -175,6 +175,7 @@
         font-size: 12px;
     }
 
+    &.icon-bordered,
     &.icon {
         margin: 0;
         padding: $pad-sm calc($pad-sm - $border-xs) $pad-xs $pad-sm;
@@ -195,4 +196,18 @@
             outline: none;
         }
     }
+
+    &.icon-bordered {
+        width: 60px;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        display: flex;
+        height: 40px;
+        & {
+            border: 1px solid $turq-160;
+            padding: $pad-lg;
+            border-radius: 50px;
+        }
+    }
 }
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/index.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/index.ts
index a299782c4..9e1e09a1c 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/index.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/index.ts
@@ -23,6 +23,8 @@ export {
 export * from './work-by-status.model'
 export {
     createAsync as workCreateAsync,
+    createCustomerPayment as workCreateCustomerPayment,
+    confirmCustomerPayment as workConfirmCustomerPayment,
     createFromChallenge as workCreateFromChallenge,
     deleteAsync as workDeleteAsync,
     getAllAsync as workGetAllAsync,
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts
index bdfa3f5f8..97547647d 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts
@@ -25,7 +25,7 @@ import {
 
 import { ChallengeStatus } from './challenge-status.enum'
 
-interface FormDetail {
+export interface FormDetail {
     key: string,
     title: string,
     value: any
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge.model.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge.model.ts
index 8a8d12ceb..b12d5a80a 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge.model.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge.model.ts
@@ -16,6 +16,7 @@ export interface Challenge {
     numOfSubmissions?: number
     phases: Array<ChallengePhase>
     prizeSets?: Array<WorkPrize>
+    projectId?: number
     status: string
     tags: Array<ChallengeTag>
     timelineTemplateId?: string
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts
index 72c054c0b..ee85fcf6a 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts
@@ -28,8 +28,11 @@ export * from './work-type.enum'
 export * from './work-type.model'
 export * from './work-type-category.enum'
 export * from './work.model'
+export * from './work-customer-payment.model'
 export {
+    createCustomerPayment as workStoreCreateCustomerPaymentAsync,
     createAsync as workStoreCreateAsync,
+    confirmCustomerPayment as workStoreConfirmCustomerPaymentAsync,
     deleteAsync as workStoreDeleteAsync,
     getAsync as workStoreGetAsync,
     getChallengeByWorkId as workStoreGetChallengeByWorkId,
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-customer-payment.model.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-customer-payment.model.ts
new file mode 100644
index 000000000..9d9c603db
--- /dev/null
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-customer-payment.model.ts
@@ -0,0 +1,5 @@
+export interface CustomerPayment {
+  clientSecret: string
+  id: string
+  status: string
+}
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-url.config.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-url.config.ts
index 338d3e65e..fe2e43078 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-url.config.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-url.config.ts
@@ -17,4 +17,13 @@ export function updateUrl(workId: string): string {
     return `${challengesPath}/${workId}`
 }
 
+export function updatePaymentUrl(id: string): string {
+    return `${customerPaymentPath}/${id}/confirm`
+}
+
+export function createPaymentUrl(): string {
+    return customerPaymentPath
+}
+
 const challengesPath: string = `${EnvironmentConfig.API.V5}/challenges`
+const customerPaymentPath: string = `${EnvironmentConfig.API.V5}/customer-payments`
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.store.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.store.ts
index a93895efb..f58f18275 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.store.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.store.ts
@@ -1,9 +1,10 @@
 import { Page, xhrDeleteAsync, xhrGetAsync, xhrPatchAsync, xhrPostAsync } from '../../../../../../lib'
 
 import { Challenge, ChallengeCreateBody, ChallengeUpdateBody } from './challenge.model'
+import { CustomerPayment } from './work-customer-payment.model'
 import { WorkStatusFilter } from './work-status-filter.enum'
 import { WorkStatus } from './work-status.enum'
-import { createUrl, deleteUrl, getUrl, updateUrl } from './work-url.config'
+import { createPaymentUrl, createUrl, deleteUrl, getUrl, updatePaymentUrl, updateUrl } from './work-url.config'
 import { Work } from './work.model'
 
 export async function createAsync(body: ChallengeCreateBody): Promise<void> {
@@ -22,6 +23,14 @@ export async function getChallengeByWorkId(workId: string): Promise<Challenge> {
     return xhrGetAsync<Challenge>(updateUrl(workId))
 }
 
+export async function createCustomerPayment(payment: string): Promise<CustomerPayment> {
+    return xhrPostAsync(createPaymentUrl(), payment)
+}
+
+export async function confirmCustomerPayment(id: string): Promise<CustomerPayment> {
+    return xhrPatchAsync(updatePaymentUrl(id), JSON.stringify({}))
+}
+
 export function getFilteredByStatus(work: ReadonlyArray<Work>, workStatusFilter?: WorkStatusFilter): Array<Work> {
     // this is implemented in the work store
     // bc in the future we might actually want
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts
index 501deabcf..0a2023041 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts
@@ -7,12 +7,15 @@ import {
     Challenge,
     ChallengeCreateBody,
     ChallengeUpdateBody,
+    CustomerPayment,
     Work,
     workGetPricesConfig,
     WorkPricesType,
     WorkStatus,
     WorkStatusFilter,
+    workStoreConfirmCustomerPaymentAsync,
     workStoreCreateAsync,
+    workStoreCreateCustomerPaymentAsync,
     workStoreDeleteAsync,
     workStoreGetAsync,
     workStoreGetFilteredByStatus,
@@ -36,6 +39,14 @@ export async function deleteAsync(workId: string): Promise<void> {
     return workStoreDeleteAsync(workId)
 }
 
+export async function createCustomerPayment(body: string): Promise<CustomerPayment> {
+    return workStoreCreateCustomerPaymentAsync(body)
+}
+
+export async function confirmCustomerPayment(id: string): Promise<CustomerPayment> {
+    return workStoreCreateCustomerPaymentAsync(id)
+}
+
 export async function getAllAsync(profile: UserProfile): Promise<Array<Work>> {
 
     // TODO: actual pagination and sorting
diff --git a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx b/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx
index 03619cb40..8ac08dfbb 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx
+++ b/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx
@@ -23,7 +23,7 @@ export const BugHuntFormConfig: FormDefinition = {
         ],
         secondaryGroup: [
             {
-                buttonStyle: 'icon',
+                buttonStyle: 'icon-bordered',
                 icon: BackIcon,
                 onClick: () => { },
                 type: 'button',
diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/Review.module.scss b/src-ts/tools/work/work-self-service/intake-forms/review/Review.module.scss
index 43ad9e3e1..b822774c6 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/review/Review.module.scss
+++ b/src-ts/tools/work/work-self-service/intake-forms/review/Review.module.scss
@@ -45,4 +45,8 @@
             }
         }
     }
+
+    .button-wrapper {
+        margin: 0 $pad-xxxxl $pad-xxxxl $pad-xxxxl;
+    }
 }
diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx b/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx
index 3c401ea62..a0e02a8f4 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx
+++ b/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx
@@ -1,15 +1,24 @@
-import { Elements } from '@stripe/react-stripe-js'
-import { loadStripe, Stripe } from '@stripe/stripe-js'
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { CardNumberElement, Elements, useElements, useStripe } from '@stripe/react-stripe-js'
+import { loadStripe, PaymentMethodResult, Stripe, StripeCardNumberElement, StripeElements } from '@stripe/stripe-js'
+import moment from 'moment'
+import React, { Dispatch, SetStateAction, useContext, useEffect, useState } from 'react'
+import { toastr } from 'react-redux-toastr'
+import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
 
+import { ReactComponent as BackIcon } from '../../../../../../src/assets/images/icon-back-arrow.svg'
 import { EnvironmentConfig } from '../../../../../config'
-import { PaymentForm } from '../../../../../lib'
+import { Button, IconOutline, LoadingSpinner, PageDivider, PaymentForm, profileContext, ProfileContextData } from '../../../../../lib'
 import { WorkDetailDetailsPane } from '../../../work-detail-details'
-import { ChallengeMetadataName, WorkType } from '../../../work-lib'
-import { ChallengeMetadata, workStoreGetChallengeByWorkId } from '../../../work-lib/work-provider/work-functions/work-store'
+import {
+    Challenge,
+    ChallengeMetadataName,
+    workBugHuntConfig,
+    WorkType,
+} from '../../../work-lib'
+import { ChallengeMetadata, workStoreConfirmCustomerPaymentAsync, workStoreCreateCustomerPaymentAsync, workStoreGetChallengeByWorkId, workStoreUpdateAsync } from '../../../work-lib/work-provider/work-functions/work-store'
 import { WorkIntakeFormRoutes } from '../../../work-lib/work-provider/work-functions/work-store/work-intake-form-routes.config'
 import { bugHuntConfig } from '../../../work-lib/work-provider/work-functions/work-store/work-type.config'
+import { WorkServicePrice } from '../../../work-service-price'
 import { WorkTypeBanner } from '../../../work-type-banner'
 import IntakeFormsBreadcrumb from '../intake-forms-breadcrumb/IntakeFormsBreadcrumb'
 
@@ -31,29 +40,51 @@ const Review: React.FC = () => {
     const workId: string | undefined = useParams().workId
     const redirectUrl: string = `${WorkIntakeFormRoutes[WorkType.bugHunt]['basicInfo']}/${workId}`
 
-    const [formData, setFormData]: [any, Dispatch<any>] = useState({})
+    const [challenge, setChallenge]: [Challenge | undefined, Dispatch<SetStateAction<Challenge | undefined>>] = useState()
+    const [formData, setFormData]: [any, Dispatch<any>] = useState<any>({})
+    const { profile }: ProfileContextData = useContext<ProfileContextData>(profileContext)
+    // TODO: Move the state into payment form and this would require the onPay handler also moved to payment form
+    const [formFieldValues, setFormValues]: [FormFieldValues, Dispatch<SetStateAction<FormFieldValues>>] = useState<FormFieldValues>({
+        cardComplete: false,
+        country: '',
+        cvvComplete: false,
+        email: '',
+        expiryComplete: false,
+        name: '',
+        orderContract: false,
+        price: '',
+        zipCode: '',
+    })
+    const [isLoading, setLoading]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+    const [isPaymentFailed, setPaymentFailed]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+    const navigate: NavigateFunction = useNavigate()
+
+    const stripe: Stripe | null = useStripe()
+    const elements: StripeElements | null = useElements()
 
     useEffect(() => {
         const useEffectAsync: () => Promise<void> = async () => {
             // fetch challenge using workId
             const response: any = await workStoreGetChallengeByWorkId(workId || '')
+            setChallenge(response)
             const intakeFormBH: any = response.metadata.find((item: ChallengeMetadata) => item.name === ChallengeMetadataName.intakeForm)
+            const form: any = JSON.parse(intakeFormBH.value).form
             setFormData(JSON.parse(intakeFormBH.value).form)
+            setFormValues({
+                ...formFieldValues,
+                price: `$${getPrice(form.basicInfo.packageType)}`,
+            })
         }
         useEffectAsync()
     }, [workId])
 
-    const [formFieldValues, setFormValues]: [FormFieldValues, Dispatch<SetStateAction<FormFieldValues>>] = useState<FormFieldValues>({
-        cardComplete: false,
-        country: '',
-        cvvComplete: false,
-        email: 'mail@gmail.com',
-        expiryComplete: false,
-        name: 'User name',
-        orderContract: false,
-        price: '$1,899',
-        zipCode: '',
-    })
+    useEffect(() => {
+        setFormValues({
+            ...formFieldValues,
+            email: profile?.email || '',
+            name: `${profile?.firstName} ${profile?.lastName}`,
+        })
+    }, [profile])
 
     const onUpdateField: (fieldName: string, value: string | boolean) => void = (fieldName, value) => {
         setFormValues({
@@ -62,16 +93,142 @@ const Review: React.FC = () => {
         })
     }
 
-    const isFormValid: boolean = formFieldValues.cardComplete
+    function getPrice(packageType: string): any {
+        return workBugHuntConfig.priceConfig.getPrice(workBugHuntConfig.priceConfig, packageType)
+    }
+
+    function renderWorkServicePrice(): JSX.Element {
+        return formData.basicInfo && (
+            <WorkServicePrice
+                duration={workBugHuntConfig.duration}
+                hideTitle
+                icon={<IconOutline.BadgeCheckIcon width={48} height={48} />}
+                price={getPrice(formData.basicInfo.packageType)}
+                serviceType={workBugHuntConfig.type}
+                showIcon
+            />
+        )
+    }
+
+    function isFormValid(): boolean {
+        return formFieldValues.cardComplete
         && formFieldValues.cvvComplete
         && formFieldValues.expiryComplete
         && formFieldValues.orderContract
         && !!formFieldValues.name
         && !!formFieldValues.email
         && !!formFieldValues.zipCode
+    }
+
+    function getStartDate(): string {
+        let daysToAdd: number = 1
+        switch (moment(new Date()).weekday()) {
+            case moment().day('Friday').weekday():
+                daysToAdd = 3
+                break
+            case moment().day('Saturday').weekday():
+                daysToAdd = 2
+                break
+            case moment().day('Sunday').weekday():
+                daysToAdd = 1
+                break
+            default:
+                daysToAdd = 1
+        }
+
+        return moment().add(daysToAdd, 'days').format()
+    }
+
+    function activateChallenge(): void {
+        if (!challenge) {
+            return
+        }
+
+        const newDiscussions: Array<{ [key: string]: string }> = [...(challenge.discussions || [])]
+
+        if (newDiscussions.length > 0) {
+          newDiscussions[0].name = challenge.name
+        } else {
+          newDiscussions.push({
+            name: challenge.name,
+            provider: 'vanilla',
+            type: 'challenge',
+          })
+        }
+
+        const body: any = {
+            discussions: [...newDiscussions],
+            id: challenge.id,
+            startDate: getStartDate(),
+            status: 'Draft',
+        }
+
+        workStoreUpdateAsync(body)
+        .then(() => {
+            navigate(WorkIntakeFormRoutes[WorkType.bugHunt].thankYou)
+        })
+
+    }
+
+    async function onPay(): Promise<any> {
+        if (!stripe || !elements || !challenge) {
+            return
+        }
+
+        setLoading(true)
+        const description: string = `Work Item #${workId}\n${formData.basicInfo.projectTitle.slice(0, 355)}}\n${formData.workType.selectedWorkType}`
+
+        const payload: PaymentMethodResult = await stripe.createPaymentMethod({
+            card: elements.getElement(CardNumberElement) as StripeCardNumberElement,
+            type: 'card',
+        })
+
+        if (!payload) {
+            return
+        }
+
+        const body: string = JSON.stringify({
+            amount: workBugHuntConfig.priceConfig.getPrice(workBugHuntConfig.priceConfig, formData.basicInfo.packageType),
+            currency: 'USD',
+            description,
+            paymentMethodId: payload.paymentMethod && payload.paymentMethod.id,
+            receiptEmail: formFieldValues.email,
+            reference: 'project',
+            referenceId: challenge.projectId?.toString(),
+          })
+
+        workStoreCreateCustomerPaymentAsync(body)
+        .then(async (response) => {
+
+            if (response.status === 'requires_action') {
+                await stripe.handleCardAction(response.clientSecret)
+                return workStoreConfirmCustomerPaymentAsync(response.id)
+                .then(() => {
+                    activateChallenge()
+                })
+            } else {
+                activateChallenge()
+            }
+
+        })
+        .catch(() => {
+            setPaymentFailed(true)
+            toastr.error('Error', 'There was an error processing the payment')
+        })
+        .finally(() => {
+            setLoading(false)
+        })
+    }
+
+    function navigateToBasicInfo(): void {
+        navigate(redirectUrl)
+    }
 
     return (
         <div className={styles['review-container']}>
+            {
+                isLoading && <LoadingSpinner />
+            }
             {/* TODO: We need to not hard code the configs to that of BugHunt and instead
             use the challenge data to determine the WorkType */}
             <IntakeFormsBreadcrumb
@@ -84,6 +241,9 @@ const Review: React.FC = () => {
                 subTitle={bugHuntConfig.review.subtitle}
                 workType={bugHuntConfig.review.type}
             />
+
+            {renderWorkServicePrice()}
+
             <div className={styles['content']}>
                 <div className={styles['left']}>
                     <WorkDetailDetailsPane formData={formData} isReviewPage={true} redirectUrl={redirectUrl} collapsible={true} defaultOpen={true} />
@@ -94,10 +254,21 @@ const Review: React.FC = () => {
                             <h3 className={styles['price']}>{formFieldValues.price}</h3>
                             <div className={styles['label']}>Total Payment</div>
                         </div>
-                        <PaymentForm formData={formFieldValues} onUpdateField={onUpdateField} isFormValid={isFormValid} />
+                        <PaymentForm
+                            formData={formFieldValues}
+                            onUpdateField={onUpdateField}
+                            onPay={onPay}
+                            isFormValid={isFormValid()}
+                            error={isPaymentFailed}
+                        />
                     </div>
                 </div>
             </div>
+
+            <div className={styles['button-wrapper']}>
+                <PageDivider />
+                <Button type='button' buttonStyle='icon-bordered' icon={BackIcon} onClick={navigateToBasicInfo} />
+            </div>
         </div>
     )
 }