scss:
html, body {
font-family: sans-serif;
text-align: center;
}
form {
margin: auto;
max-width: 40em;
fieldset {
max-width: 25em;
margin: 2em auto;
label { display: block; }
input[type=number] { max-width: 3em; }
small { display: block; }
}
button {
display: block;
width: 10em;
margin: auto;
}
}
.error {
color: red;
max-width: 40em;
margin: 1em auto;
}
h1 Activate New Account
- if error
p.error
' Your bank declined the transaction.
' Often this happens when a person's credit card is a US card
' that does not support international transactions, as JMP is
' not based in the USA, though we do support transactions in USD.
p.error
' If you were trying a prepaid card, you may wish to use
a href="https://privacy.com/" Privacy.com
| instead, as they do support international transactions.
form method="post" action=""
#braintree
| Unfortunately, our credit card processor requires JavaScript.
fieldset
legend Pay for 5 months of service
label
' $14.95 USD
input type="radio" name="plan_name" value="usd_beta_unlimited-v20210223" required="required"
label
' $17.95 CAD
input type="radio" name="plan_name" value="cad_beta_unlimited-v20210223" required="required"
fieldset
legend Auto top-up when account balance is low?
label
| When balance drops below $5, add $
input type="number" name="auto_top_up_amount" min="15" value="15"
small Leave blank for no auto top-up.
input type="hidden" name="customer_id" value=customer_id
input type="hidden" name="braintree_nonce"
script src="https://js.braintreegateway.com/web/dropin/1.26.0/js/dropin.min.js"
javascript:
document.querySelector("#braintree").innerHTML = "";
var button = document.createElement("button");
button.innerHTML = "Pay Now";
document.querySelector("form").appendChild(button);
braintree.dropin.create({
authorization: #{{token.to_json}},
container: "#braintree",
vaultManager: false
}, function (createErr, instance) {
if(createErr) console.log(createErr);
document.querySelector("form").addEventListener("submit", function(e) {
e.preventDefault();
instance.requestPaymentMethod(function(err, payload) {
if(err) {
console.log(err);
} else {
e.target.braintree_nonce.value = payload.nonce;
e.target.submit();
}
});
});
});