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