Learn Django

Update the Template

The last step in integrating Stripe is to update the template. Open /.../crmeasy/templates/subscribers/subscriber_new.html in your IDE.

Delete Old Submit Button

First, locate this HTML input element and delete it.

1
<input class="btn btn-primary" type="submit" value="submit">

Add New Form Fields

Then, locate the {# Credit Card Section #} comment and add this code directly beneath it. This HTML adds fields for the card number, expiration date, and CCV code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{# Credit Card Section #}
<h5 class="sn-sh">CREDIT CARD</h5>
<form id="payment-form" action="." method="post">
    <table class="table">
        <tbody>
            <tr>
                <th>Card Number</th>
                <th>CVC</th>
                <th>Exp Month</th>
                <th>Exp Year</th>
            </tr>
            <tr>
                <td><input type="text" size="32" data-stripe="number"
                           class="col-md-10 form-control"/></td>
                <td><input type="text" size="4" data-stripe="cvc"
                           class="col-md-2 form-control"/></td>
                <td><input type="text" size="2" data-stripe="exp-month"
                           class="col-md-1 form-control"/></td>
                <td><input type="text" size="4" data-stripe="exp-year"
                           class="col-md-1 form-control"/></td>
            </tr>
        </tbody>
    </table>
    <span class="payment-errors label label-danger"></span>
    <div class="">
        {% for err in form.non_field_errors %}
            <p class="label label-danger">{{ err }}</p>
        {% endfor %}
    </div>
    <input id="payment-submit" type="submit" value="Signup"
           class="btn btn-primary"/>
</form>

Add the JavaScript Code

Then, add this code to the very end of the file, after the {% endblock content %} tag.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
{% block footer_javascript_page %}
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
    <script type="text/javascript">
        // This identifies your website in the createToken call below
        Stripe.setPublishableKey("{{ STRIPE_PUBLISHABLE_KEY }}");

        var stripeResponseHandler = function(status, response) {
            var $form = $('#payment-form');
            var $regform = $('#user-reg-form');

            if (response.error) {
                // Show the errors on the form
                $form.find('.payment-errors').text(response.error.message);
                $form.find('#payment-submit').prop('disabled', false);
            } else {
                // token contains id, last4, and card type
                var token = response.id;
                // Insert the token into the form so it gets submitted to the server
                $regform.append(
                        $('<input type="hidden" name="stripeToken" />').val(token)
                );
                // and submit
                $regform.get(0).submit();
            }
        };

        jQuery(function($) {
            $('#payment-form').submit(function(event) {
            var $form = $(this);

            // Disable the submit button to prevent repeated clicks
            $form.find('#payment-submit').prop('disabled', true);

            Stripe.createToken($form, stripeResponseHandler);

            // Prevent the form from submitting with the default action
            return false;
            });
        });
    </script>
{% endblock footer_javascript_page %}

Code Review

Lines 115-153: This JavaScript code is used to interact with Stripe's API. It's first job is to gather the credit card information, encrypt it, and send it to Stripe. Stripe will do some pre-processing on it to make sure the card information is valid. It then passes a token back to the user's browser. Once that task is complete, the browser will then submit the information to the CRM Easy servers for processing.

Commit Changes

Execute these commands to commit your changes in Git.

1
2
3
4
5
# add files
(venv)$ git add .

# commit files
(venv)$ git commit -m "updated subscriber template with cc form fields and js code"

Track your progress with a free account