You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: www/apps/resources/app/nextjs-starter/guides/customize-stripe/page.mdx
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -179,7 +179,7 @@ Do this for all regions you want to enable Stripe for.
179
179
180
180
## Step 2: Update Payment Step in Checkout
181
181
182
-
You'll start customizing the Next.js Starter Storefront by updating the payment step in the checkout process. By default, the payment step is implemented to show all available payment methods in the region the user is in, and allows the user to select one of them.
182
+
You'll start customizing the Next.js Starter Storefront by updating the payment step in the checkout process. By default, the payment step is implemented to show all available payment methods in the region the customer is in, and allows the customer to select one of them.
183
183
184
184
In this step, you'll replace the current payment method selection with Stripe's Payment Element. You'll no longer need to handle different payment methods separately, as the Payment Element will automatically adapt to the available methods configured in your Stripe account.
This function will be called on every change in Stripe's Payment Element, such as when the customer selects a payment method.
262
262
263
-
In the function, you update the `selectedPaymentMethod` state with the type of payment method selected by the user, set `stripeComplete` to true when the payment element is complete, and clear any error messages when the payment element is complete.
263
+
In the function, you update the `selectedPaymentMethod` state with the type of payment method selected by the customer, set `stripeComplete` to true when the payment element is complete, and clear any error messages when the payment element is complete.
264
264
265
265
Then, to customize the payment step's submission, replace the `handleSubmit` function with the following:
In this function, you use the `elements.submit()` method to submit the payment method details entered by the user in the Payment Element. This doesn't actually confirm the payment yet; it just prepares the payment method for confirmation.
298
+
In this function, you use the `elements.submit()` method to submit the payment method details entered by the customer in the Payment Element. This doesn't actually confirm the payment yet; it just prepares the payment method for confirmation.
299
299
300
-
Once the payment method is submitted successfully, you navigate the user to the Review step of the checkout process.
300
+
Once the payment method is submitted successfully, you navigate the customer to the Review step of the checkout process.
301
301
302
302
Next, to make sure a payment session is initialized when the customer reaches the payment step, add the following to the `Payment` component:
303
303
@@ -890,7 +890,7 @@ In the function, you:
890
890
891
891
- Ensure that the `stripe`, `elements`, and `cart` are available before proceeding.
892
892
- Set the `submitting` state to true to indicate that the payment is being processed.
893
-
- Use `elements.submit()` to submit the payment method details entered by the user in the Payment Element. This ensures all necessary payment details are entered.
893
+
- Use `elements.submit()` to submit the payment method details that the customer enters in the Payment Element. This ensures all necessary payment details are entered.
894
894
- Use `stripe.confirmPayment()` to confirm the payment with Stripe. You pass it the following details:
895
895
- `elements`: The Stripe Elements instance that contains the Payment Element.
896
896
- `clientSecret`: The client secret from the payment session, which is used to confirm the payment.
@@ -926,7 +926,7 @@ useEffect(() => {
926
926
You add two effects:
927
927
928
928
- An effect that runs when the status of the cart's payment collection changes. It triggers the `onPaymentCompleted` function to finalize the order placement when the payment collection status is `authorized`.
929
-
- An effect that listens for changes in the Payment Element. If the payment element is not complete, it redirects the user back to the payment step. This is useful if the user refreshes the page or navigates away, leading to incomplete payment details.
929
+
- An effect that listens for changes in the Payment Element. If the payment element is not complete, it redirects the customer back to the payment step. This is useful if the customer refreshes the page or navigates away, leading to incomplete payment details.
930
930
931
931
You've finalized changes to the `PaymentButton` component. Feel free to remove unused imports, variables, and functions in the file.
In this route, you validate that the payment intent and client secret match the cart's payment session data. If so, you place the order and redirect the user to the order confirmation page.
1226
+
In this route, you validate that the payment intent and client secret match the cart's payment session data. If so, you place the order and redirect the customer to the order confirmation page.
1227
1227
1228
-
If the payment failed or other validation checks fail, you redirect the user back to the cart page with an error message.
1228
+
If the payment failed or other validation checks fail, you redirect the customer back to the cart page with an error message.
1229
1229
1230
1230
Stripe will redirect the customer back to this route when using payment methods like PayPal.
0 commit comments