Update README file

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2022-05-16 18:03:42 +07:00
parent 80f2b72ef8
commit 9bbd1b29a7

View File

@ -10,6 +10,7 @@ Storefront API URL: https://api.open-commerce.io/graphql
- Cart
- Search
- Custom Checkout
- Custom Navigation
## Steps to get started:
@ -21,9 +22,10 @@ COMMERCE_PROVIDER=@vercel/commerce-opencommerce
OPENCOMMERCE_STOREFRONT_API_URL=https://api.open-commerce.io
OPENCOMMERCE_PRIMARY_SHOP_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
OPENCOMMERCE_IMAGE_DOMAIN=api.open-commerce.io
OPENCOMMERCE_STRIPE_API_KEY=
```
**Note**: We can query the primary shop ID from the graphql api playground
3. Run `yarn` and `yarn dev` in the root folder
### Troubleshoot
@ -31,3 +33,24 @@ OPENCOMMERCE_STRIPE_API_KEY=
https://github.com/reactioncommerce/commerce#troubleshoot
For more information about the repository, check out the README file here: https://github.com/reactioncommerce/commerce
## Custom Checkouts
The demo site use [Example Payment Plugin](https://github.com/reactioncommerce/api-plugin-payments-example) for processing payments. To make the checkout flow works as expected, some prerequisite steps need to be handled:
- Add and enable at least one flat-rate shipping option in the admin setting page. By default, we select the first shipping option to create the order
- Enable the `IOU Example` payment method in the admin setting page
- Fill in all the required fields in the `Add Shipping Address` step in the storefront
- After processing checkout, check the orders page in the admin interface to confirm the order has been successfully created
We can also use `Stripe` as the default payment method by following steps:
- Add and enable at least one flat-rate shipping option in the admin setting page. By default, we select the first shipping option to create the order
- Enable the `Stripe (SCA)` payment method in the admin setting page
- Add `OPENCOMMERCE_STRIPE_PUBLIC_API_KEY` env variable to the `site/.env.local` file
- Add `STRIPE_API_KEY` env variable to reaction API `.env` file with the private API key from Stripe
- Modify the `submit-checkout` api endpoint to include additional steps for Stripe payment (eg: create/confirm payment intent, pass payment intent id to placeOrder request body,...).
## Custom Navigation
By default NextJS only display two categories/tags of products in the navbar. This feature enables us to show the organized categories/tags as navigation in the admin to our storefront. Also we can leverage this feature to show URLs that are not relative to the shop (eg: admin page, documentation page, ...). This feature is enabled by default, we can turn it off anytime by modify the value in the `commerce.config.json` file.