5 min read
› Documentation › Stripe Integration › First Steps with Stripe

First Steps with Stripe

This tutorial will guide you through setting up Stripe payments in your application using iaptic. By the end, you'll have a working subscription system with secure user access management.

Prerequisites

Before starting:

Step 1: Configure Stripe

  1. Get your API keys from Stripe Dashboard → Developers → API keys

    STRIPE_PUBLIC_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...

  2. Create a webhook endpoint:

    • Go to Stripe Dashboard → Developers → Webhooks
    • Click "Add endpoint"
    • Enter: https://validator.iaptic.com/v3/webhook/stripe
    • Select events:
      • Subscriptions (if your app has subscriptions):
        • customer.subscription.created
        • customer.subscription.updated
        • customer.subscription.deleted
        • customer.subscription.resumed
        • customer.subscription.paused
      • Payment intents (if your app has consumable or non-consumable purchases):
        • payment_intent.succeeded
        • payment_intent.canceled
        • refund.created
        • refund.updated
      • Products and prices:
        • product.created
        • product.deleted
        • product.updated
        • price.updated
        • price.deleted
        • price.created
    • Save the webhook signing secret: whsec_...

Step 2: Configure Iaptic

  1. Go to Iaptic Dashboard → Settings
  2. Enter your Stripe configuration:
    • Stripe Secret Key: sk_test_...
    • Stripe Webhook Secret: whsec_...
    • Application Name: com.example.app

Step 3: Add the Client Library

Add the iaptic client library to your application:

<script src="https://js.stripe.com/v3/"></script>
<script src="https://cdn.iaptic.com/v1/iaptic.min.js"></script>

Initialize the client:

const iaptic = new IapticStripe({
  stripePublicKey: 'pk_test_...',
  appName: 'com.example.app',
  apiKey: 'your_public_api_key'
});

Step 4: Create Your First Product

  1. Go to Stripe Dashboard → Products
  2. Click "Add product"
  3. Fill in the details:
    • Name: "Premium Plan"
    • Price: $9.99/month
    • Billing period: Monthly
  4. Add metadata:
    • product_type: paid subscription
    • can_purchase: true

Step 5: Implement Checkout

Add a checkout button to your page:

<button onclick="startCheckout()">Subscribe Now</button>

Implement the checkout flow:

async function startCheckout() {
  try {
    // Get available products
    const { products } = await iaptic.getProducts();
    const premiumPlan = products.find(p => 
      p.metadata?.tier === 'premium'
    );
    
    // Create checkout session
    const response = await iaptic.createStripeCheckout({
      offerId: premiumPlan.offers[0].id,
      applicationUsername: 'user123',
      successUrl: 'https://example.com/success',
      cancelUrl: 'https://example.com/cancel'
    });

    // Store access key for later
    localStorage.setItem('stripe_access_key', response.accessKey);

    // Redirect to Stripe
    window.location.href = response.url;
  }
  catch (error) {
    console.error('Checkout failed:', error);
  }
}

Step 6: Handle Success

On your success page:

async function checkSubscription() {
  try {
    const { purchases } = await iaptic.getPurchases();
    if (purchases.length > 0) {
      const subscription = purchases[0];
      console.log('Subscription active:', subscription);
      
      // Enable premium features
      if (subscription.productId === 'stripe:prod_xyz') {
        enablePremiumFeatures();
      }
    }
  }
  catch (error) {
    console.error('Error checking subscription:', error);
  }
}

Step 7: Test the Integration

  1. Use Stripe test cards:

    • Success: 4242 4242 4242 4242
    • Failure: 4000 0000 0000 0002

  2. Test the full flow:

    • Click subscribe
    • Complete checkout
    • Verify subscription status
    • Check webhook events

Next Steps