Get started with bootstrap-payment-forms CDN

MIT licensed

Bootstrap-payment-forms: Create customized payment forms with Bootstrap and popular gateways.

Tags:
  • bootstrap
  • bootstrap5
  • responsive
  • ecommerce
  • responsive-design
  • checkout
  • bootstrap5-template
  • payment-gateway
  • payment-form
  • checkout-page
  • paymentmethods
  • bootstrap-template

Stable version

Copied!

How to start using bootstrap-payment-forms CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with bootstrap-payment-forms CDN - cdnhub.io</title>
    <!-- Include Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Include Bootstrap Payment Forms CSS -->
    <link rel="stylesheet" href="https://cdn.cdnhub.io/bootstrap-payment-forms/1.0.0/bootstrap-payment-forms.min.css">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-5">Payment Form Example</h1>
        <form id="payment-form">
            <div class="mb-3">
                <label for="cardNumber" class="form-label">Card number</label>
                <input type="text" class="form-control form-control-lg" id="cardNumber" placeholder="Enter card number">
            </div>
            <div class="mb-3">
                <label for="expiryMonth" class="form-label">Expiry month</label>
                <input type="text" class="form-control form-control-lg" id="expiryMonth" placeholder="MM">
            </div>
            <div class="mb-3">
                <label for="expiryYear" class="form-label">Expiry year</label>
                <input type="text" class="form-control form-control-lg" id="expiryYear" placeholder="YYYY">
            </div>
            <div class="mb-3">
                <label for="cvv" class="form-label">CVV</label>
                <input type="text" class="form-control form-control-lg" id="cvv" placeholder="CVV">
            </div>
            <button type="submit" class="btn btn-primary btn-lg btn-block" id="submit-btn">Submit Payment</button>
        </form>
    </div>

    <!-- Include Bootstrap Payment Forms JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.cdnhub.io/bootstrap-payment-forms/1.0.0/bootstrap-payment-forms.min.js"></script>

    <script>
        document.getElementById('payment-form').addEventListener('submit', function(event) {
            event.preventDefault();
            Stripe.setPublishableKey('your_publishable_key');
            var card = Stripe.cards.createToken(document.getElementById('payment-form'), {
                name: 'John Doe'
            });

            document.getElementById('card-error').textContent = '';
            document.getElementById('submit-btn').disabled = true;

            Stripe.token.create({
                id: card.id
            }, function(status, response) {
                if (response.error) {
                    document.getElementById('card-error').textContent = response.error.message;
                    document.getElementById('submit-btn').disabled = false;
                } else {
                    // Handle successful submission here
                    console.log(response.id);
                }
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions