~singpolyma/jmp-pay

ref: 68ed9c34b0d4a2eaa0e49def372deabe4eb55daf jmp-pay/views/credit_cards.slim -rw-r--r-- 2.5 KiB
68ed9c34Stephen Paul Weber Run billing 3 at a time 5 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
scss:
	form {
		margin: auto;
		max-width: 40em;
		text-align: center;

		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;
		}

	}

form method="post" action=""
	#braintree
		| Unfortunately, our credit card processor requires JavaScript.

	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=auto_top_up
			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.33.0/js/dropin.js"
javascript:
	document.querySelector("#braintree").innerHTML = "";

	var button = document.createElement("button");
	button.innerHTML = "Save";
	document.querySelector("form").appendChild(button);
	braintree.dropin.create({
		authorization: #{{token.to_json}},
		container: "#braintree",
		card: { vault: { vaultCard: false } },
		vaultManager: true,
		threeDSecure: true,
		translations: {
			payWithCard: "Add a Card",
			payingWith: "Default payment source",
			chooseAnotherWayToPay: "Add a different payment source"
		}
	}, function (createErr, instance) {
		if(createErr) console.log(createErr);

		document.querySelector("form").addEventListener("submit", function(e) {
			e.preventDefault();
			instance._mainView.hideSheetError();

			instance.requestPaymentMethod({
				threeDSecure: {
					amount: "0.0",
					requireChallenge: true
				}
			}, function(err, payload) {
				if(err) {
					console.log(err);
				} else {
					instance._mainView.showLoadingIndicator();
					e.target.braintree_nonce.value = payload.nonce;
					fetch("", {
						"method": "POST",
						"body": new FormData(e.target)
					}).then(function(response) {
						instance._mainView.hideLoadingIndicator();

						if(response.status !== 200) {
							return Promise.reject(response);
						}
					}).catch(function(err) {
							console.log(err);
							err.text().then(function(msg) {
								instance._mainView.hideLoadingIndicator();
								instance.clearSelectedPaymentMethod();
								instance._mainView.showSheetError(msg);
							});
					}).catch(function(err) {
						console.log(err);
						instance._mainView.hideLoadingIndicator();
						instance.clearSelectedPaymentMethod();
						instance._mainView.showSheetError();
					});
				}
			});
		});
	});