Get started with bootstrap-credit-card-form CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with bootstrap-credit-card-form CDN - cdnhub.io</title>
    <!-- Add Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Add Bootstrap Credit Card Form CSS -->
    <link rel="stylesheet" href="https://cdn.cdnhub.io/bootstrap-credit-card-form/1.0.0/bootstrap-credit-card.min.css">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-5">Credit Card Form</h1>
        <form id="credit-card-form">
            <div id="card-element">
                <!-- A Stripe Element will be inserted here. -->
            </div>
            <!-- Used to display form errors. -->
            <div id="card-errors" role="alert"></div>
            <button class="btn btn-primary btn-block mt-4" id="submit-button">Pay</button>
        </form>
    </div>

    <!-- Add Stripe library (required for Stripe Element) -->
    <script src="https://js.stripe.com/v3/"></script>
    <!-- Add Bootstrap Credit Card Form library -->
    <script src="https://cdn.cdnhub.io/bootstrap-credit-card-form/1.0.0/bootstrap-credit-card.min.js"></script>

    <!-- Add your custom script -->
    <script>
        const stripe = Stripe('your_stripe_publishable_key');

        let elements, card;

        // Create an instance of the Card Element
        elements = stripe.elements();
        card = elements.create('card');

        // Add an instance of the card to the DOM
        card.mount('#card-element');

        // Handle real-time validation errors from the card Element.
        card.addEventListener('change', (event) => {
            const displayError = document.getElementById('card-errors');
            if (event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

        // Handle form submission
        const form = document.getElementById('credit-card-form');
        form.addEventListener('submit', async (event) => {
            event.preventDefault();

            const { token, error } = await stripe.createToken(card);

            if (error) {
                // Inform the user if there was an error.
                const displayError = document.getElementById('card-errors');
                displayError.textContent = error.message;
            } else {
                // Send the token to your server.
                const hiddenInput = document.createElement('input');
                hiddenInput.setAttribute('type', 'hidden');
                hiddenInput.setAttribute('name', 'stripeToken');
                hiddenInput.setAttribute('value', token.id);
                form.appendChild(hiddenInput);

                // Submit the form to your server.
                form.submit();
            }
        });
    </script>
</body>
</html>
Get started with bootstrap-credit-card-form CDN

Stable version

How to start using bootstrap-credit-card-form CDN

All versions
