~singpolyma/jmp-pay

ref: 737b8acab9d5ace84e86009f55d3de049cb8c370 jmp-pay/views/activate.slim -rw-r--r-- 2.1 KiB
737b8acaStephen Paul Weber Allow activating an account via credit card on web 1 year, 11 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
scss:
	html, body {
		font-family: sans-serif;
		text-align: center;
	}

	form {
		margin: auto;
		max-width: 40em;

		fieldset {
			max-width: 20em;
			margin: 2em auto;
			label {
				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"

	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);
					instance._mainView.showSheetError();
				} else {
					e.target.braintree_nonce.value = payload.nonce;
					e.target.submit();
				}
			});
		});
	});