-
Notifications
You must be signed in to change notification settings - Fork 111
/
checkout.php
201 lines (178 loc) · 7.94 KB
/
checkout.php
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<?php
// This is just for very basic implementation reference, in production, you should validate the incoming requests and implement your backend more securely.
// Please refer to this docs:
// https://docs.midtrans.com/en/core-api/credit-card?id=_1-getting-the-card-token
namespace Midtrans;
require_once dirname(__FILE__) . '/../../Midtrans.php';
// Set Your server key
// can find in Merchant Portal -> Settings -> Access keys
Config::$clientKey = '<your client key>';
// non-relevant function only used for demo/example purpose
printExampleWarningMessage();
function printExampleWarningMessage() {
if (strpos(Config::$clientKey, 'your ') != false ) {
echo "<code>";
echo "<h4>Please set your client key from sandbox</h4>";
echo "In file: " . __FILE__;
echo "<br>";
echo "<br>";
echo htmlspecialchars('Config::$clientKey = \'<your client key>\';');
die();
}
}
?>
<html>
<head>
<title>Checkout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.12/featherlight.min.css">
</head>
<body>
<script id="midtrans-script" type="text/javascript" src="https://api.midtrans.com/v2/assets/js/midtrans-new-3ds.min.js" data-environment="sandbox" data-client-key="<?php echo Config::$clientKey;?>"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.12/featherlight.min.js"></script>
<h1>Checkout</h1>
<form action="checkout-process.php" method="POST" id="payment-form">
<fieldset>
<legend>Checkout</legend>
<small><strong>Field that may be presented to customer:</strong></small>
<p>
<label>Card Number</label>
<input class="card-number" name="card-number" value="4811 1111 1111 1114" size="23" type="text" autocomplete="off" />
</p>
<p>
<label>Expiration (MM/YYYY)</label>
<input class="card-expiry-month" name="card-expiry-month" value="12" placeholder="MM" size="2" type="text" />
<span> / </span>
<input class="card-expiry-year" name="card-expiry-year" value="2025" placeholder="YYYY" size="4" type="text" />
</p>
<p>
<label>CVV</label>
<input class="card-cvv" name="card-cvv" value="123" size="4" type="password" autocomplete="off" />
</p>
<p>
<label>Save credit card</label>
<input type="checkbox" id="save_cc" name="save_cc" value="true">
</p>
<small><strong>Fields that shouldn't be presented to the customer:</strong></small>
<p>
<label>3D Secure</label>
<input type="checkbox" id="secure" name="secure" value="true" checked>
</p>
<input id="token_id" name="token_id" type="hidden" />
<button class="submit-button" type="submit">Submit Payment</button>
</fieldset>
</form>
<code>
<pre>
<b>Testing cards:</b>
<b>For 3D Secure:</b>
Visa 4811 1111 1111 1114
MasterCard 5211 1111 1111 1117
<b>For Non 3D Secure:</b>
Visa success 4011 1111 1111 1112
Visa challenge 4111 1111 1111 1111
Visa deny by FDS 4211 1111 1111 1110
MasterCard success 5481 1611 1111 1081
MasterCard challenge 5110 1111 1111 1119
MasterCard deny by FDS 5210 1111 1111 1118
</pre>
</code>
<!-- Javascript for token generation -->
<script type="text/javascript">
$(function () {
// open the console log to check the flow
// 3ds new flow:
// 1. get token_id
// 2. send token_id to backend
// 3. initial charge from backend to midtrans api
// 4. open redirect_url
var options = {
performAuthentication: function(redirect_url){
openDialog(redirect_url);
},
onSuccess: function(response){
console.log('success');
console.log('response:',response);
closeDialog();
},
onFailure: function(response){
console.log('fail');
console.log('response:',response);
closeDialog();
alert(response.status_message);
$('button').removeAttr("disabled");
},
onPending: function(response){
console.log('pending');
console.log('response:',response);
closeDialog();
}
};
function openDialog(url) {
$.featherlight({
iframe: url,
iframeMaxWidth: '80%',
iframeWidth: 700,
iframeHeight: 500,
closeOnClick: false,
closeOnEsc: false,
closeIcon:''
});
}
function closeDialog() {
$.featherlight.close();
}
$(".submit-button").click(function (event) {
var card = {
"card_number": $(".card-number").val(),
"card_exp_month": $(".card-expiry-month").val(),
"card_exp_year": $(".card-expiry-year").val(),
"card_cvv": $(".card-cvv").val()
};
event.preventDefault();
$(this).attr("disabled", "disabled");
console.log('1. get token_id');
MidtransNew3ds.getCardToken(card, getCardTokenCallback);
return false;
});
// callback functions
var getCardTokenCallback = {
onSuccess: function(response) {
// Success to get card token_id, implement as you wish here
console.log('Success to get card token_id, response:', response);
var token_id = response.token_id;
$("#token_id").val(token_id);
console.log('This is the card token_id:', token_id);
// Implement sending the token_id to backend to proceed to next step
console.log('2. send token_id to backend');
// send token_id, save_cc and secure params
// we send secure param for sample, in production, you should define transaction is secure/not in backend
// we recommend always use secure=true
// data: $("#token_id, #save_cc, #secure").serialize()
$.ajax({
type: 'POST',
url: 'checkout-process.php',
data: $("#token_id, #save_cc, #secure").serialize(),
success: function(response){
console.log('3. response charge from backend:', response);
if (response.redirect_url){
console.log('4. open redirect_url');
MidtransNew3ds.authenticate(response.redirect_url, options);
}
},
error: function(xhr, status, error){
console.error(xhr);
}
});
},
onFailure: function(response) {
// Fail to get card token_id, implement as you wish here
console.log('Fail to get card token_id, response:', response);
closeDialog();
$('button').removeAttr("disabled");
}
};
});
</script>
</body>
</html>