1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2024-12-04 15:24:23 +01:00
fab-manager/app/assets/javascripts/directives/stripe-form.js.erb

102 lines
3.7 KiB
Plaintext
Raw Normal View History

/* global Stripe */
/**
* This directive allows to extend a form with the Stripe payment input and error handling area.
* Strong-customer authentication is supported.
* --
* https://stripe.com/docs/payments/payment-intents/web-manual
*/
2019-09-10 12:46:02 +02:00
Application.Directives.directive('stripeForm', ['Payment', 'growl', '_t',
function (Payment, growl, _t) {
return ({
restrict: 'A',
2019-09-09 17:37:54 +02:00
scope: {
2019-09-10 12:46:02 +02:00
cartItems: '=',
onPaymentSuccess: '='
2019-09-09 17:37:54 +02:00
},
link: function($scope, element, attributes) {
const stripe = Stripe('<%= Rails.application.secrets.stripe_publishable_key %>');
const elements = stripe.elements();
const style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
const card = elements.create('card', { style, hidePostalCode: true });
card.addEventListener('change', function ({ error }) {
const displayError = document.getElementById('card-errors');
if (error) {
displayError.textContent = error.message;
} else {
displayError.textContent = '';
}
});
// Add an instance of the card Element into the `card-element` <div>.
const form = angular.element(element);
const cardElement = form.find('#card-element');
card.mount(cardElement[0]);
form.bind('submit', function() {
const button = form.find('button');
button.prop('disabled', true);
stripe.createPaymentMethod('card', card).then(function({ paymentMethod, error }) {
if (error) {
2019-09-10 12:46:02 +02:00
growl.error(error.message);
button.prop('disabled', false);
} else {
// Send paymentMethod.id to your server (see Step 2)
2019-09-09 17:37:54 +02:00
Payment.confirm({ payment_method_id: paymentMethod.id, cart_items: $scope.cartItems }, function (response) {
// Handle server response (see Step 3)
2019-09-10 12:46:02 +02:00
handleServerResponse(response, button);
}, function(error) { handleServerResponse({ error }, button) });
}
});
});
2019-09-10 12:46:02 +02:00
function handleServerResponse(response, confirmButton) {
if (response.error) {
if (response.error.statusText) {
growl.error(response.error.statusText);
} else {
growl.error(`${_t('app.shared.messages.payment_card_error')} ${response.error}`);
}
2019-09-10 12:46:02 +02:00
confirmButton.prop('disabled', false);
} else if (response.requires_action) {
// Use Stripe.js to handle required card action
stripe.handleCardAction(
response.payment_intent_client_secret
).then(function(result) {
if (result.error) {
2019-09-10 12:46:02 +02:00
growl.error(result.error.message);
confirmButton.prop('disabled', false);
} else {
// The card action has been handled
// The PaymentIntent can be confirmed again on the server
2019-09-09 17:37:54 +02:00
Payment.confirm({ payment_intent_id: result.paymentIntent.id, cart_items: $scope.cartItems }, function(confirmResult) {
2019-09-10 12:46:02 +02:00
handleServerResponse(confirmResult, confirmButton);
}, function(error) { handleServerResponse({ error }, confirmButton) });
}
});
} else {
2019-09-10 12:46:02 +02:00
$scope.onPaymentSuccess(response);
}
}
}
});
}]);