1scss:
2 html, body {
3 font-family: sans-serif;
4 text-align: center;
5 }
6
7 form {
8 margin: auto;
9 max-width: 40em;
10
11 fieldset {
12 max-width: 20em;
13 margin: 2em auto;
14 label {
15 display: block;
16 }
17 }
18
19 details {
20 margin: 2em auto;
21 input { max-width: 3em; }
22 }
23
24 button {
25 display: block;
26 width: 10em;
27 margin: auto;
28 }
29
30 }
31
32 .error {
33 color: red;
34 max-width: 40em;
35 margin: 1em auto;
36 }
37
38h1 Activate New Account
39
40- if error
41 p.error
42 ' Your bank declined the transaction.
43 ' Often this happens when a person's credit card is a US card
44 ' that does not support international transactions, as JMP is
45 ' not based in the USA, though we do support transactions in USD.
46 p.error
47 ' If you were trying a prepaid card, you may wish to use
48 a href="https://privacy.com/" Privacy.com
49 | instead, as they do support international transactions.
50
51form method="post" action=""
52 #braintree
53 | Unfortunately, our credit card processor requires JavaScript.
54
55 fieldset
56 legend Pay for 5 months of service
57 label
58 ' $14.95 USD
59 input type="radio" name="plan_name" value="usd_beta_unlimited-v20210223" required="required"
60 label
61 ' $17.95 CAD
62 input type="radio" name="plan_name" value="cad_beta_unlimited-v20210223" required="required"
63
64 details
65 summary Auto top-up when account balance is low?
66 label
67 | When balance drops below $5, add $
68 input type="number" name="auto_top_up_amount" min="15" value=""
69
70 input type="hidden" name="customer_id" value=customer_id
71 input type="hidden" name="braintree_nonce"
72
73script src="https://js.braintreegateway.com/web/dropin/1.26.0/js/dropin.min.js"
74javascript:
75 document.querySelector("#braintree").innerHTML = "";
76
77 var button = document.createElement("button");
78 button.innerHTML = "Pay Now";
79 document.querySelector("form").appendChild(button);
80 braintree.dropin.create({
81 authorization: #{{token.to_json}},
82 container: "#braintree",
83 vaultManager: false
84 }, function (createErr, instance) {
85 if(createErr) console.log(createErr);
86
87 document.querySelector("form").addEventListener("submit", function(e) {
88 e.preventDefault();
89
90 instance.requestPaymentMethod(function(err, payload) {
91 if(err) {
92 console.log(err);
93 } else {
94 e.target.braintree_nonce.value = payload.nonce;
95 e.target.submit();
96 }
97 });
98 });
99 });