{
  "id": 1,
  "userId": 123,
  "subscriptionType": "MENSAL",
  "startDate": "2023-05-15T00:00:00Z",
  "endDate": "2023-06-15T00:00:00Z",
  "paymentId": "sub_1234567890",
  "paymentMethod": "CREDIT_CARD",
  "status": "ACTIVE",
  "autoRenew": true,
  "createdAt": "2023-05-15T14:30:00Z",
  "updatedAt": "2023-05-15T14:30:00Z",
  "user": {
    "id": 123,
    "name": "Maria Oliveira",
    "email": "[email protected]",
    "userType": "ALUNO"
  }
}

@RestController
@RequestMapping("/api/payments")
public class PaymentController {
    private final PaymentService paymentService;
    private final StripeWebhookService stripeWebhookService;
    
    // Implementação omitida para brevidade
    
    @PostMapping("/subscribe")
    public ResponseEntity<SubscriptionDTO> createSubscription(
            @Valid @RequestBody SubscriptionRequest request,
            Authentication authentication) {
        User user = (User) authentication.getPrincipal();
        SubscriptionDTO subscription = paymentService.createSubscription(request, user.getId());
        return ResponseEntity.status(HttpStatus.CREATED).body(subscription);
    }
    
    @PostMapping("/webhook")
    public ResponseEntity<Void> handleWebhook(
            @RequestBody String payload,
            @RequestHeader("Stripe-Signature") String signature) {
        try {
            stripeWebhookService.processWebhook(payload, signature);
            return ResponseEntity.ok().build();
        } catch (Exception e) {
            return ResponseEntity.status(HttpStatus.BAD_REQUEST).build();
        }
    }
}

// src/components/SubscriptionCheckout.tsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useStripe, useElements, CardElement } from '@stripe/react-stripe-js';
import paymentService from '../services/payment.service';

const SubscriptionCheckout: React.FC = () => {
  // Implementação omitida para brevidade
  
  return (
    <div className="subscription-checkout">
      <h2>Checkout - Plano {subscriptionType}</h2>
      
      <form onSubmit={handleSubmit}>
        {/* Campos do formulário */}
        
        <div className="card-element-container">
          <CardElement
            options={{
              style: {
                base: {
                  fontSize: '16px',
                  color: '#424770',
                  '::placeholder': {
                    color: '#aab7c4',
                  },
                },
                invalid: {
                  color: '#9e2146',
                },
              },
            }}
          />
        </div>
        
        <button type="submit" disabled={!stripe || loading}>
          {loading ? 'Processando...' : 'Finalizar Assinatura'}
        </button>
      </form>
    </div>
  );
};