css 将Stripe订阅与firebase身份验证集成

Posted 2021-05-13

<script>
    let stripe = Stripe('stripe_pk_key');
    let elements = stripe.elements();
    let style = {
        base: {
            color: '#32325d',
            lineHeight: '18px',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };
    let card = elements.create('card', {style: style});
    card.mount('#card-element');
    card.addEventListener('change', function (event) {
        let displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });
    //initialize  firebase
    let config = {
        "apiKey": "firebase_api_key",
        "authDomain": "your-app.firebaseapp.com",
        "databaseURL": "https://your-app.firebaseio.com",
        "projectId": "your-app",
        "storageBucket": "your-app.appspot.com",
        "messagingSenderId": "your-app-messaging-id"
    };
    firebase.initializeApp(config);

    $('form').on('submit', function (e) {
        e.preventDefault();
        $('#loading').addClass('loading');

        let password = document.getElementById('password').value;
        let email = document.getElementById('email').value;
        let plan = document.getElementById('plan').value;

        //process Stripe
        stripe.createToken(card).then(function (result) {
            if (result.error) {
                alert(result.error.message);
                $('#loading').removeClass('loading');
            } else {
                let stripeToken = result.token.id;
                  let stripeToken = result.token.id;
                $('<input>').attr({
                    type: 'hidden',
                    id: 'stripeToken',
                    name: 'stripeToken',
                    value:stripeToken
                }).appendTo('form');
                //create firebase account
                firebase.auth().createUserWithEmailAndPassword(email, password).then(function (user) {
                        //subscribe
                        $.ajax({
                            url: 'register.php',
                            data: $('form').serialize(),
                            type: 'POST',
                            success: function (response) {
                                let res = JSON.parse(response);
                                if (res.type === 'error') {
                                    user.delete();
                                    alert(res.msg)
                                } else {
                                    $('form').find('input').val('');
                                    alert(res.msg);
                                }
                            },
                            error: function (error) {
                                user.delete();
                                alert('Unable to process your request. Refresh and try again');
                            }
                        });
                        $('#loading').removeClass('loading');
                    }
                ).catch(function (error) {
                    let errorCode = error.code;
                    let errorMessage = error.message;
                    // [START_EXCLUDE]
                    if (errorCode === 'auth/weak-password') {
                        alert('The password is too weak.');
                    } else {
                        alert(errorMessage);
                    }
                    $('#loading').removeClass('loading');
                });
            }
        });

    })
</script>

<div id="register">
        <div class="row justify-content-center">
            <div class="col-md-6 col-md-offset-3">
                <form action="register" id="form">
                <h4>Select plan</h4>
                <select name="plan" id="plan" class="form-control">
                    <option value="monthly">$5/month</option>
                    <option value="yearly">$100/year (save $5%)</option>
                </select>
                <hr/>
                <div class="form-group">
                    <label class="control-label" for="name">Name</label>
                    <input id="name" name="name" class="form-control" type="text">
                </div>
                <div class="form-group">
                    <label class="control-label" for="name">Email</label>
                    <input id="email" name="email" class="form-control" type="text">
                </div>
                <div class="form-group">
                    <label class="control-label" for="password">Password</label>
                    <input id="password" name="password" class="form-control" type="text">
                </div>
                <hr/>
                <div class="form-row">
                    <div class="card"></div>
                    <div class="form-row">
                        <label for="card-element">Credit or debit card</label>
                        <div id="card-element"></div>
                        <div id="card-errors" role="alert"></div>
                    </div>
                </div>
                <br/>
                <button id="signup" class="btn btn-default">Submit</button>
                </form>
            </div>
        </div>
    </div>

.StripeElement {
        background-color: white;
        height: 40px;
        padding: 10px 12px;
        border-radius: 4px;
        border: 1px solid transparent;
        box-shadow: 0 1px 3px 0 #e6ebf1;
        -webkit-transition: box-shadow 150ms ease;
        transition: box-shadow 150ms ease;
    }

    .StripeElement--focus {
        box-shadow: 0 1px 3px 0 #cfd7df;
    }

    .StripeElement--invalid {
        border-color: #fa755a;
    }

    .StripeElement--webkit-autofill {
        background-color: #fefde5 !important;
    }
    
.loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Transparent Overlay */
.loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 1500ms infinite linear;
    -moz-animation: spinner 1500ms infinite linear;
    -ms-animation: spinner 1500ms infinite linear;
    -o-animation: spinner 1500ms infinite linear;
    animation: spinner 1500ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}