https://github.com/hygraph/reference-remote-fields-stripe
https://github.com/hygraph/reference-remote-fields-stripe
graphcms nextjs reference-implementation
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hygraph/reference-remote-fields-stripe
- Owner: hygraph
- License: mit
- Created: 2021-01-21T12:00:45.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-11-11T05:20:43.000Z (over 1 year ago)
- Last Synced: 2025-04-03T01:58:13.093Z (3 months ago)
- Topics: graphcms, nextjs, reference-implementation
- Language: JavaScript
- Homepage: https://reference-remote-fields-stripe.vercel.app
- Size: 55.7 KB
- Stars: 4
- Watchers: 5
- Forks: 1
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# reference-remote-fields-stripe
> Query product and price data from [Stripe](https://stripe.com/docs/api) using GraphCMS [Remote Fields](https://graphcms.com/docs/schema/field-types#remote) 💳
## About
This reference is basic example of Content Federation, using Remote Fields to connect a `PricingPlan` type with third-party product and pricing data from Stripe. A common use case would be to enrich recurring or one-time Stripe products with data from GraphCMS (such as images or additional text content).
Built with [Next.js](https://nextjs.org/) and [Tailwind CSS](https://tailwindcss.com).
## Usage
> This assumes you have already created a GraphCMS project and have an existing Stripe account
1. Clone with repository with [`degit`](https://github.com/Rich-Harris/degit) and install project dependencies.
```bash
npx degit GraphCMS/reference-remote-fields-stripe#main reference-remote-fields-stripe
cd reference-remote-fields-stripe
yarn
```
2. Add a `.env` file by cloning the provided `.env.sample` and providing the required variable values.
```
GRAPHCMS_MIGRATION_TOKEN=
GRAPHCMS_TOKEN=
GRAPHCMS_URL=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
```
2. Build the required GraphCMS schema, including Remote Fields, using the Management SDK. This repository [includes](migration.js) the migration script that was used to bootstrap this project. You can run the provided migration with `yarn migrate`.
3. Populate your GraphCMS project with `PricingPlan` content entries. Be sure you to provide the relevant IDs (`stripeMonthlyPriceId`, `stripeAnnualPriceId`) for the Stripe prices created in your Stripe dashboard.
4. Start the project!
```
yarn dev
```