1
+ {% extends 'shop/base.html' %}
2
+
3
+ {% block title %}
4
+ Pay by credit card
5
+ {% endblock %}
6
+
7
+ {% block content %}
8
+ < h1 > Pay by credit card</ h1 >
9
+ < form action =". " id ="payment " method ="post ">
10
+ {% csrf_token %}
11
+ < label for ="card-number "> Card number</ label >
12
+ < div id ="card-number " class ="field "> </ div >
13
+
14
+ < label for ="cvv "> CVV</ label >
15
+ < div id ="cvv " class ="field "> </ div >
16
+
17
+ < label for ="expiration-date "> Expiration Date</ label >
18
+ < div id ="expiration-date " class ="field "> </ div >
19
+
20
+ < input type ="hidden " id ="nonce " name ="payment_method_nonce " value ="">
21
+
22
+ < input type ="submit " value ="Pay ">
23
+ </ form >
24
+
25
+ < script src ="https://js.braintreegateway.com/web/3.29.0/js/client.min.js "> </ script >
26
+ < script src ="https://js.braintreegateway.com/web/3.29.0/js/hosted-fields.min.js "> </ script >
27
+
28
+ < script >
29
+ var form = document . querySelector ( '#payment' ) ;
30
+ var submit = document . querySelector ( 'input[type="submit"]' ) ;
31
+ braintree . client . create ( {
32
+ authorization : '{{ client_token }}'
33
+ } , function ( clientErr , clientInstance ) {
34
+ if ( clientErr ) {
35
+ console . error ( clientErr ) ;
36
+ return ;
37
+ }
38
+ braintree . hostedFields . create ( {
39
+ client : clientInstance ,
40
+ styles : {
41
+ 'input' : { 'font-size' : '13px' } ,
42
+ 'input.invalid' : { 'color' : 'red' } ,
43
+ 'input.valid' : { 'color' : 'green' }
44
+ } ,
45
+ fields : {
46
+ number : { selector : '#card-number' } ,
47
+ cvv : { selector : '#cvv' } ,
48
+ expirationDate : { selector : '#expiration-date' }
49
+ }
50
+ } , function ( hostedFieldsErr , hostedFieldsInstance ) {
51
+ if ( hostedFieldsErr ) {
52
+ console . error ( hostedFieldsErr ) ;
53
+ return ;
54
+ }
55
+ submit . removeAttribute ( 'disabled' ) ;
56
+ form . addEventListener ( 'submit' , function ( event ) {
57
+ event . preventDefault ( ) ;
58
+ hostedFieldsInstance . tokenize ( function ( tokenizeErr , payload ) {
59
+ if ( tokenizeErr ) {
60
+ console . error ( tokenizeErr ) ;
61
+ return ;
62
+ }
63
+ // Задаем значение поля для отправки токена на сервер.
64
+ document . getElementById ( 'nonce' ) . value = payload . nonce ;
65
+ // Отправляем форму на сервер.
66
+ document . getElementById ( 'payment' ) . submit ( ) ;
67
+ } ) ;
68
+ } , false ) ;
69
+ } ) ;
70
+ } ) ;
71
+ </ script >
72
+ {% endblock %}
0 commit comments