Skip to content

Commit f8f0511

Browse files
anthonydmaysanthonydmays
authored
docs: adds slides and readme for supplemental lesson 10 (#842)
Signed-off-by: Anthony D. Mays <[email protected]>
1 parent a6cba61 commit f8f0511

File tree

4 files changed

+401
-2
lines changed

4 files changed

+401
-2
lines changed

‎slides/src/Slides/Lessons/Supplemental10.js‎

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
import htm from "htm";
2+
import { createElement } from "react";
3+
import { DemoSlide, Lesson } from "../Layouts/index.js";
4+
5+
const html = htm.bind(createElement);
6+
7+
function Supplemental10() {
8+
return html`
9+
<${Lesson} title="Stripe Integration" lessonId="supplemental_10" subtitle="Supplemental 10" titleFontSize="1.2em">
10+
<section class="ml-bullet-slide">
11+
<h3>Good to review:</h3>
12+
<ul style=${{"font-size": ".95em"}}>
13+
<li class="fragment"><i>Lesson 14</i> - Exception Handling</li>
14+
<li class="fragment"><i>Lesson 19</i> - REST APIs</li>
15+
<li class="fragment"><i>Lesson 22</i> - Building Applications</li>
16+
<li class="fragment"><i>Supplemental 6</i> - Microservices</li>
17+
</ul>
18+
</section>
19+
<section>
20+
<p>Today we're going to talk about <em>accepting payments online</em></p>
21+
</section>
22+
<section>
23+
<p>Specifically, we'll learn about <em>Stripe</em>, one of the most popular payment platforms</p>
24+
</section>
25+
<section>
26+
<p>Why would you want to accept <em>online payments</em>?</p>
27+
</section>
28+
<section class="ml-bullet-slide">
29+
<h3>Revenue opportunities</h3>
30+
<ul style=${{"font-size": ".9em"}}>
31+
<li class="fragment"><em>Global reach</em> - Sell to customers anywhere</li>
32+
<li class="fragment"><em>24/7 sales</em> - Make money while you sleep</li>
33+
<li class="fragment"><em>Instant transactions</em> - No waiting for checks</li>
34+
<li class="fragment"><em>Lower overhead</em> - No physical store needed</li>
35+
</ul>
36+
</section>
37+
<section class="ml-bullet-slide">
38+
<h3>Customer convenience</h3>
39+
<ul style=${{"font-size": ".9em"}}>
40+
<li class="fragment"><em>Multiple payment methods</em> - Cards, wallets, bank transfers</li>
41+
<li class="fragment"><em>Save payment info</em> - One-click checkout</li>
42+
<li class="fragment"><em>Mobile friendly</em> - Pay from anywhere</li>
43+
<li class="fragment"><em>Instant confirmation</em> - No waiting</li>
44+
</ul>
45+
</section>
46+
<section class="ml-bullet-slide">
47+
<h3>Business advantages</h3>
48+
<ul style=${{"font-size": ".8em"}}>
49+
<li class="fragment"><em>Automated billing</em> - Subscriptions, recurring payments</li>
50+
<li class="fragment"><em>Better cash flow</em> - Faster payment processing</li>
51+
<li class="fragment"><em>Detailed analytics</em> - Track revenue and trends</li>
52+
<li class="fragment"><em>Reduced errors</em> - Automated reconciliation</li>
53+
<li class="fragment"><em>Fraud protection</em> - Built-in security measures</li>
54+
</ul>
55+
</section>
56+
<section>
57+
<p>Online payments are <em>essential</em> for modern businesses</p>
58+
</section>
59+
<section class="ml-bullet-slide">
60+
<h3>Common use cases</h3>
61+
<ul style=${{"font-size": ".85em"}}>
62+
<li class="fragment"><em>E-commerce</em> - Online stores and marketplaces</li>
63+
<li class="fragment"><em>SaaS products</em> - Subscription-based software</li>
64+
<li class="fragment"><em>Digital content</em> - Courses, ebooks, media</li>
65+
<li class="fragment"><em>Services</em> - Consulting, freelancing, bookings</li>
66+
</ul>
67+
</section>
68+
<section>
69+
<p>If online payments are so great, why doesn't everyone do it?</p>
70+
</section>
71+
<section>
72+
<p>Because implementing payments is <em>surprisingly complex</em></p>
73+
</section>
74+
<section class="ml-bullet-slide">
75+
<h3>Security challenges</h3>
76+
<ul style=${{"font-size": ".80em"}}>
77+
<li class="fragment"><em>PCI compliance</em> - Strict security standards for handling card data</li>
78+
<li class="fragment"><em>Encryption</em> - Protecting sensitive information in transit</li>
79+
<li class="fragment"><em>Fraud detection</em> - Identifying suspicious transactions</li>
80+
<li class="fragment"><em>Data breaches</em> - One mistake can expose customer data</li>
81+
</ul>
82+
</section>
83+
<section>
84+
<p><em><i>PCI DSS</i></em> (Payment Card Industry Data Security Standard) has <i>12 requirements</i> and hundreds of sub-requirements</p>
85+
</section>
86+
<section class="ml-bullet-slide">
87+
<h3>Technical complexity</h3>
88+
<ul style=${{"font-size": ".8em"}}>
89+
<li class="fragment"><em>Multiple payment methods</em> - Cards, wallets, bank transfers</li>
90+
<li class="fragment"><em>Currency conversion</em> - Supporting international payments</li>
91+
<li class="fragment"><em>Payment flows</em> - Different rules for different regions</li>
92+
<li class="fragment"><em>3D Secure</em> - Strong customer authentication (SCA)</li>
93+
<li class="fragment"><em>Webhooks</em> - Handling asynchronous events</li>
94+
</ul>
95+
</section>
96+
<section class="ml-bullet-slide">
97+
<h3>Regulatory requirements</h3>
98+
<ul style=${{"font-size": ".85em"}}>
99+
<li class="fragment"><em>Different laws per country</em> - EU, US, Asia have different rules</li>
100+
<li class="fragment"><em>Tax compliance</em> - Sales tax, VAT calculations</li>
101+
<li class="fragment"><em>KYC requirements</em> - Know Your Customer verification</li>
102+
<li class="fragment"><em>Anti-money laundering</em> - AML compliance</li>
103+
</ul>
104+
</section>
105+
<section class="ml-bullet-slide">
106+
<h3>Operational challenges</h3>
107+
<ul style=${{"font-size": ".8em"}}>
108+
<li class="fragment"><em>Failed payments</em> - Handling declines and retries</li>
109+
<li class="fragment"><em>Disputes & chargebacks</em> - Customer refund requests</li>
110+
<li class="fragment"><em>Reconciliation</em> - Matching payments to orders</li>
111+
<li class="fragment"><em>Customer support</em> - Helping users with payment issues</li>
112+
</ul>
113+
</section>
114+
<section>
115+
<p>Building your own payment system is like building a <em>bank</em></p>
116+
</section>
117+
<section>
118+
<p>That's why companies like <em>Stripe</em> exist</p>
119+
</section>
120+
<section>
121+
<p><em><i>Stripe</i></em> is a payment processing platform that handles the complexity for you</p>
122+
</section>
123+
<section>
124+
<p>Founded in <em>2010</em> by Patrick and John Collison</p>
125+
</section>
126+
<section class="ml-bullet-slide">
127+
<h3>What does Stripe provide?</h3>
128+
<ul style=${{"font-size": ".8em"}}>
129+
<li class="fragment"><em>Payment processing</em> - Accept cards, wallets, and more</li>
130+
<li class="fragment"><em>PCI compliance</em> - Stripe handles security for you</li>
131+
<li class="fragment"><em>Developer-friendly APIs</em> - RESTful with great docs</li>
132+
<li class="fragment"><em>Global support</em> - 135+ currencies, 45+ countries</li>
133+
<li class="fragment"><em>Fraud prevention</em> - Machine learning-based detection</li>
134+
</ul>
135+
</section>
136+
<section class="ml-bullet-slide">
137+
<h3>Stripe's impact</h3>
138+
<ul style=${{"font-size": ".9em"}}>
139+
<li class="fragment">Valued at <em>\$95 billion</em> (2024)</li>
140+
<li class="fragment">Processes <em>hundreds of billions</em> annually</li>
141+
<li class="fragment">Used by <em>millions</em> of businesses</li>
142+
<li class="fragment">Powers companies like <em>Amazon</em>, <em>Shopify</em>, <em>Lyft</em></li>
143+
</ul>
144+
</section>
145+
<section class="ml-bullet-slide">
146+
<h3>Stripe products</h3>
147+
<ul style=${{"font-size": ".85em"}}>
148+
<li class="fragment"><em>Payments</em> - Accept one-time payments</li>
149+
<li class="fragment"><em>Billing</em> - Manage subscriptions</li>
150+
<li class="fragment"><em>Connect</em> - Build marketplaces and platforms</li>
151+
<li class="fragment"><em>Radar</em> - Fraud and risk management</li>
152+
<li class="fragment"><em>Terminal</em> - In-person payments</li>
153+
</ul>
154+
</section>
155+
<section>
156+
<p>The <em>Stripe API</em> is designed for developers</p>
157+
</section>
158+
<section class="ml-bullet-slide">
159+
<h3>Why developers love Stripe</h3>
160+
<ul style=${{"font-size": ".8em"}}>
161+
<li class="fragment"><em>Great documentation</em> - Clear examples in multiple languages</li>
162+
<li class="fragment"><em>Test mode</em> - Experiment without real money</li>
163+
<li class="fragment"><em>Webhooks</em> - Real-time event notifications</li>
164+
<li class="fragment"><em>Libraries</em> - SDKs for Node, Python, Java, Ruby, etc.</li>
165+
<li class="fragment"><em>Dashboard</em> - Visual interface for monitoring</li>
166+
</ul>
167+
</section>
168+
<section class="ml-bullet-slide">
169+
<h3>Key Stripe concepts</h3>
170+
<ul style=${{"font-size": ".85em"}}>
171+
<li class="fragment"><em>Customer</em> - Represents a buyer</li>
172+
<li class="fragment"><em>Payment Method</em> - A card, bank account, or wallet</li>
173+
<li class="fragment"><em>Payment Intent</em> - Tracks the payment lifecycle</li>
174+
<li class="fragment"><em>Charge</em> - A completed payment</li>
175+
<li class="fragment"><em>Webhook</em> - Event notification from Stripe</li>
176+
</ul>
177+
</section>
178+
<section>
179+
<p>Let's look at how <em>tokenization</em> works</p>
180+
</section>
181+
<section>
182+
<p><em><i>Tokenization</i></em> converts sensitive card data into a secure <i>token</i></p>
183+
</section>
184+
<section class="ml-bullet-slide">
185+
<h3>How tokenization protects you</h3>
186+
<ul style=${{"font-size": ".85em"}}>
187+
<li class="fragment">Card data <em>never touches</em> your server</li>
188+
<li class="fragment">Stripe <em>encrypts</em> the data client-side</li>
189+
<li class="fragment">You only receive a <em>token</em> (e.g., tok_abc123)</li>
190+
<li class="fragment">Token can only be used <em>once</em></li>
191+
<li class="fragment">Reduces your <em>PCI compliance</em> burden</li>
192+
</ul>
193+
</section>
194+
<section>
195+
<p>Stripe also handles <em>3D Secure</em> authentication</p>
196+
</section>
197+
<section>
198+
<p><em><i>3D Secure</i></em> (3DS) adds an extra verification step for card payments</p>
199+
</section>
200+
<section class="ml-bullet-slide">
201+
<h3>Why 3D Secure matters</h3>
202+
<ul style=${{"font-size": ".9em"}}>
203+
<li class="fragment"><em>Required in Europe</em> - Strong Customer Authentication (SCA)</li>
204+
<li class="fragment"><em>Reduces fraud</em> - Confirms customer identity</li>
205+
<li class="fragment"><em>Liability shift</em> - Protects merchants from chargebacks</li>
206+
<li class="fragment"><em>Handled by Stripe</em> - No extra code needed</li>
207+
</ul>
208+
</section>
209+
<section>
210+
<p>Let's walk through how to <em>integrate Stripe</em> into your app</p>
211+
</section>
212+
<section class="ml-bullet-slide">
213+
<h3>Setup steps</h3>
214+
<ul style=${{"font-size": ".9em"}}>
215+
<li class="fragment"><em>Step 1</em> - Create a Stripe account</li>
216+
<li class="fragment"><em>Step 2</em> - Get API keys (test and live)</li>
217+
<li class="fragment"><em>Step 3</em> - Install Stripe SDK</li>
218+
<li class="fragment"><em>Step 4</em> - Build your integration</li>
219+
</ul>
220+
</section>
221+
<section>
222+
<p><em>Step 1: Create a Stripe account</em></p>
223+
</section>
224+
<section>
225+
<p>Go to <em>stripe.com</em> and sign up for free</p>
226+
</section>
227+
<section>
228+
<p>No credit card required to start testing</p>
229+
</section>
230+
<section>
231+
<p><em>Step 2: Get API keys</em></p>
232+
</section>
233+
<section class="ml-bullet-slide">
234+
<h3>Two types of keys</h3>
235+
<ul style=${{"font-size": ".9em"}}>
236+
<li class="fragment"><em>Publishable key</em> - Used client-side (safe to expose)</li>
237+
<li class="fragment"><em>Secret key</em> - Used server-side (keep secret!)</li>
238+
</ul>
239+
</section>
240+
<section class="ml-bullet-slide">
241+
<h3>Test vs. Live mode</h3>
242+
<ul style=${{"font-size": ".9em"}}>
243+
<li class="fragment"><em>Test mode</em> - Use test cards, no real money</li>
244+
<li class="fragment"><em>Live mode</em> - Real transactions, real money</li>
245+
<li class="fragment">Each mode has its own <em>API keys</em></li>
246+
<li class="fragment">Always start in <em>test mode</em></li>
247+
</ul>
248+
</section>
249+
<section>
250+
<p><em>Step 3: Install Stripe SDK</em></p>
251+
</section>
252+
<section>
253+
<h3>Node.js example</h3>
254+
<pre><code class="language-bash">npm install stripe</code></pre>
255+
</section>
256+
<section>
257+
<h3>Java example</h3>
258+
<pre><code class="language-xml"><dependency>
259+
<groupId>com.stripe</groupId>
260+
<artifactId>stripe-java</artifactId>
261+
<version>24.0.0</version>
262+
</dependency></code></pre>
263+
</section>
264+
<section>
265+
<p><em>Step 4: Build your integration</em></p>
266+
</section>
267+
<section class="ml-bullet-slide">
268+
<h3>The payment flow</h3>
269+
<ul style=${{"font-size": ".8em"}}>
270+
<li class="fragment"><em>Client</em> - Collect payment details using Stripe Elements</li>
271+
<li class="fragment"><em>Client</em> - Create a payment method (tokenize)</li>
272+
<li class="fragment"><em>Server</em> - Create a Payment Intent with amount</li>
273+
<li class="fragment"><em>Client</em> - Confirm the payment</li>
274+
<li class="fragment"><em>Server</em> - Handle webhooks for payment events</li>
275+
</ul>
276+
</section>
277+
<${DemoSlide} />
278+
<section>
279+
<p>For subscriptions, use <em>Stripe Billing</em></p>
280+
</section>
281+
<section class="ml-bullet-slide">
282+
<h3>Subscription features</h3>
283+
<ul style=${{"font-size": ".85em"}}>
284+
<li class="fragment"><em>Recurring billing</em> - Automatic charges</li>
285+
<li class="fragment"><em>Trial periods</em> - Free trials before charging</li>
286+
<li class="fragment"><em>Proration</em> - Handle plan changes mid-cycle</li>
287+
<li class="fragment"><em>Dunning</em> - Retry failed payments automatically</li>
288+
<li class="fragment"><em>Usage-based</em> - Metered billing</li>
289+
</ul>
290+
</section>
291+
<section class="ml-bullet-slide">
292+
<h3>Going to production</h3>
293+
<ul style=${{"font-size": ".8em"}}>
294+
<li class="fragment"><em>Complete account verification</em> - Provide business details</li>
295+
<li class="fragment"><em>Switch to live keys</em> - Use production API keys</li>
296+
<li class="fragment"><em>Set up webhooks</em> - Configure production endpoints</li>
297+
<li class="fragment"><em>Enable Radar</em> - Turn on fraud detection</li>
298+
<li class="fragment"><em>Test in production</em> - Make a real test purchase</li>
299+
</ul>
300+
</section>
301+
<section class="ml-bullet-slide">
302+
<h3>Key takeaways</h3>
303+
<ul style=${{"font-size": ".8em"}}>
304+
<li class="fragment">Online payments are <em>essential</em> but <em>complex</em></li>
305+
<li class="fragment">Stripe handles <em>security</em> and <em>compliance</em> for you</li>
306+
<li class="fragment">Use <em>tokenization</em> to protect card data</li>
307+
<li class="fragment">Follow the <em>Payment Intent</em> workflow</li>
308+
<li class="fragment"><em>Webhooks</em> notify you of payment events</li>
309+
<li class="fragment">Always test with <em>test cards</em> first</li>
310+
<li class="fragment">Start with <em>Checkout Session</em> for simplicity</li>
311+
</ul>
312+
</section>
313+
<section class="ml-bullet-slide">
314+
<h3>Next steps</h3>
315+
<ul style=${{"font-size": ".9em"}}>
316+
<li class="fragment">Sign up for a <em>Stripe account</em></li>
317+
<li class="fragment">Explore the <em>official documentation</em></li>
318+
<li class="fragment">Try the <em>quickstart guides</em></li>
319+
<li class="fragment">Build a <em>simple checkout</em> integration</li>
320+
<li class="fragment">Experiment with <em>test mode</em></li>
321+
</ul>
322+
</section>
323+
<//>`;
324+
}
325+
326+
export default Supplemental10;

‎slides/src/Slides/Lessons/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import Lesson23 from "./Lesson23.js";
2525
import Lesson24 from "./Lesson24.js";
2626
import Lesson25 from "./Lesson25.js";
2727
import Supplemental1 from "./Supplemental1.js";
28+
import Supplemental10 from "./Supplemental10.js";
2829
import Supplemental2 from "./Supplemental2.js";
2930
import Supplemental3 from "./Supplemental3.js";
3031
import Supplemental4 from "./Supplemental4.js";
@@ -61,8 +62,7 @@ export {
6162
Lesson23,
6263
Lesson24,
6364
Lesson25,
64-
Supplemental1,
65-
Supplemental2,
65+
Supplemental1, Supplemental10, Supplemental2,
6666
Supplemental3,
6767
Supplemental4,
6868
Supplemental5,

‎slides/src/Slides/Slides.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ function Slides() {
4848
<${lessons.Supplemental7} />
4949
<${lessons.Supplemental8} />
5050
<${lessons.Supplemental9} />
51+
<${lessons.Supplemental10} />
5152
</div>`;
5253
}
5354

0 commit comments

Comments
 (0)