mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2025-02-19 13:54:25 +01:00
[ongoing] update to stripe-js:v3 to use strong customer authentication
This commit is contained in:
Sylvain
parent
3d54198d35
commit
967f539ad9
@ -1,23 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
// https://github.com/gtramontina/stripe-angular
|
||||
|
||||
Application.Directives.directive('stripeForm', ['$window',
|
||||
function ($window) {
|
||||
var directive = { restrict: 'A' };
|
||||
directive.link = function (scope, element, attributes) {
|
||||
var form = angular.element(element);
|
||||
form.bind('submit', function () {
|
||||
var button = form.find('button');
|
||||
button.prop('disabled', true);
|
||||
$window.Stripe.createToken(form[0], function () {
|
||||
var args = arguments;
|
||||
scope.$apply(function () {
|
||||
scope[attributes.stripeForm].apply(scope, args);
|
||||
});
|
||||
// button.prop('disabled', false);
|
||||
});
|
||||
});
|
||||
};
|
||||
return directive;
|
||||
}]);
|
||||
69
app/assets/javascripts/directives/stripe-form.js
Normal file
69
app/assets/javascripts/directives/stripe-form.js
Normal file
@ -0,0 +1,69 @@
|
||||
/* global Stripe */
|
||||
|
||||
Application.Directives.directive('stripeForm', ['$window',
|
||||
function ($window) {
|
||||
return ({
|
||||
restrict: 'A',
|
||||
link: ($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', async () => {
|
||||
const button = form.find('button');
|
||||
button.prop('disabled', true);
|
||||
|
||||
// TODO https://stripe.com/docs/payments/payment-intents/web-manual
|
||||
const { paymentMethod, error } = await stripe.createPaymentMethod('card', cardElement);
|
||||
if (error) {
|
||||
// Show error in payment form
|
||||
} else {
|
||||
// Send paymentMethod.id to your server (see Step 2)
|
||||
const response = await fetch('/ajax/confirm_payment', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ payment_method_id: paymentMethod.id })
|
||||
});
|
||||
|
||||
const json = await response.json();
|
||||
|
||||
// Handle server response (see Step 3)
|
||||
$scope.$apply(function () {
|
||||
$scope[form].apply($scope, json);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}]);
|
||||
@ -36,6 +36,7 @@
|
||||
@import "modules/signup";
|
||||
@import "modules/abuses";
|
||||
@import "modules/cookies";
|
||||
@import "modules/stripe";
|
||||
|
||||
@import "app.responsive";
|
||||
|
||||
|
||||
18
app/assets/stylesheets/modules/stripe.scss
Normal file
18
app/assets/stylesheets/modules/stripe.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.StripeElement {
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 3px 0 #e6ebf1;
|
||||
-webkit-transition: box-shadow 150ms ease;
|
||||
transition: box-shadow 150ms ease;
|
||||
}
|
||||
|
||||
#card-errors {
|
||||
height: 20px;
|
||||
padding: 4px 0;
|
||||
color: #fa755a;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
@ -13,23 +13,8 @@
|
||||
<h3 class="m-t-xs" ng-if="walletAmount" ng-bind-html="'you_have_amount_in_wallet' | translate:{ amount: numberFilter(walletAmount, 2), currency: currencySymbol }"></h3>
|
||||
<p ng-if="walletAmount > 0 && amount !== 0" class="text-italic" ng-bind-html="'credit_amount_for_pay_reservation' | translate:{ amount: numberFilter(amount, 2), currency: currencySymbol }"></p>
|
||||
|
||||
<div class="form-group" ng-class="{'has-error': stripeForm.number.$dirty && stripeForm.number.$invalid}">
|
||||
<div class="col-sm-12">
|
||||
<input autocomplete="off" class="form-control card-number" placeholder="{{ 'enter_your_card_number' | translate }}" type="text" data-stripe="number" name="number" ng-model="cardNumero" required ng-minlength="14" ng-maxlength="16" ng-pattern="/^\d+$/">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4" ng-class="{'has-error': stripeForm.expMonth.$dirty && stripeForm.expMonth.$invalid}">
|
||||
<input class="form-control card-expiry-month" placeholder="MM" type="text" data-stripe="exp-month" name="expMonth" ng-model="expMonth" required ng-minlength="1" ng-maxlength="2" ng-pattern="/^\d+$/">
|
||||
</div>
|
||||
<div class="col-sm-4" ng-class="{'has-error': stripeForm.expYear.$dirty && stripeForm.expYear.$invalid}">
|
||||
<input class="form-control card-expiry-year" placeholder="YYYY" type="text" data-stripe="exp-year" name="expYear" ng-model="expYear" required ng-minlength="4" ng-maxlength="4" ng-pattern="/^\d+$/">
|
||||
</div>
|
||||
<div class="col-sm-4" ng-class="{'has-error': stripeForm.cvc.$dirty && stripeForm.cvc.$invalid}">
|
||||
<input autocomplete="off" class="form-control card-cvc" placeholder="CVC" type="text" data-stripe="cvc" name="cvc" ng-model="cvc" required ng-minlength="3" ng-maxlength="4" ng-pattern="/^\d+$/">
|
||||
</div>
|
||||
</div>
|
||||
<div id="card-element"></div>
|
||||
<div id="card-errors" role="alert"></div>
|
||||
|
||||
<div class="form-group" ng-class="{'has-error': stripeForm.acceptCondition.$dirty && stripeForm.acceptCondition.$invalid}" ng-show="cgv">
|
||||
<div class="col-sm-12 text-sm checkbox-group">
|
||||
|
||||
@ -12,10 +12,8 @@
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,800,700italic' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Loved+by+the+King' rel='stylesheet' type='text/css'>
|
||||
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
|
||||
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
|
||||
<script type="text/javascript">
|
||||
Stripe.setPublishableKey('<%= Rails.application.secrets.stripe_publishable_key %>');
|
||||
|
||||
var Fablab = Fablab || {};
|
||||
|
||||
Fablab.withoutPlans = ('<%= Rails.application.secrets.fablab_without_plans %>' == 'true');
|
||||
|
||||
@ -173,7 +173,6 @@ en:
|
||||
# stripe payment modal
|
||||
i_have_read_and_accept_: "I have read, and accept"
|
||||
_the_general_terms_and_conditions: "the general terms and conditions."
|
||||
enter_your_card_number: "Enter your card number"
|
||||
credit_amount_for_pay_reservation: "{{amount}} {{currency}} remains to be paid to confirm your reservation"
|
||||
client_credit_amount_for_pay_reservation: "{{amount}} {{currency}} remains to be paid to confirm reservation of client"
|
||||
|
||||
|
||||
@ -173,7 +173,6 @@ es:
|
||||
# stripe payment modal
|
||||
i_have_read_and_accept_: "He leido y acepto"
|
||||
_the_general_terms_and_conditions: "Los términos y condiciones."
|
||||
enter_your_card_number: "Introduce el número de tu tarjeta"
|
||||
credit_amount_for_pay_reservation: "{{amount}} {{currency}} falta por pagar para efectuar su reserva"
|
||||
client_credit_amount_for_pay_reservation: "{{amount}} {{currency}} falta por pagar para efectuar la reserva del cliente"
|
||||
|
||||
|
||||
@ -173,7 +173,6 @@ fr:
|
||||
# fenêtre de paiement stripe
|
||||
i_have_read_and_accept_: "J'ai bien pris connaissance, et accepte"
|
||||
_the_general_terms_and_conditions: "les conditions générales de vente."
|
||||
enter_your_card_number: "Saisissez votre numéro de carte"
|
||||
credit_amount_for_pay_reservation: "Il vous reste {{amount}} {{currency}} à payer pour valider votre réservation"
|
||||
client_credit_amount_for_pay_reservation: "Il reste {{amount}} {{currency}} à payer pour valider la réservation"
|
||||
|
||||
|
||||
@ -173,7 +173,6 @@ pt:
|
||||
# stripe payment modal
|
||||
i_have_read_and_accept_: "Eu li e aceito"
|
||||
_the_general_terms_and_conditions: "os termos e condições."
|
||||
enter_your_card_number: "Entre com o número do seu cartão"
|
||||
credit_amount_for_pay_reservation: "{{amount}} {{currency}} a ser pago para confirmar sua inscrição"
|
||||
client_credit_amount_for_pay_reservation: "{{amount}} {{currency}} a ser pago para confirmar a inscrição do cliente"
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user