Stripe Integration Tutorial: From Registration to First Payment

Stripe is one of the most popular online payment platforms, known for excellent developer experience and rich APIs.

1. Register Stripe Account

1.1 Account Modes

  • Test mode: Development, no real transactions
  • Live mode: Production, real payments

1.2 API Keys

Get from Dashboard → Developers → API Keys:

  • Publishable Key (pk_...): Frontend
  • Secret Key (sk_...): Backend, keep secret!

2. Payment Flow Architecture

Stripe recommends Payment Intents API:

1. User clicks "Pay"
2. Frontend requests PaymentIntent from backend
3. Backend creates PaymentIntent → returns client_secret
4. Frontend collects card info via Stripe Elements
5. Stripe.js submits encrypted card to Stripe
6. Stripe processes payment, returns result
7. Webhook notifies backend

3. Integration

3.1 Backend: Create PaymentIntent

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
app.post('/create-payment-intent', async (req, res) => {
  const paymentIntent = await stripe.paymentIntents.create({
    amount: 1999, // $19.99 in cents
    currency: 'usd',
    automatic_payment_methods: { enabled: true },
  });
  res.json({ clientSecret: paymentIntent.client_secret });
});

3.2 Frontend: Stripe Elements

<script src="https://js.stripe.com/v3/"></script>
<script>
const stripe = Stripe('pk_test_...');
const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');
</script>

4. Webhook Configuration

app.post('/stripe/webhook', express.raw({type: 'application/json'}), (req, res) => {
  const sig = req.headers['stripe-signature'];
  let event = stripe.webhooks.constructEvent(req.body, sig, endpointSecret);
  
  switch (event.type) {
    case 'payment_intent.succeeded':
      // Update order status
      break;
    case 'payment_intent.payment_failed':
      // Handle failure
      break;
  }
  res.json({received: true});
});

5. Supported Payment Methods

  • Credit/debit cards (global): 2.9% + $0.30
  • Apple Pay / Google Pay: 2.9% + $0.30
  • Alipay / WeChat Pay: 2.9% + $0.30
  • SEPA Direct Debit (EU): 1.5% + €0.25

6. Fees & Settlement

Standard rate: 2.9% + $0.30/transaction
Settlement: 7 days standard (2 days for US users)

7. Summary

Stripe's clean API and documentation make it the developer's first choice for payments. Test thoroughly before going live. The Payment Intents API is the recommended integration method.