Skip to content

Commit

Permalink
docs: resolved occurrences of gatsby storefront (medusajs#3754)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shahednasser
shahednasser authored Apr 6, 2023
1 parent 8277a74 commit 3693322
Show file tree
Hide file tree
Showing 5 changed files with 7 additions and 439 deletions.
2 changes: 1 addition & 1 deletion docs/content/deployments/server/deploying-on-railway.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,4 +217,4 @@ For example, you can run commands on the backend to seed the database or create
## See Also

- [Deploy the Medusa Admin](../admin/index.mdx)
- [Deploy the Gatsby Storefront to Netlify](../storefront/deploying-gatsby-on-netlify.md)
- [Deploy the Storefront](../storefront/index.mdx)
164 changes: 0 additions & 164 deletions docs/content/plugins/payment/paypal.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,170 +144,6 @@ Now, if you run your Medusa backend and your storefront, on checkout you’ll be

You can test out the payment with PayPal using your sandbox account.

### Add to Gatsby Storefront

:::note

Medusa's Gatsby storefront is deprecated and it is recommended to use the [Next.js storefront](../../starters/nextjs-medusa-starter.mdx) or build your own storefront instead.

:::

In your `.env.development` file (or the file you’re using for your environment variables) add the following variable with its value set to the Client ID:

```bash title=.env.development
GATSBY_PAYPAL_CLIENT_ID=<CLIENT_ID>
```

Then, install [PayPal’s React components](https://www.npmjs.com/package/@paypal/react-paypal-js) library:

```bash npm2yarn
npm install @paypal/react-paypal-js
```

Next, create a new file `src/components/payment/paypal-payment/index.jsx` with the following content:

```jsx title=src/components/payment/paypal-payment/index.jsx
import {
PayPalButtons,
PayPalScriptProcessor,
} from "@paypal/react-paypal-js"
import React, { useMemo, useState } from "react"

import { navigate } from "gatsby"
import { useCart } from "../../../hooks/use-cart"
import { useMedusa } from "../../../hooks/use-medusa"

const paypalClientId = process.env.GATSBY_PAYPAL_CLIENT_ID || ""

const PaypalPayment = () => {
const {
cart,
actions: { completeCart, setPaymentSession },
} = useCart()
const [errorMessage, setErrorMessage] = useState(undefined)
const [processing, setProcessing] = useState(false)

const client = useMedusa()

const paypalSession = useMemo(() => {
if (cart.payment_sessions) {
return cart.payment_sessions.find(
(s) => s.processor_id === "paypal"
)
}

return null
}, [cart.payment_sessions])

if (!paypalSession) {
return null
}

const completeOrder = async (authorizationOrder) => {
const cart = await setPaymentSession("paypal")

if (!cart) {
setProcessing(false)
return
}

await client.carts.updatePaymentSession(cart.id, "paypal", {
data: {
data: {
...authorizationOrder,
},
},
})

const order = await completeCart(cart.id)

if (!order || order.object !== "order") {
setProcessing(false)
return
}

setProcessing(false)
navigate("/order-confirmed", { state: { order } })
}

const handlePayment = (data, actions) => {
actions.order.authorize().then((authorization) => {
if (authorization.status !== "COMPLETED") {
setErrorMessage(
`An error occurred, status: ${authorization.status}`
)
setProcessing(false)
return
}

completeOrder(authorization)
})
}

return (
<PayPalScriptProcessor options={{
"client-id": paypalClientId,
"currency": cart.region.currency_code.toUpperCase(),
"intent": "authorize",
}}>
{errorMessage && (
<span className="text-rose-500 mt-4">
{errorMessage}
</span>
)}
<PayPalButtons
style={{ layout: "horizontal" }}
onApprove={handlePayment}
disabled={processing}
/>
</PayPalScriptProcessor>
)
}

export default PaypalPayment
```

Here’s briefly what this code snippet does:

1. This component renders a PayPal button to initialize the payment using PayPal. You use the components from the PayPal React components library to render the button and you pass the `PayPalScriptProcessor` component the Client ID.
2. When the button is clicked, the `handlePayment` function is executed. In this method, you initialize the payment authorization using `actions.order.authorize()`. It takes the customer to another page to log in with PayPal and authorize the payment.
3. After the payment is authorized successfully on PayPal’s portal, the fulfillment function passed to `actions.order.authorize().then` will be executed which calls the `completeOrder` function.
4. In `completeOrder`, you first ensure that the payment session for the PayPal payment processor is set as the [selected Payment Session in the cart](/api/store/#tag/Cart/operation/PostCartsCartPaymentSession). Then, you send a request to the backend to [update the payment session](/api/store#tag/Cart/operation/PostCartsCartPaymentSessionUpdate) data with the authorization data received from PayPal.
5. You then [complete the cart and place the order](/api/store/#tag/Cart/operation/PostCartsCartComplete). If that is done successfully, you navigate to the `/order-confirmed` page.

The last step is to add this component as the component to render when PayPal is available as a payment processor.

In `src/components/payment/index.js` you’ll find in the return statement a switch statement that checks the payment processor for each payment session and renders the component based on the ID. Add before the `default` case a case for `paypal`:

```jsx title=src/components/payment/index.js
switch (ps.processor_id) {
case "stripe":
// ...
break
case "manual":
// ...
break
case "paypal":
return <PaypalPayment />
default:
return null
}
```

Make sure to also import the `PayPalPayment` component at the top of the file:

```jsx
import PaypalPayment from "./paypal-payment"
```

That’s all you need to integrate PayPal into the Gatsby storefront.

Now, start the Medusa backend and the Gatsby storefront backend. Try adding an item into the cart and proceeding to checkout. When you reach the payment step, you should see the PayPal button.

![PayPal Button](https://res.cloudinary.com/dza7lstvk/image/upload/v1668000477/Medusa%20Docs/PayPal/SMLrptP_g6b22m.png)

You can test out the payment with PayPal using your sandbox account.

### Add to Custom Storefront

This section guides you to add PayPal into a React-based framework. The instructions are general instructions that you can use in your storefront.
Expand Down
24 changes: 0 additions & 24 deletions docs/content/plugins/payment/stripe.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,30 +146,6 @@ Now, if you run your Medusa backend and your storefront, on checkout you’ll be

![Next.js Stripe Form](https://res.cloudinary.com/dza7lstvk/image/upload/v1668001145/Medusa%20Docs/Stripe/h5mWdJT_n1bktt.png)

### Add to Gatsby Storefront

:::note

Medusa's Gatsby storefront is deprecated and it is recommended to use the [Next.js storefront](../../starters/nextjs-medusa-starter.mdx) or build your own storefront instead.

:::

In your `.env.development` file (or the file you’re using for your environment variables) add the following variable with the value set to the Publishable Key:

```jsx title=.env.development
GATSBY_STRIPE_KEY=pk_
```

:::note

You might find this environment variable already available so you can just replace its value with your Publishable Key.

:::

Now, if you run your Medusa backend and your storefront, on checkout you’ll be able to use Stripe.

![Gatsby Stripe Form](https://res.cloudinary.com/dza7lstvk/image/upload/v1668001172/Medusa%20Docs/Stripe/1XvW776_omosuz.png)

### Add to Custom Storefront

This section will go over how to add Stripe into a React-based framework. The instructions are general instructions that you can use in your storefront.
Expand Down
127 changes: 3 additions & 124 deletions docs/content/plugins/search/algolia.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,134 +287,13 @@ To make sure the Next.js storefront properly displays the products in the search

![Search pop up in the Next.js storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1668000082/Medusa%20Docs/Algolia/1f9qqK6_c0z8zi.png)

### Add to Gatsby and React-Based Storefronts
### Add to Other Storefronts

This section covers adding the search UI to React-based storefronts. It uses the Gatsby storefront as an example, but you can use the same steps on any React-based framework.

:::tip

For other frontend frameworks, please check out [Algolia’s Integrations guide](https://www.algolia.com/developers/?ui-libraries&client-libraries) for steps based on your framework.

:::

In the directory that contains your storefront, run the following command to install the necessary dependencies:

```bash npm2yarn
npm install algoliasearch react-instantsearch-dom
```

Then, add the following environment variables:

```bash
GATSBY_ALGOLIA_APP_ID=<YOUR_APP_ID>
GATSBY_ALGOLIA_SEARCH_API_KEY=<YOUR_SEARCH_API_KEY>
GATSBY_SEARCH_INDEX_NAME=products
```

Where `<YOUR_APP_ID>` and `<YOUR_SEARCH_API_KEY>` are respectively the Application ID and Search-Only API Key on the [API Keys page](#retrieve-api-keys).

:::note

In Gatsby, environment variables that should be public and available in the browser are prefixed with `GATSBY_`. If you’re using another React-based framework, you might need to use a different prefix to ensure these variables can be used in your code. Please refer to your framework’s documentation for help on this.

:::

Then, create the file `src/components/header/search.jsx` with the following content:

```jsx title=src/components/header/search.jsx
import {
Highlight,
Hits,
InstantSearch,
SearchBox,
connectStateResults,
} from "react-instantsearch-dom"

import React from "react"
import algoliasearch from "algoliasearch/lite"

const searchClient = algoliasearch(
process.env.GATSBY_ALGOLIA_APP_ID,
process.env.GATSBY_ALGOLIA_SEARCH_API_KEY
)

const Search = () => {
const Results = connectStateResults(
({ searchState, searchResults, children }) => {
return (
searchState && searchState.query &&
searchResults && searchResults.nbHits !== 0 ?
(
<div
className="absolute ...">
{children}
</div>
) : (
<div></div>
)
)
}
)

return (
<div className="relative">
<InstantSearch
indexName={process.env.GATSBY_SEARCH_INDEX_NAME}
searchClient={searchClient}>
<SearchBox submit={null} reset={null} />
<Results>
<Hits hitComponent={Hit} />
</Results>
</InstantSearch>
</div>
)
}

const Hit = ({ hit }) => {
return (
<div key={hit.id} className="relative">
<div className="hit-name">
<Highlight attribute="title" hit={hit} tagName="mark" />
</div>
</div>
)
}

export default Search
```

This file uses the dependencies you installed to show the search results. It also initializes Algolia using the environment variables you added.

:::note

If you named your environment variables differently based on your framework, make sure to rename them here as well.

:::note

Finally, import this file at the beginning of `src/components/header/index.jsx`:

```jsx title=src/components/header/index.jsx
import Search from "./search"
```

And add the `Search` component in the returned JSX before `RegionPopover`:

```jsx title=src/components/header/index.jsx
// ...
<div className="...">
<Search />
<RegionPopover regions={mockData.regions} />
</div>
// ...
```

If you run your Gatsby storefront while the Medusa backend is running, you should find a search bar in the header of the page. Try entering a query to search through the products in your store.

![Search bar in the Gatsby storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1668000097/Medusa%20Docs/Algolia/INtlcIo_jlh16x.png)
To integrate Algolia's search functionalities in your storefront, please refer to [Algolia's InstantSearch.js documentation](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/). You'll find packages for different frontend frameworks and how you can use them.

---

## See Also

- [Deploy your Medusa backend](../../deployments/server/index.mdx)
- [Deploy your Gatsby storefront](../../deployments/storefront/deploying-gatsby-on-netlify.md)
- [Deploy your storefront](../../deployments/storefront/index.mdx)
Loading

0 comments on commit 3693322

Please sign in to comment.