1scss:
 2	form {
 3		margin: auto;
 4		max-width: 40em;
 5		text-align: center;
 6
 7		button {
 8			display: block;
 9			width: 10em;
10			margin: auto;
11		}
12
13	}
14
15form method="post" action=""
16	#braintree
17		| Unfortunately, our credit card processor requires JavaScript.
18
19	input type="hidden" name="customer_id" value=customer_id
20	input type="hidden" name="braintree_nonce"
21
22script src="https://js.braintreegateway.com/web/dropin/1.26.0/js/dropin.min.js"
23javascript:
24	document.querySelector("#braintree").innerHTML = "";
25
26	var button = document.createElement("button");
27	button.innerHTML = "Save";
28	document.querySelector("form").appendChild(button);
29	braintree.dropin.create({
30		authorization: #{{token.to_json}},
31		container: "#braintree",
32		vaultManager: true,
33		translations: {
34			payWithCard: "Add a Card",
35			payingWith: "Default payment source",
36			chooseAnotherWayToPay: "Add a different payment source"
37		}
38	}, function (createErr, instance) {
39		if(createErr) console.log(createErr);
40
41		document.querySelector("form").addEventListener("submit", function(e) {
42			e.preventDefault();
43			instance._mainView.hideSheetError();
44			instance._mainView.showLoadingIndicator();
45
46			instance.requestPaymentMethod(function(err, payload) {
47				if(err) {
48					console.log(err);
49					instance._mainView.hideLoadingIndicator();
50					instance._mainView.showSheetError();
51				} else {
52					e.target.braintree_nonce.value = payload.nonce;
53					fetch("", {
54						"method": "POST",
55						"body": new FormData(e.target)
56					}).then(function(response) {
57						instance._mainView.hideLoadingIndicator();
58
59						if(response.status !== 200) {
60							return Promise.reject(response);
61						}
62					}).catch(function(err) {
63							console.log(err);
64							instance._mainView.hideLoadingIndicator();
65							instance._mainView.showSheetError();
66					});
67				}
68			});
69		});
70	});