Reusable Stripe Flow

Overview

This documentation outlines the implementation of a reusable flow for integrating Stripe into multiple applications. The goal is to create a shared package that can be easily integrated into various apps, similar to the DEX flow. This document provides instructions for implementing the flow in the Vult application as an initial step, followed by integration with other apps.

1. Layout

The first step is to create a reusable layout component that will serve as the foundation for the Stripe flow. Follow the steps below to create the layout:

Location: /packages/shared/src/layout/stripe/StripeLayout.js

Usage:

The StripeLayout component accepts an `appType` parameter, which can be used to customize the layout based on the specific application's requirements.

2. Screens

Next, we need to create multiple screens that will be part of the Stripe flow. The following screens are required:

• PaymentInfo

• UserInfo

• Membership | Plans

Create these screens using the following directory structure:

Location: /packages/shared/src/screen/stripe/

Dynamic Layout:

Since all these screens share the same layout, we will create a dynamic layout component that can be used with each screen.

Location: /packages/shared/src/layout/stripe/DynamicPaymentFlow.js

3. Usage

To use the Stripe flow in an application, follow the steps below:

Location: packages/appName/pages/payment/[path].js

Import the DynamicPaymentFlow component from the 'screens' module, and create a PaymentPage component that renders the DynamicPaymentFlow component with the appropriate appType prop.

Example:

import { DynamicPaymentFlow } from 'screens'
const PaymentPage = () => <DynamicPaymentFlow appType="vult" />
export default PaymentPage

Note: Don't forget to add the corresponding route in the i18n.js file.

4. Integration

For integrating the Stripe flow into the Vult application, please refer to this loom video for detailed instructions on the UI aspects.

In the PurchaseZcnSelectDialog.js file, make sure to include the `onCreditCardClick` prop. This prop should handle storing the payment information in the Redux store and redirecting the user to the payment screen.

Example:

const handleOnCreditCardClick = () => {
router.push('/payment/userinfo')
dispatch(addPaymentsInfo())
}

Please integrate the Stripe flow into the Vult application first before proceeding with other apps.