Skip to content

Commit 8347258

Browse files
EvanReinsteinEvanReinstein
authored
feat(react): add credit and subscription static UI components (#175)
1 parent 873f35c commit 8347258

File tree

16 files changed

+55
-564
lines changed

16 files changed

+55
-564
lines changed

‎client/prebuiltPages/react/README.md‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -73,25 +73,22 @@ The Vite dev server proxies `/paypal-api` requests to the backend server on port
7373

7474
## Application Routes
7575

76-
| Route | Description |
77-
| ------------------------------- | --------------------------------------- |
78-
| `/` | Home page with navigation |
79-
| `/one-time-payment` | One-Time Payment product page |
80-
| `/one-time-payment/cart` | One-Time Payment cart page |
81-
| `/one-time-payment/checkout` | One-Time Payment checkout page |
82-
| `/one-time-payment/static-demo` | One-Time Payment static buttons demo |
83-
| `/one-time-payment/error` | One-Time Payment error boundary demo |
84-
| `/save-payment` | Save Payment product page |
85-
| `/save-payment/cart` | Save Payment cart page |
86-
| `/save-payment/checkout` | Save Payment checkout page |
87-
| `/save-payment/static-demo` | Save Payment static buttons demo |
88-
| `/save-payment/error` | Save Payment error boundary demo |
89-
| `/subscription` | Subscription product page |
90-
| `/subscription/cart` | Subscription cart page |
91-
| `/subscription/checkout` | Subscription checkout page |
92-
| `/subscription/static-demo` | Subscription static buttons demo |
93-
| `/subscription/error` | Subscription error boundary demo |
94-
| `/error-boundary-test` | Standalone error handling demonstration |
76+
| Route | Description |
77+
| ---------------------------- | --------------------------------------- |
78+
| `/` | Home page with navigation |
79+
| `/one-time-payment` | One-Time Payment product page |
80+
| `/one-time-payment/cart` | One-Time Payment cart page |
81+
| `/one-time-payment/checkout` | One-Time Payment checkout page |
82+
| `/one-time-payment/error` | One-Time Payment error boundary demo |
83+
| `/save-payment` | Save Payment product page |
84+
| `/save-payment/cart` | Save Payment cart page |
85+
| `/save-payment/checkout` | Save Payment checkout page |
86+
| `/save-payment/error` | Save Payment error boundary demo |
87+
| `/subscription` | Subscription product page |
88+
| `/subscription/cart` | Subscription cart page |
89+
| `/subscription/checkout` | Subscription checkout page |
90+
| `/subscription/error` | Subscription error boundary demo |
91+
| `/error-boundary-test` | Standalone error handling demonstration |
9592

9693
## Project Structure
9794

‎client/prebuiltPages/react/package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/prebuiltPages/react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"typecheck": "tsc --build --noEmit"
1414
},
1515
"dependencies": {
16-
"@paypal/react-paypal-js": "^9.0.0-alpha.11",
16+
"@paypal/react-paypal-js": "^9.0.0-alpha.12",
1717
"react": "19.2.4",
1818
"react-dom": "19.2.4",
1919
"react-error-boundary": "6.1.0",

‎client/prebuiltPages/react/src/App.tsx‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,19 @@ import BaseProduct from "./pages/BaseProduct";
99
import BaseCart from "./pages/BaseCart";
1010

1111
// One-Time Payment flow
12-
import OneTimeCheckoutPage from "./payments/oneTimePayment/pages/Checkout";
13-
import OneTimeStaticButtonsDemo from "./payments/oneTimePayment/pages/StaticButtons";
12+
import OneTimeCheckoutPage from "./paymentFlowCheckoutPages/OneTimePaymentCheckout";
1413

1514
// Save Payment flow
16-
import SavePaymentCheckoutPage from "./payments/savePayment/pages/Checkout";
17-
import SavePaymentStaticButtonsDemo from "./payments/savePayment/pages/StaticButtons";
15+
import SavePaymentCheckoutPage from "./paymentFlowCheckoutPages/SavePaymentCheckout";
1816

1917
// Subscription flow
20-
import SubscriptionCheckoutPage from "./payments/subscription/pages/Checkout";
21-
import SubscriptionStaticButtonsDemo from "./payments/subscription/pages/StaticButtons";
18+
import SubscriptionCheckoutPage from "./paymentFlowCheckoutPages/SubscriptionCheckout";
2219

2320
// Error handling demo
2421
import ErrorBoundaryTestPage from "./pages/ErrorBoundary";
2522

2623
// PayPal Messages demo
27-
import PayPalMessagesDemo from "./pages/PayPalMessagesDemo";
24+
import PayPalMessagesDemo from "./paypalMessages/PayPalMessagesDemo";
2825

2926
function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
3027
return (
@@ -121,10 +118,6 @@ function App() {
121118
path="/one-time-payment/checkout"
122119
element={<OneTimeCheckoutPage />}
123120
/>
124-
<Route
125-
path="/one-time-payment/static-demo"
126-
element={<OneTimeStaticButtonsDemo />}
127-
/>
128121
<Route
129122
path="/one-time-payment/error"
130123
element={<ErrorBoundaryTestPage />}
@@ -143,10 +136,6 @@ function App() {
143136
path="/save-payment/checkout"
144137
element={<SavePaymentCheckoutPage />}
145138
/>
146-
<Route
147-
path="/save-payment/static-demo"
148-
element={<SavePaymentStaticButtonsDemo />}
149-
/>
150139
<Route
151140
path="/save-payment/error"
152141
element={<ErrorBoundaryTestPage />}
@@ -165,10 +154,7 @@ function App() {
165154
path="/subscription/checkout"
166155
element={<SubscriptionCheckoutPage />}
167156
/>
168-
<Route
169-
path="/subscription/static-demo"
170-
element={<SubscriptionStaticButtonsDemo />}
171-
/>
157+
172158
<Route
173159
path="/subscription/error"
174160
element={<ErrorBoundaryTestPage />}

‎client/prebuiltPages/react/src/pages/BaseProduct.tsx‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useNavigate, Link } from "react-router-dom";
1+
import { useNavigate } from "react-router-dom";
22
import ProductDisplay from "../components/ProductDisplay";
33
import { useProducts } from "../hooks/useProducts";
44
import { useQuantityChange } from "../hooks/useQuantityChange";
@@ -35,31 +35,6 @@ const BaseProduct = ({ flowType }: ProductPageProps) => {
3535

3636
return (
3737
<div className="product-page-container">
38-
<div
39-
style={{
40-
marginBottom: "30px",
41-
display: "flex",
42-
gap: "12px",
43-
justifyContent: "center",
44-
flexWrap: "wrap",
45-
}}
46-
>
47-
<Link
48-
to={`/${flowType}/static-demo`}
49-
style={{
50-
padding: "0.75rem 1.5rem",
51-
backgroundColor: "#0070ba",
52-
color: "white",
53-
textDecoration: "none",
54-
border: "none",
55-
borderRadius: "4px",
56-
cursor: "pointer",
57-
}}
58-
>
59-
📄 Static Button Demo
60-
</Link>
61-
</div>
62-
6338
<ProductDisplay
6439
products={products}
6540
onQuantityChange={handleQuantityChange}

client/prebuiltPages/react/src/payments/oneTimePayment/pages/Checkout.tsx renamed to client/prebuiltPages/react/src/paymentFlowCheckoutPages/OneTimePaymentCheckout.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,18 @@ import {
1212
VenmoOneTimePaymentButton,
1313
PayLaterOneTimePaymentButton,
1414
PayPalGuestPaymentButton,
15+
// PayPalCreditOneTimePaymentButton,
1516
} from "@paypal/react-paypal-js/sdk-v6";
16-
import BaseCheckout from "../../../pages/BaseCheckout";
17-
import type { ModalType, ModalContent, ProductItem } from "../../../types";
18-
import { captureOrder, createOrder } from "../../../utils";
17+
import BaseCheckout from "../pages/BaseCheckout";
18+
import type { ModalType, ModalContent, ProductItem } from "../types";
19+
import { captureOrder, createOrder } from "../utils";
1920

2021
/**
2122
* Checkout page for one-time payments.
2223
*
2324
* Uses useEligibleMethods to check payment method eligibility for one-time payments.
2425
*/
25-
const Checkout = () => {
26+
const OneTimePaymentCheckout = () => {
2627
const [modalState, setModalState] = useState<ModalType>(null);
2728
const { loadingStatus } = usePayPal();
2829
const navigate = useNavigate();
@@ -136,6 +137,16 @@ const Checkout = () => {
136137
{...handlePaymentCallbacks}
137138
/>
138139

140+
{/*
141+
This is an example of the PayPalCreditOneTimePaymentButton.
142+
In this example we leverage the PayLaterOneTimePaymentButton instead of Credit.
143+
*/}
144+
{/* <PayPalCreditOneTimePaymentButton
145+
createOrder={handleCreateOrder}
146+
presentationMode="auto"
147+
{...handlePaymentCallbacks}
148+
/> */}
149+
139150
<PayPalGuestPaymentButton
140151
createOrder={handleCreateOrder}
141152
{...handlePaymentCallbacks}
@@ -154,4 +165,4 @@ const Checkout = () => {
154165
);
155166
};
156167

157-
export default Checkout;
168+
export default OneTimePaymentCheckout;

client/prebuiltPages/react/src/payments/savePayment/pages/Checkout.tsx renamed to client/prebuiltPages/react/src/paymentFlowCheckoutPages/SavePaymentCheckout.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@ import {
99
type OnErrorData,
1010
type OnCancelDataSavePayments,
1111
PayPalSavePaymentButton,
12+
PayPalCreditSavePaymentButton,
1213
} from "@paypal/react-paypal-js/sdk-v6";
13-
import PayPalCreditSaveButton from "../components/PayPalCreditSaveButton";
14-
import BaseCheckout from "../../../pages/BaseCheckout";
15-
import type { ModalType, ModalContent } from "../../../types";
16-
import { createVaultToken } from "../../../utils";
14+
import BaseCheckout from "../pages/BaseCheckout";
15+
import type { ModalType, ModalContent } from "../types";
16+
import { createVaultToken } from "../utils";
1717

1818
/**
1919
* Checkout page for saving payment methods (vaulting).
2020
*
2121
* Uses useEligibleMethods to check payment method eligibility for vaulting without payment.
2222
*/
23-
const Checkout = () => {
23+
const SavePaymentCheckout = () => {
2424
const [modalState, setModalState] = useState<ModalType>(null);
2525
const { loadingStatus } = usePayPal();
2626
const navigate = useNavigate();
@@ -111,7 +111,7 @@ const Checkout = () => {
111111
</div>
112112

113113
<div>
114-
<PayPalCreditSaveButton
114+
<PayPalCreditSavePaymentButton
115115
createVaultToken={createVaultToken}
116116
presentationMode="auto"
117117
{...handleSaveCallbacks}
@@ -131,4 +131,4 @@ const Checkout = () => {
131131
);
132132
};
133133

134-
export default Checkout;
134+
export default SavePaymentCheckout;

client/prebuiltPages/react/src/payments/subscription/pages/Checkout.tsx renamed to client/prebuiltPages/react/src/paymentFlowCheckoutPages/SubscriptionCheckout.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import {
88
type OnCompleteData,
99
type OnCancelDataOneTimePayments,
1010
type OnErrorData,
11+
PayPalSubscriptionButton,
1112
} from "@paypal/react-paypal-js/sdk-v6";
12-
import PayPalSubscriptionButton from "../components/PayPalSubscriptionButton";
13-
import BaseCheckout from "../../../pages/BaseCheckout";
14-
import type { ModalType, ModalContent } from "../../../types";
15-
import { createSubscription } from "../../../utils";
13+
import BaseCheckout from "../pages/BaseCheckout";
14+
import type { ModalType, ModalContent } from "../types";
15+
import { createSubscription } from "../utils";
1616

1717
/**
1818
* Checkout page for subscription payments.

‎client/prebuiltPages/react/src/payments/oneTimePayment/components/PayPalCreditOneTimeButton.tsx‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

0 commit comments

Comments
 (0)