Skip to content

Commit

Permalink
Merge pull request #58 from omarxp/3ds-new-flow
Browse files Browse the repository at this point in the history 
Sample 3ds new flow
  • Loading branch information
@omarxp
omarxp committed Sep 15, 2021
2 parents a1ad0c8 + c7e321b commit 4929d87
Show file tree
Hide file tree
Showing 8 changed files with 275 additions and 150 deletions.
88 changes: 24 additions & 64 deletions examples/core-api/checkout-process.php
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,19 @@
<?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=_2-sending-transaction-data-to-charge-api

namespace Midtrans;

require_once dirname(__FILE__) . '/../../Midtrans.php';

if (empty($_POST['token_id'])) {
die('Empty token_id!');
}

Config::$serverKey = '<your server key>';
// Uncomment for append and override notification URL
// Config::$appendNotifUrl = "https://example.com";
// Config::$overrideNotifUrl = "https://example.com";

if (strpos(Config::$serverKey, 'your ') != false ) {
echo "<code>";
echo "<h4>Please set your server key from sandbox</h4>";
echo "In file: " . __FILE__;
echo "<br>";
echo "<br>";
echo htmlspecialchars('Config::$serverKey = \'<your server key>\';');
die();
}
// non-relevant function only used for demo/example purpose
printExampleWarningMessage();

// Uncomment for production environment
// Config::$isProduction = true;
Expand Down Expand Up @@ -86,14 +78,17 @@

// Token ID from checkout page
$token_id = $_POST['token_id'];
$authentication = isset($_POST['secure']);
$save_token_id = isset($_POST['save_cc']);

// Transaction data to be sent
$transaction_data = array(
'payment_type' => 'credit_card',
'credit_card' => array(
'token_id' => $token_id,
// 'bank' => 'bni', // optional acquiring bank, must be the same bank with get-token bank
'save_token_id' => isset($_POST['save_cc'])
'token_id' => $token_id,
'authentication' => $authentication,
// 'bank' => 'bni', // optional acquiring bank
'save_token_id' => $save_token_id
),
'transaction_details' => $transaction_details,
'item_details' => $items,
Expand All @@ -102,56 +97,21 @@

try {
$response = CoreApi::charge($transaction_data);
} catch (Exception $e) {
header('Content-Type: application/json');
echo json_encode($response);
} catch (\Exception $e) {
echo $e->getMessage();
die();
}

// Success
if ($response->transaction_status == 'capture') {
echo "<p>Transaksi berhasil.</p>";
echo "<p>Status transaksi untuk order id $response->order_id: " .
"$response->transaction_status</p>";

echo "<h3>Detail transaksi:</h3>";
echo "<pre>";
var_dump($response);
echo "</pre>";
}
// Deny
else if ($response->transaction_status == 'deny') {
echo "<p>Transaksi ditolak.</p>";
echo "<p>Status transaksi untuk order id .$response->order_id: " .
"$response->transaction_status</p>";
echo "<h3>Detail transaksi:</h3>";
echo "<pre>";
var_dump($response);
echo "</pre>";
}
// Challenge
else if ($response->transaction_status == 'challenge') {
echo "<p>Transaksi challenge.</p>";
echo "<p>Status transaksi untuk order id $response->order_id: " .
"$response->transaction_status</p>";

echo "<h3>Detail transaksi:</h3>";
echo "<pre>";
var_dump($response);
echo "</pre>";
}
// Error
else {
echo "<p>Terjadi kesalahan pada data transaksi yang dikirim.</p>";
echo "<p>Status message: [$response->status_code] " .
"$response->status_message</p>";

echo "<pre>";
var_dump($response);
echo "</pre>";
function printExampleWarningMessage() {
if (strpos(Config::$serverKey, 'your ') != false ) {
echo "<code>";
echo "<h4>Please set your server key from sandbox</h4>";
echo "In file: " . __FILE__;
echo "<br>";
echo "<br>";
echo htmlspecialchars('Config::$serverKey = \'<your server key>\';');
die();
}
}

echo "<hr>";
echo "<h3>Request</h3>";
echo "<pre>";
var_dump($response);
echo "</pre>";
137 changes: 84 additions & 53 deletions examples/core-api/checkout.php
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,28 @@
<?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';

// YOUR CLIENT KEY
// Set Your server key
// can find in Merchant Portal -> Settings -> Access keys
Config::$clientKey = "<your client key>";

if (strpos(Config::$clientKey, 'your ') != false ) {
echo "<p style='background: #FFB588; padding: 10px;'>";
echo "Please set your client key in file " . __FILE__;
echo "</p>";
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>
Expand All @@ -22,7 +33,7 @@
</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="VT-client-0N5ngRfFPbOhBa7k"></script>
<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>

Expand All @@ -33,29 +44,27 @@
<small><strong>Field that may be presented to customer:</strong></small>
<p>
<label>Card Number</label>
<input class="card-number" value="4811 1111 1111 1114" size="23" type="text" autocomplete="off" />
<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" value="12" placeholder="MM" size="2" type="text" />
<input class="card-expiry-month" name="card-expiry-month" value="12" placeholder="MM" size="2" type="text" />
<span> / </span>
<input class="card-expiry-year" value="2020" placeholder="YYYY" size="4" type="text" />
<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" value="123" size="4" type="password" autocomplete="off" />
<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" name="save_cc" value="true">
<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" name="secure" value="true" checked>
<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>
Expand Down Expand Up @@ -84,35 +93,24 @@
<!-- Javascript for token generation -->
<script type="text/javascript">
$(function () {
// Sandbox URL
MidtransNew3ds.url = "https://api.sandbox.midtrans.com/v2/token";
// TODO: Change with your client key.
MidtransNew3ds.clientKey = "<?php echo Config::$clientKey ?>";

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(),
"secure": $('[name=secure]')[0].checked,
// "bank": "bni", // optional acquiring bank
"gross_amount": 200000
};
// 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('sukses');
console.log('success');
console.log('response:',response);
closeDialog();
// Submit form
$("#token_id").val(response.token_id);
$("#payment-form").submit();
},
onFailure: function(response){
console.log('gagal');
console.log('fail');
console.log('response:',response);
closeDialog();
alert(response.status_message);
Expand All @@ -125,21 +123,6 @@
}
};

// callback functions
var callback = {
onSuccess: function(response){
// Success to get card token_id, implement as you wish here
console.log('Success to get card token_id, response:', response);
MidtransNew3ds.authenticate(response.redirect_url, options);
},
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");
}
};

function openDialog(url) {
$.featherlight({
iframe: url,
Expand All @@ -157,12 +140,60 @@ function closeDialog() {
}

$(".submit-button").click(function (event) {
console.log("SUBMIT");
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");
MidtransNew3ds.getCardToken(card, callback);

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>
Expand Down
31 changes: 28 additions & 3 deletions examples/core-api/tokenization-process.php
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
<?php
// This is just for very basic implementation reference, in production, you should validate the incoming requests and implement your backend more securely.

namespace Midtrans;

require_once dirname(__FILE__) . '/../../Midtrans.php';
//Set Your server key
Config::$serverKey = "<your server key>";
// Set Your server key
// can find in Merchant Portal -> Settings -> Access keys
Config::$serverKey = '<your server key>';

// non-relevant function only used for demo/example purpose
printExampleWarningMessage();

// define variables and set to empty values
$number = "";
Expand All @@ -21,7 +27,26 @@
)
);

$response = CoreApi::linkPaymentAccount($params);
$response = '';
try {
$response = CoreApi::linkPaymentAccount($params);
} catch (\Exception $e) {
echo $e->getMessage();
die();
}

function printExampleWarningMessage() {
if (strpos(Config::$serverKey, 'your ') != false ) {
echo "<code>";
echo "<h4>Please set your server key from sandbox</h4>";
echo "In file: " . __FILE__;
echo "<br>";
echo "<br>";
echo htmlspecialchars('Config::$serverKey = \'<your server key>\';');
die();
}
}

?>

<!DOCTYPE HTML>
Expand Down
Loading

0 comments on commit 4929d87

Please sign in to comment.