fix: fine-tuning (#847)

fix: checkout guide markdown + punctuation
fix: remove @docusaurus/theme-search-algolia from project root package.json
fix: use 400 font-weight for paragraphs as opposed to current 450
This commit is contained in:
Zakaria El Asri
2021-11-26 14:41:01 +01:00
committed by GitHub
parent 7f7682ef01
commit 032fcb97ca
3 changed files with 17 additions and 18 deletions

View File

@@ -19,19 +19,19 @@ The purpose of this guide is to describe a checkout flow in Medusa. It is assume
To create an order from a cart, we go through the following flow.
> At this point, it assumed that the customer has created a cart, added items and is now at the initial step of the checkout flow.
#### Initializing the checkout
### Initializing the checkout
The first step in the flow is to _initialize_ the configured Payment Sessions for the Cart. If you are using the `medusa-starter-default` starter, this call will result in the `cart.payment_sessions` array being filled with one Payment Session for the manual payment provider.
```javascript=
```javascript
const { cart } = await medusa.carts.createPaymentSessions("cart_id")
```
To give a more real life example, it is assumed that `medusa-payment-stripe` is installed in your project in which case the call will result in a [Stripe PaymentIntent](https://stripe.com/docs/api/payment_intents) being created. The unique provider data for each Payment Session can be found in the Payment Session's `data` field; this data can be used in front end implementations e.g. if using Stripe Elements the `client_secret` can be retrieved through `session.data.client_secret`.
#### Adding customer information
### Adding customer information
After initializing the checkout flow, you would typically have one big step or several smaller steps for gathering user information; email, address, country, and more. To store this data you may update the cart with each of field or all fields at the same time.
```javascript=
```javascript
const { cart } = await medusa.carts.update("cart_id", {
email: "lebron@james.com",
shipping_address: {
@@ -42,18 +42,18 @@ const { cart } = await medusa.carts.update("cart_id", {
})
```
#### Selecting payment provider
This step is only applicable, if you have multiple Payment Sessions installed in your project. In cases where only one Payment Provider is configured the Payment Session will be preselected. In all other cases your implementations should call:
### Selecting payment provider
This step is only applicable if you have multiple Payment Sessions installed in your project. In cases where only one Payment Provider is configured the Payment Session will be preselected. In all other cases your implementations should call:
```javascript=
```javascript
const { cart } = await medusa.carts.setPaymentSession("cart_id", {
provider_id: "stripe"
})
```
#### Choosing a shipping method
### Choosing a shipping method
Before reaching the payment step, you would typically require the customer to choose a Shipping Method from a number of options. In Medusa you can set rules that must be met for a Shipping Option to be available for a Cart. To get the available shipping options for a Cart you should call:
```javascript=
```javascript
const { shipping_options } = await medusa.carts.listCartOptions("cart_id")
```
@@ -62,9 +62,9 @@ Choosing a Shipping Option, will create a Shipping Method and attach it to the C
const { cart } = await medusa.carts.addShippingMethod("cart_id", { option_id: "option_id"})
```
#### Collecting payment details
The following snippet shows, how we use Stripe to collect payment details from the customer. Note that we are using the `client_secret` from the Stripe PaymentIntent in `data` on the payment session as this is required by Stripe Elements.
```javascript=
### Collecting payment details
The following snippet shows how we use Stripe to collect payment details from the customer. Note that we are using the `client_secret` from the Stripe PaymentIntent in `data` on the payment session as this is required by Stripe Elements.
```jsx
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
...
@@ -90,15 +90,15 @@ return <CardElement id="card-element" />
```
After collecting the payment details, the customer can complete the checkout flow.
#### Completing the cart
When all relevant customer information has been captured, your implementation should proceed to the final step; completing the cart.
```javascript=
### Completing the cart
When all relevant customer information has been captured, your implementation should proceed to the final step: completing the cart.
```javascript
const { order } = await medusa.carts.complete("cart_id")
```
If all information is collected correctly throughout the checkout flow, the call will place an Order based on the details gathered in the Cart.
## Summary
You now have a solid foundation for creating your own checkout flows using Medusa. Throughout this guide, we've used Stripe as a Payment Provider. Stripe is one of the most popular providers and we have an official plugin, that you can easily install in your project.
You now have a solid foundation for creating your own checkout flows using Medusa. Throughout this guide, we've used Stripe as a Payment Provider. Stripe is one of the most popular providers and we have an official plugin that you can easily install in your project.
## What's next?
See the checkout flow, explained in the previous sections, in one of our frontend starters:

View File

@@ -54,7 +54,6 @@
"test:fixtures": "jest --config=docs-util/jest.config.js --runInBand"
},
"dependencies": {
"@docusaurus/theme-search-algolia": "^2.0.0-beta.3",
"global": "^4.4.0",
"import-from": "^3.0.0",
"oas-normalize": "^5.0.1",

View File

@@ -57,7 +57,7 @@ h1, h2, h3 {
}
p {
font-weight: 450;
font-weight: 400;
}
/* DocSearch */