move the strip elements js into a component

This commit is contained in:
Rimian Perkins 2017-02-21 10:25:31 +11:00
parent 5dc2cccc38
commit c23833830a
3 changed files with 36 additions and 80 deletions

View File

@ -0,0 +1,29 @@
export default Ember.Component.extend({
stripe: Stripe('pk_test_b8RmhzlL8QPizJRqOrKF3JEV'),
card: function() {
var elements = this.get('stripe').elements();
return elements.create('card', { hidePostalCode: true });
}.property('stripe'),
didInsertElement() {
this.get('card').mount('#stripe-card');
},
actions: {
submitStripeCard() {
this.get('stripe').createToken(this.get('card')).then(function(result) {
if (result.error) {
console.log('error yo');
}
else {
var form = document.getElementById('stripe-card');
var hiddenInput = document.createElement('input');
// hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', result.token.id);
form.appendChild(hiddenInput);
}
});
}
}
});

View File

@ -0,0 +1,5 @@
<div id="stripe-card"></div>
<button class='btn btn-primary payment-btn' {{action "submitStripeCard"}}>
make payment
</button>

View File

@ -1,83 +1,5 @@
<!--
<div class="payments">
{{username}}
</div>
<button class='btn btn-primary payment-btn' {{action "makePayment"}}>
make payment
</button>
{{#if saved}}
<div class="payment-response">Response happens</div>
{{/if}}
-->
<form action="/charges" method="post" id="payment-form" style="width: 300px;">
<div class="form-row">
<label>
<span>Card</span>
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
</label>
</div>
<h2>Payments</h2>
<div id="payment-errors"></div>
<input type="submit" class="submit" value="Submit Payment">
</form>
<script>
$(document).ready(function() {
var stripe = Stripe('pk_test_b8RmhzlL8QPizJRqOrKF3JEV');
var elements = stripe.elements();
var card = elements.create('card');
// Add an instance of the card Element into the `card-element`
card.mount('#card-element');
card.addEventListener('change', function(event) {
var displayError = document.getElementById('payment-errors');
if (event.error) {
displayError.textContent = event.error.message;
}
});
// Create a token or display an error the form is submitted.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('payment-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
form.submit();
}
});
</script>
{{stripe-card}}