Hey there! Let me walk you through integrating Stripe Checkout (custom flow) with your S3-hosted static site, including how to create payment tokens. I’ve broken this down into clear, actionable steps so you can pick up right where you left off.

1. Prep Your Stripe Account & API Keys #

• First, confirm your Stripe account is set up (you likely have this done already). Head to your Stripe Dashboard to grab two key values:
  • Publishable Key: Starts with pk_test_ (or pk_live_ for production) — safe to use in frontend code.
  • Secret Key: Starts with sk_test_ (or sk_live_) — keep this locked down, never expose it in client-side code.
• Stick to test keys first to avoid accidental real charges during setup.

2. Add Stripe.js to Your S3 Site #

Since your site is static, load Stripe’s official script directly in your HTML. Place this right before the closing </body> tag:

<script src="https://js.stripe.com/v3/"></script>

This gives you access to the Stripe object needed for secure token creation and checkout handling.

3. Build a Secure Payment Form (Frontend) #

Create a form to collect card details, but let Stripe handle the sensitive input to stay PCI-compliant. Here’s a basic example:

<form id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or Debit Card
    </label>
    <div id="card-element">
      <!-- Stripe.js will inject a secure card input here -->
    </div>
    <!-- For displaying form errors -->
    <div id="card-errors" role="alert"></div>
  </div>
  <button id="submit-payment">Complete Payment</button>
</form>

The card-element div is where Stripe inserts its pre-built, secure card field — you’ll never touch raw card data directly.

4. Initialize Stripe & Mount the Card Element #

Add this JavaScript right after the Stripe.js script to set up the card input:

// Initialize Stripe with your publishable key
const stripe = Stripe('YOUR_PUBLISHABLE_KEY');
const elements = stripe.elements();

// Optional: Customize the card input style to match your site
const cardStyle = {
  base: {
    color: '#333',
    fontFamily: 'Arial, sans-serif',
    fontSize: '16px',
    '::placeholder': {
      color: '#888'
    }
  },
  invalid: {
    color: '#e53e3e',
    iconColor: '#e53e3e'
  }
};

// Create and mount the secure card input
const cardElement = elements.create('card', { style: cardStyle });
cardElement.mount('#card-element');

Replace YOUR_PUBLISHABLE_KEY with your actual publishable key from the Stripe Dashboard.

5. Handle Form Submission & Create a Payment Token #

This is the core step: when the user submits the form, we’ll use Stripe.js to generate a secure token (a safe reference to the card) instead of handling raw card data. Add this script:

const paymentForm = document.getElementById('payment-form');
const errorElement = document.getElementById('card-errors');

paymentForm.addEventListener('submit', async (e) => {
  e.preventDefault();

  try {
    // Create a token from the card input
    const { token, error } = await stripe.createToken(cardElement);

    if (error) {
      // Show error message to the user
      errorElement.textContent = error.message;
    } else {
      // Send the token to your backend to process the charge (see Step 6)
      const response = await fetch('/process-payment', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ 
          tokenId: token.id, 
          amount: 1500 // Amount in cents (e.g., $15.00 = 1500)
        }),
      });

      const result = await response.json();
      if (result.success) {
        alert('Payment successful!');
        paymentForm.reset();
      } else {
        errorElement.textContent = result.error;
      }
    }
  } catch (err) {
    console.error('Payment processing failed:', err);
    errorElement.textContent = 'Oops, something went wrong. Please try again.';
  }
});

• The stripe.createToken() method sends card data securely to Stripe, which returns a token. This token is what you’ll use to create a charge — never send raw card data to your backend.

6. Set Up a Backend to Process the Charge #

Since S3 only serves static content, you need a separate backend service (like AWS Lambda + API Gateway, or a Node.js server) to handle the charge using your Stripe secret key. Here’s a simple Node.js/Express example:

const express = require('express');
const stripe = require('stripe')('YOUR_SECRET_KEY');
const app = express();

app.use(express.json());

app.post('/process-payment', async (req, res) => {
  try {
    const { tokenId, amount } = req.body;

    // Create the charge using the token
    const charge = await stripe.charges.create({
      amount: amount,
      currency: 'usd',
      source: tokenId,
      description: 'Payment from S3 static site',
    });

    res.status(200).json({ success: true, chargeId: charge.id });
  } catch (err) {
    res.status(500).json({ success: false, error: err.message });
  }
});

app.listen(3000, () => console.log('Backend running on port 3000'));

• For AWS users, deploy this as a Lambda function and expose it via API Gateway — it’s a serverless, cost-effective option.
• Critical: Never commit your secret key to version control or expose it in frontend code.

7. Deploy & Test #

• Upload your updated HTML/JS files to your S3 bucket.
• Test with Stripe’s test card numbers (e.g., 4242 4242 4242 4242, any future expiry date, any CVC) to validate the flow.
• Once testing passes, switch to live keys and re-deploy your site and backend.

S3-Specific Tips #

• Configure your S3 bucket’s CORS policy to allow requests from your site to your backend endpoint. Here’s a sample policy:

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://your-s3-site-domain.com</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

• Ensure your S3 bucket is enabled for static website hosting (check AWS docs for steps if needed).

内容的提问来源于stack exchange，提问作者Monika Samant