From 687ce29366a5f08edf44e4c9bae678cd0db05213 Mon Sep 17 00:00:00 2001 From: Raphael Michel Date: Mon, 10 Jul 2017 20:00:03 +0200 Subject: [PATCH] Fix #547 -- Switch to Stripe Elements --- .../pretixplugins/stripe/pretix-stripe.js | 144 ++++++++---------- .../stripe/checkout_payment_form.html | 76 ++++----- ...checkout_payment_form_stripe_checkout.html | 6 +- .../static/pretixpresale/scss/_forms.scss | 41 +++-- 4 files changed, 124 insertions(+), 143 deletions(-) diff --git a/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.js b/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.js index 615c55149..64af3e4a0 100644 --- a/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.js +++ b/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.js @@ -1,115 +1,97 @@ /*global $, stripe_pubkey, stripe_loadingmessage, gettext */ 'use strict'; -var Stripe = null; var pretixstripe = { - 'validate_number': function () { - var numb = $("#stripe_number").val(); - $(".stripe-number").addClass("has-feedback"); - if (Stripe.card.validateCardNumber(numb)) { - $(".stripe-number").addClass("has-success").removeClass("has-error"); - $(".stripe-number .form-control-feedback").addClass("fa-check") - .removeClass("fa-remove").removeClass("sr-only"); - } else { - $(".stripe-number").removeClass("has-success").addClass("has-error"); - $(".stripe-number .form-control-feedback").addClass("fa-remove") - .removeClass("fa-ok").removeClass("sr-only"); - } - }, - 'validate_expire': function () { - var month = $("#stripe_exp_month").val(); - var year = $("#stripe_exp_year").val(); - $(".stripe-exp").addClass("has-feedback"); - if (Stripe.card.validateExpiry(month, year)) { - $(".stripe-exp").addClass("has-success").removeClass("has-error"); - $(".stripe-exp .form-control-feedback").addClass("fa-check") - .removeClass("fa-remove").removeClass("sr-only"); - } else { - $(".stripe-exp").removeClass("has-success").addClass("has-error"); - $(".stripe-exp .form-control-feedback").addClass("fa-remove") - .removeClass("fa-ok").removeClass("sr-only"); - } - }, - 'validate_cvc': function () { - var cvc = $("#stripe_cvc").val(); - $(".stripe-cvc").addClass("has-feedback"); - if (Stripe.card.validateCVC(cvc)) { - $(".stripe-cvc").addClass("has-success").removeClass("has-error"); - $(".stripe-cvc .form-control-feedback").addClass("fa-check") - .removeClass("fa-remove").removeClass("sr-only"); - } else { - $(".stripe-cvc").removeClass("has-success").addClass("has-error"); - $(".stripe-cvc .form-control-feedback").addClass("fa-remove") - .removeClass("fa-ok").removeClass("sr-only"); - } - }, + stripe: null, + elements: null, + card: null, + 'request': function () { waitingDialog.show(gettext("Contacting Stripe …")); $(".stripe-errors").hide(); - Stripe.card.createToken( - { - number: $('#stripe_number').val(), - cvc: $('#stripe_cvc').val(), - exp_month: $('#stripe_exp_month').val(), - exp_year: $('#stripe_exp_year').val(), - name: $('#stripe_name').val() - }, - pretixstripe.response - ); - }, - 'response': function (status, response) { - var $form = $("#stripe_number").parents("form"); - waitingDialog.hide(); - if (response.error) { - $(".stripe-errors").stop().hide().removeClass("sr-only"); - $(".stripe-errors").html("
" + response.error.message + "
"); - $(".stripe-errors").slideDown(); - } else { - var token = response.id; - // Insert the token into the form so it gets submitted to the server - $("#stripe_token").val(token); - $("#stripe_card_brand").val(response.card.brand); - $("#stripe_card_last4").val(response.card.last4); - // and submit - $form.get(0).submit(); - } + + pretixstripe.stripe.createToken(pretixstripe.card).then(function (result) { + waitingDialog.hide(); + if (result.error) { + $(".stripe-errors").stop().hide().removeClass("sr-only"); + $(".stripe-errors").html("
" + result.error.message + "
"); + $(".stripe-errors").slideDown(); + } else { + var $form = $("#stripe_token").closest("form"); + // Insert the token into the form so it gets submitted to the server + $("#stripe_token").val(result.token.id); + $("#stripe_card_brand").val(result.token.card.brand); + $("#stripe_card_last4").val(result.token.card.last4); + // and submit + $form.get(0).submit(); + } + }); }, 'load': function () { $.ajax( { - url: 'https://js.stripe.com/v2/', + url: 'https://js.stripe.com/v3/', dataType: 'script', success: function () { - Stripe.setPublishableKey($.trim($("#stripe_pubkey").html())); + pretixstripe.stripe = Stripe($.trim($("#stripe_pubkey").html())); + pretixstripe.elements = pretixstripe.stripe.elements(); + pretixstripe.card = pretixstripe.elements.create('card', { + 'style': { + 'base': { + 'fontFamily': '"Open Sans","OpenSans","Helvetica Neue",Helvetica,Arial,sans-serif', + 'fontSize': '14px', + 'color': '#555555', + 'lineHeight': '1.42857', + 'border': '1px solid #ccc', + '::placeholder': { + color: 'rgba(0,0,0,0.4)', + }, + }, + 'invalid': { + 'color': 'red', + }, + }, + classes: { + focus: 'is-focused', + invalid: 'has-error', + } + }); + pretixstripe.card.mount("#stripe-card"); } } ); } }; $(function () { - if (!$("#stripe_number").length) // Not on the checkout page + if (!$("#stripe-card").length) // Not on the checkout page return; if ($("input[name=payment][value=stripe]").is(':checked') || $(".payment-redo-form").length) { pretixstripe.load(); } else { - $("input[name=payment]").change(function() { + $("input[name=payment]").change(function () { if ($(this).val() == 'stripe') { pretixstripe.load(); } }) } - // Stripe.setPublishableKey('{{ settings.publishable_key }}'); - // + $("#stripe_other_card").click( + function (e) { + $("#stripe_token").val(""); + $("#stripe-current-card").slideUp(); + $("#stripe-card").slideDown(); + pretixstripe.start(); + e.preventDefault(); + return false; + } + ); - $("#stripe_number").change(pretixstripe.validate_number).keydown(pretixstripe.validate_number) - .keyup(pretixstripe.validate_number); - $(".stripe-exp input").change(pretixstripe.validate_expire).keydown(pretixstripe.validate_expire) - .keyup(pretixstripe.validate_expire) - $("#stripe_cvc").change(pretixstripe.validate_cvc).keydown(pretixstripe.validate_cvc) - .keyup(pretixstripe.validate_cvc) - $("#stripe_number").parents("form").submit( + if ($("#stripe-current-card").length) { + $("#stripe-card").hide(); + } + + $("#stripe-card").parents("form").submit( function () { if (($("input[name=payment][value=stripe]").prop('checked') || $("input[name=payment]").length === 0) && $("#stripe_token").val() == "") { diff --git a/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form.html b/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form.html index 0bfe685a8..1f8ca615c 100644 --- a/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form.html +++ b/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form.html @@ -9,56 +9,40 @@ {% trans "For a credit card payment, please turn on JavaScript." %} -
- -
- - + + {% if request.session.payment_stripe_token %} +
+

{% blocktrans trimmed %} + You already entered a card number that we will use to charge the payment amount. + {% endblocktrans %}

+
+
{% trans "Card type" %}
+
{{ request.session.payment_stripe_brand }}
+
{% trans "Card number" %}
+
+ **** **** **** + {{ request.session.payment_stripe_last4 }} + +
+
+ {% endif %} + +
+
-
- -
- - -
-
- - -
-
-
- -
- - -
-
-
- -
- -
-
-

- {% blocktrans trimmed %} +

+ {% blocktrans trimmed %} Your payment will be processed by Stripe, Inc. Your credit card data will be transmitted directly to Stripe and never touches our servers. - {% endblocktrans %} - - - + {% endblocktrans %} + + +

diff --git a/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form_stripe_checkout.html b/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form_stripe_checkout.html index 253a67436..7d44f72d4 100644 --- a/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form_stripe_checkout.html +++ b/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form_stripe_checkout.html @@ -30,11 +30,11 @@ {% endblocktrans %}

{% endif %} -

- {% blocktrans trimmed %} +

+ {% blocktrans trimmed %} Your payment will be processed by Stripe, Inc. Your credit card data will be transmitted directly to Stripe and never touches our servers. - {% endblocktrans %} + {% endblocktrans %}