DroneDeploy
Search…
Payments.charge
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8">
6
<title>Document</title>
7
<style>
8
.btn {
9
border: none;
10
background-color: #039be5;
11
/*border-radius: 5px;*/
12
font-size: 14px;
13
font-family: Lato;
14
font-weight: 500;
15
color: white;
16
padding: 10px 16px;
17
margin-top: 10px;
18
flex-basis: 100%;
19
width: 100%;
20
}
21
22
.form-group {
23
width: 100%;
24
display: inline-flex;
25
justify-content: flex-start;
26
margin-top: 10px;
27
}
28
29
.title {
30
font-size: 1.3em;
31
font-weight: 500;
32
}
33
34
.sans {
35
font-family: Lato, sans-serif;
36
color: rgba(0, 0, 0, 0.87);
37
}
38
39
label {
40
font-weight: 300;
41
width: 100%;
42
}
43
44
input,
45
select {
46
border: none;
47
border-radius: 0;
48
border-bottom: 1px solid #039be5;
49
min-width: 30%;
50
max-width: 100%;
51
font-size: 0.8em;
52
margin-left: auto;
53
}
54
55
input[type="text"] {
56
width: 100%;
57
}
58
</style>
59
</head>
60
61
<body>
62
<h1 class="title">Payments.charge example</h1>
63
<form action="" id="payments-form">
64
<div class="form-group">
65
<label for="payment-amount">Pay what you want!</label> $
66
<input type="text" placeholder="00.00" id="payment-amount" />
67
</div>
68
<button id="payment-button" class="btn">Pay</button>
69
</form>
70
<script>
71
var paymentForm = document.getElementById('payments-form');
72
new DroneDeploy({
73
version: 1
74
})
75
.then(function(dronedeployApi) {
76
paymentForm.addEventListener('submit', function(event) {
77
event.preventDefault();
78
var amount = Number(event.target[0].value.replace(/(\d+\.\d{0,2})\d*/, '$1'));
79
80
if (amount !== amount) {
81
event.target[0].value = '';
82
return dronedeployApi.Messaging.showToast('Must enter a number', {
83
timeout: 5000
84
});
85
}
86
87
dronedeployApi.Payments.charge(amount, 'Testing payments')
88
.then(
89
function successfulPayment(paymentId) {
90
dronedeployApi.Messaging.showToast('Success! Payment ID: ' + paymentId, {
91
timeout: 5000
92
})
93
},
94
function failedPayment(error) {
95
dronedeployApi.Messaging.showToast(error, {
96
timeout: 5000
97
})
98
}
99
);
100
});
101
})
102
</script>
103
</body>
104
105
</html>
Copied!
Last modified 2yr ago
Copy link