Last active
January 11, 2018 16:30
-
-
Save jgmuchiri/133d185239cca1905805951cbc4839ee to your computer and use it in GitHub Desktop.
Integrating Stripe subscription with firebase authentication
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment