Skip to content

feat: add fastlane readme #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nbierdeman merged 2 commits into from
Jun 6, 2025
Merged

feat: add fastlane readme #47

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
55b46e5
Add fastlane readme
nbierdeman Jun 6, 2025
d0203b9
Update url
nbierdeman Jun 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions client/components/fastlane/html/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
# Fastlane HTML Sample Integration

This sample demonstrates how to integrate PayPal Fastlane using plain HTML, JavaScript, and CSS. No build process is required—just static files that can be served by any web server. [Vite](https://vite.dev/) is used locally to serve the files and proxy API requests.

## How to Run Locally

```bash
npm install
npm start
```

- The Fastlane demo will be available at [http://localhost:3000](http://localhost:3000).
- The backend API server (see instructions in `/server/node/README.md`) must also be running on [http://localhost:8080](http://localhost:8080).

## Features

- **Email Lookup:** Enter an email to check if the user is a Fastlane member.
- **Member Experience:** Authenticated members can select shipping addresses and pay with saved cards.
- **Guest Experience:** Guests can enter card details and shipping info.
- **Order Creation:** Submits a PayPal order using the Fastlane payment token.
- **Card Testing Info:** Provides a link to PayPal's sandbox card testing documentation.

## File Structure

- [`src/index.html`](src/index.html): Main HTML page for the Fastlane demo.
- [`src/fastlaneSdkComponent.js`](src/fastlaneSdkComponent.js): Loads the PayPal SDK and initializes Fastlane.
- [`src/fastlane.js`](src/fastlane.js): Handles Fastlane logic, UI updates, and order creation.
- [`src/fastlane.css`](src/fastlane.css): Basic styles for the demo.

## How It Works

1. The page loads the PayPal v6 Web SDK with the Fastlane component.
2. The user enters their email and submits the form.
3. The app checks if the user is a Fastlane member:
- **Member:** Authenticates and displays saved shipping/payment info.
- **Guest:** Prompts for card entry.
4. On order submission, a payment token is generated and sent to the backend to create a PayPal order.

## API Endpoints Used

- `GET /paypal-api/auth/browser-safe-client-token`
- `POST /paypal-api/checkout/orders/create`

> **Note:** The backend API server must be running and configured with your PayPal sandbox credentials (please see the `.env.sample` at the root folder).

## Resources

- [PayPal Fastlane Documentation](https://developer.paypal.com/studio/checkout/fastlane)
- [PayPal Card Testing](https://developer.paypal.com/tools/sandbox/card-testing/)