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 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 input type="hidden" name="customer_id" value=customer_id
60 input type="hidden" name="braintree_nonce"
61
62script src="https://js.braintreegateway.com/web/dropin/1.26.0/js/dropin.min.js"
63javascript:
64 document.querySelector("#braintree").innerHTML = "";
65
66 var button = document.createElement("button");
67 button.innerHTML = "Pay Now";
68 document.querySelector("form").appendChild(button);
69 braintree.dropin.create({
70 authorization: #{{token.to_json}},
71 container: "#braintree",
72 vaultManager: false
73 }, function (createErr, instance) {
74 if(createErr) console.log(createErr);
75
76 document.querySelector("form").addEventListener("submit", function(e) {
77 e.preventDefault();
78
79 instance.requestPaymentMethod(function(err, payload) {
80 if(err) {
81 console.log(err);
82 instance._mainView.showSheetError();
83 } else {
84 e.target.braintree_nonce.value = payload.nonce;
85 e.target.submit();
86 }
87 });
88 });
89 });