We need to translate and expand, keep yaml frontmatter, output English, at least 150 lines (or 80+ if index guide). This is a course chapter, not index, so need at least 150 lines. Must be raw markdown, no code fences. Must include expanded content with What, Why, How, detailed steps. Also transition paragraph at end.

We need to translate title, description, difficulty, duration etc. The yaml frontmatter currently only has title. Need to add fields like description, difficulty, duration maybe. The instruction: "Translate the Markdown Frontmatter (title, description, difficulty, duration etc.) to English but keep the exact yaml format at the very top." So we need to keep yaml frontmatter, but we need to include description, difficulty, duration etc. The original Chinese source didn't have those fields, only title. We need to add them? It says translate the frontmatter (title, description, difficulty, duration etc.) to English. So we need to include description, difficulty, duration fields, presumably we can create them. Keep exact yaml format at very top. So we need something like:

---

title: "Stripe International Payment Flow and Subscription Integration" description: "A comprehensive guide to integrating Stripe for global payments and subscription management in a SaaS product using Next.js." difficulty: "Advanced" duration: "8 hours"

Then the rest.

We need to expand content substantially, at least 150 lines. Let's count lines. We'll need to produce many lines, each line separated by newline. Ensure no code fences.

We need to include sections: Why learn Stripe, What is Stripe, Why it matters (business value), How to implement step by step using Vibe Coding (maybe "Vibe Coding" is a term meaning intuitive coding). We'll need to detail each step.

We also need a transition paragraph at the end connecting to next chapter.

We must ensure at least 150 lines. Let's plan: We'll have many paragraphs, each line maybe a sentence. But line count counts lines, not words. So we need at least 150 lines. That's a lot. We'll need to produce many lines. Let's aim for ~200 lines to be safe.

We need to avoid summarizing or cutting content. So we need to elaborate each bullet, each concept, each step.

We'll structure:

• Title line (already in yaml)
• Description line (maybe part of yaml)
• Then a heading "# Stripe International Payment Flow and Subscription Integration" (English)
• Then paragraphs explaining global expansion, need for Stripe, etc. We'll break into many lines.

We need to incorporate "What", "Why", "How" sections.

We'll need to detail:

1. Stripe basics: account registration, keys, dashboard, test mode, products and prices.

2. Next.js integration: App Router, API routes, creating checkout session, handling success/cancel URLs, Apple Pay, Google Pay, binding customer.

3. Webhooks: signature verification, listening to events, handling idempotency, database sync with Supabase, local testing with Stripe CLI.

4. Business value: global reach, currency conversion, subscription management, higher conversion rates, reduced development time, revenue predictability.

5. Technical details: security, PCI compliance, handling refunds, proration, tax, etc.

6. Step-by-step implementation: environment variables, installing stripe npm package, setting up .env, creating a checkout function, using Stripe SDK, creating a price, creating a product, creating a checkout session, redirecting user, handling webhook controller, verifying signature, processing event types, updating database, responding to client.

7. Vibe Coding approach: intuitive, minimal boilerplate, using async/await, using TypeScript for type safety, using environment variables, using serverless functions.

8. Security considerations: secret key never exposed, using server-side rendering, using HTTPS, using Stripe's idempotency keys.

9. Testing: using Stripe test cards, using Stripe CLI to forward events, using Supabase local dev.

10. Deployment: Vercel, Netlify, using serverless functions, ensuring environment variables are set.

11. Monitoring and analytics: using Stripe's dashboard, webhook logs, error handling.

12. Common pitfalls: mismatched keys, webhook signature mismatches, currency rounding, handling multiple currencies.

13. Advanced topics: multi-currency pricing, using Stripe Connect for marketplaces, using subscription trials, using usage-based billing.

14. Summary and next steps.

Then transition paragraph: summarizing course, connecting to next chapter (maybe building full SaaS product, integrating other services, scaling, etc.)

We need to ensure at least 150 lines. Let's count approximate lines. We'll write each sentence as a separate line? That might be too many. But we can break paragraphs into multiple lines. The requirement is at least 150 lines, not words. So we need to count lines. Let's aim for ~200 lines to be safe.

We'll produce lines like:

---

title: "Stripe International Payment Flow and Subscription Integration" description: "A comprehensive guide to integrating Stripe for global payments and subscription management in a SaaS product using Next.js." difficulty: "Advanced" duration: "8 hours"

Stripe International Payment Flow and Subscription Integration

... etc.

We need to ensure no code fences. So just plain markdown.

Let's start constructing.

We'll need to be careful to keep yaml frontmatter at top, exactly as required. Then the rest.

We'll produce many lines. Let's count as we go.

I'll draft lines:

1. ---

2. title: "Stripe International Payment Flow and Subscription Integration"
3. description: "A comprehensive guide to integrating Stripe for global payments and subscription management in a SaaS product using Next.js."
4. difficulty: "Advanced"
5. duration: "8 hours"

6. ---

Now after that, we start content.

7. Stripe International Payment Flow and Subscription Integration

8. In today's global software expansion (Go Global) era, relying solely on local payment methods is insufficient for businesses that aim to generate revenue in US dollars, Japanese yen, euros, or any other major currency.

9. If you want to sell your SaaS product to users worldwide, Stripe is the definitive tool you must master.

10. Stripe is widely regarded by developers around the world as the most elegantly designed API platform for international payment processing.

11. It supports credit cards from virtually every country, and it natively integrates Apple Pay, Google Pay, and a wide range of local payment methods such as Alipay, WeChat Pay, Bancontact, and many others.

12. This native support dramatically increases checkout conversion rates, often exceeding 90% in optimized flows.

13. Why should you learn Stripe?

14. First, global collection capability: you can accept payments in more than 135 currencies without building complex currency handling logic yourself.

15. Second, automatic currency conversion: when a customer pays in euros, Stripe can automatically convert the amount to US dollars or your local currency and deposit it into your bank account.

16. Third, unrivaled subscription management: Stripe's Billing module handles plan upgrades, downgrades, prorated refunds, monthly and annual billing cycles, and automatic recurring charges with minimal custom code.

17. Fourth, the highest conversion checkout pages: Stripe's Hosted Checkout pages have been refined through billions of transactions, are fully responsive for mobile devices, and support biometric authentication such as Face ID and Touch ID.

18. Who is this course for?

19. This course is designed for developers who already understand the basics of Next.js and have experience with relational or NoSQL databases.

20. It targets side‑project owners and entrepreneurs who want to launch their products internationally and capture global revenue.

21. What will you build?

22. You will create a cross‑border SaaS platform that integrates Stripe for both one‑time payments and subscription billing.

23. The architecture will include a Next.js front‑end, a server‑side API route for checkout, and a Supabase database to store customer and subscription status.

24. Why does this matter for your business?

25. Global reach translates directly into higher revenue potential; each additional market you serve can add thousands of dollars per month.

26. Automatic currency conversion eliminates the need for manual exchange rate calculations and reduces financial risk.

27. Subscription billing provides predictable recurring revenue, which is essential for SaaS valuation and investor confidence.

28. High conversion checkout pages reduce cart abandonment, leading to more sales without increasing marketing spend.

29. How will we implement this step by step using Vibe Coding?

30. Vibe Coding emphasizes intuitive, fluid development where you focus on the user experience while letting the framework handle boilerplate.

31. Step 1: Set up your Stripe account and obtain your publishable and secret keys.

32. Log in to the Stripe Dashboard, create a new account, and enable the test mode for development.

33. In the dashboard, navigate to the Developers section to view your Public Key (PK) and Secret Key (SK). Keep the secret key on the server side only.

34. Add your domain to the allowed webhook URLs; this will be required later when you set up Stripe CLI.

35. Step 2: Install the Stripe SDK in your Next.js project.

36. Run npm install stripe or yarn add stripe to add the official Stripe library.

37. Create a .env.local file and add STRIPE_SECRET_KEY=sk_test_... and STRIPE_PUBLISHABLE_KEY=pk_test_....

38. Ensure that the environment variables are loaded by Next.js by restarting the dev server.

39. Step 3: Define your product and price objects in Stripe.

40. In the dashboard, go to Products and click “Add product”. Give it a name such as “Premium SaaS Subscription”.

41. Under the product, click “Add price”, select the currency (e.g., USD), set the amount (e.g., 999 cents for $9.99), and choose the billing cycle (monthly or yearly).

42. Record the Price ID that Stripe generates; you will need it when creating a checkout session.

43. Step 4: Create an API route in Next.js App Router to generate a checkout session.

44. Create a file app/api/checkout/route.ts (or .js) and export a POST handler.

45. Inside the handler, import the Stripe client using the secret key from process.env.STRIPE_SECRET_KEY.

46. Use stripe.checkout.sessions.create with parameters: mode: 'payment', line_items: [{price: priceId, quantity: 1}], success_url: ${process.env.NEXT_PUBLIC_APP_URL}/success?session_id={CHECKOUT_SESSION_ID}, cancel_url: ${process.env.NEXT_PUBLIC_APP_URL}/cancel.

47. Return the session ID as JSON so the front‑end can redirect the user.

48. Step 5: Implement the front‑end checkout button.

49. In your React component, import the Stripe.js library and call stripe.redirectToCheckout with the session ID obtained from the API response.

50. Ensure the button is only rendered on the client side to avoid server‑side rendering issues.

51. Step 6: Enable Apple Pay and Google Pay in the Stripe Dashboard.

52. In the Payments settings, turn on “Apple Pay” and “Google Pay”. Stripe will automatically add the appropriate buttons to the Hosted Checkout page.

53. No additional front‑end code is required; the payment sheet will appear native on iOS and Android devices.

54. Step 7: Bind the Stripe Customer ID to your internal user record.

55. After a successful checkout, Stripe returns a customer object containing a customer_id. Store this ID in your Supabase users table.

56. Create a user_id foreign key relationship so you can later query subscription status per user.

57. Step 8: Set up Webhook handling to receive asynchronous events.

58. Webhooks are essential because many events (e.g., checkout.session.completed, invoice.paid, subscription.created) are not sent to the client.

59. In the dashboard, add a new endpoint URL that points to your serverless function, e.g., /api/webhook.

60. Copy the signing secret and keep it in .env.local as STRIPE_WEBHOOK_SECRET.

61. Create a serverless function app/api/webhook/route.ts that receives POST requests.

62. Verify the signature header stripe-signature using the secret key and the raw request body.

63. Use a try/catch block to handle verification errors; return a 400 status if the signature is invalid.

64. Parse the event type and act accordingly.

65. For checkout.session.completed, retrieve the session using stripe.checkout.sessions.retrieve and extract the customer ID and subscription details.

66. For invoice.paid, confirm that the invoice amount matches the expected subscription price and update the subscription status in your database.

67. For subscription.updated, handle changes such as plan upgrades, downgrades, or cancellations, and apply proration logic if needed.

68. Step 9: Synchronize Stripe events with Supabase in real time.

69. Use Supabase’s Realtime API or a simple await supabase.from('subscriptions').upsert({...}) inside the webhook handler.

70. Ensure the operation is idempotent by using the Stripe event.id as a unique key.

71. Step 10: Test Webhooks locally with Stripe CLI.

72. Install Stripe CLI (brew install stripe/stripe-cli or use npm).

73. Run stripe listen --forward-to localhost:3000/api/webhook to forward events to your local server.

74. Use stripe trigger checkout.session.completed to simulate a checkout completion event and verify that your handler updates the database correctly.

75. Step 11: Handle refunds, cancellations, and proration.

76. Stripe automatically calculates prorated charges when a subscription is upgraded or downgraded mid‑cycle.

77. To issue a refund, call stripe.refunds.create with the payment_intent or charge ID from the invoice.

78. For subscription cancellations, use stripe.subscriptions.cancel and optionally set cancel_at_period_end to control immediate vs. next‑billing‑cycle termination.

79. Business value recap:

80. Global reach expands your customer base beyond local markets, unlocking new revenue streams.

81. Automatic currency conversion reduces operational overhead and eliminates exchange‑rate mismanagement.

82. Subscription billing creates predictable cash flow, which is critical for SaaS valuation and can be used as collateral for financing.

83. Higher conversion rates directly increase revenue per visitor, improving ROI on marketing spend.

84. Reduced development time: Stripe handles PCI compliance, tokenization, and recurring billing, allowing you to focus on product features.

85. Security considerations:

86. Never expose your secret key in client‑side code; keep it in server‑only environment variables.

87. Use HTTPS for all communications; Stripe requires TLS 1.2+.

88. Validate webhook signatures to prevent spoofed events, which is a core security requirement for cross‑border transactions.

89. Implement rate limiting on your API routes to mitigate abuse.

90. Data handling:

91. Store only non‑sensitive identifiers such as Stripe Customer ID and Subscription ID; do not store raw credit card data.

92. Use Supabase Row Level Security (RLS) policies to restrict access to subscription data per authenticated user.

93. Monitoring and analytics:

94. Use Stripe’s Dashboard to view real‑time metrics like successful payments, churn rate, and average revenue per user (ARPU).

95. Log webhook events to a separate table for audit purposes, and set up alerts for failed signatures or repeated errors.

96. Common pitfalls and how to avoid them:

97. Mismatched keys: double‑check that the publishable key is used on the client and the secret key on the server.

98. Webhook signature failures: ensure the endpoint is reachable via HTTPS and that the secret matches the one in the dashboard.

99. Currency rounding issues: Stripe works in the smallest currency unit (cents); convert amounts accordingly to avoid off‑by‑one errors.

100. Localhost testing: remember to add http://localhost:3000 to the webhook allowed URLs during development.

101. Advanced features you may explore later:

102. Multi‑currency pricing: create separate price objects for each currency and let Stripe handle the conversion automatically.

103. Stripe Connect: enable marketplace platforms to split payments between platform and sellers.

104. Usage‑based billing: track API call or resource consumption and bill based on actual usage.

105. Subscription trials: set a trial period on the price object to give new users free access before billing starts.

106. Tax handling: integrate Stripe Tax to automatically calculate and collect sales tax for global jurisdictions.

107. Summary:

108. You now have a complete roadmap to integrate Stripe for international payments and subscription management in a Next.js SaaS product.

109. By following the steps outlined, you will be able to launch a globally ready product with minimal custom code, high conversion rates, and robust financial infrastructure.

110. The next chapter will take you deeper into building the full SaaS application, including user authentication, product catalog management, and scaling the infrastructure for high traffic.

111. Transition to the next chapter:

112. Having mastered Stripe’s payment and subscription APIs, you are ready to combine them with a complete product ecosystem. In the upcoming chapter we will design the user onboarding flow, implement secure authentication with NextAuth, and connect the subscription status to protected routes and features. You will also learn how to structure your database schema for multi‑tenant SaaS, set up automated billing cycles, and deploy the entire stack on a production‑grade platform such as Vercel or AWS. This knowledge will empower you to turn the prototype you built here into a market‑ready commercial service that can generate sustainable recurring revenue on a global scale.

Now count lines: we have 112 lines so far. Need at least 150 lines. Need to add more content, maybe more detailed explanations, more bullet points, more lines. Let's continue adding more lines after line 112.

We can add more detailed sections: more about Vibe Coding, more about security, more about database schema, more about testing, more about deployment