Your IP : 216.73.216.43
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.1.js" crossorigin="anonymous"></script>
<script src="https://js.stripe.com/v3/"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style type="text/css">
textarea {
width: 600px;
height: 200px;
}
input[type="text"] {
width: 400px;
}
button {
margin-top: 1em;
}
#card-element {
margin: 20px 0 0 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 500px;
}
</style>
</head>
<body id="app" class="container">
<h1>3D Secure example for guest customers</h1>
<p class="alert alert-warning" role="alert">NOTE: Place this file inside your Magento pub/ directory to avoid CORS restrictions.</p>
<h2 class="mt-4">Configuration</h2>
<div class="col-md-6 mb-3">
<label for="base_url">Base Magento URL</label>
<input class="form-control" type="text" id="base_url" name="base_url" value="" onchange="save('base_url')">
</div>
<div class="col-md-6 mb-3">
<label>Product SKU to purchase</label>
<input class="form-control" type="text" id="sku" value="24-MB02" onchange="save('sku')">
</div>
<div class="col-md-6 mb-3">
<label>Stripe Publishable API Key</label>
<input class="form-control" type="text" id="pk" value="pk_test_xyz" onchange="save('pk'), initPaymentElement()">
</div>
<div class="col-md-6 mb-3">
<label>Admin Username</label>
<input class="form-control" type="text" id="admin_username" value="admin" onchange="save('admin_username')">
</div>
<div class="col-md-6 mb-3">
<label>Admin Password</label>
<input class="form-control" type="text" id="admin_password" value="admin123" onchange="save('admin_password')">
</div>
<h2 class="mt-4">Step 1: Create a guest cart</h2>
<button onclick="createGuestCart()" class="btn btn-primary">Create</button>
<pre id="create_guest_cart_response" class="alert alert-light"></pre>
<h2 class="mt-4">Step 2: Add product to cart</h2>
<textarea class="form-control" id="add_product_data">{ "cartItem": { "quote_id": "CART_ID", "sku": "SIMPLE_PRODUCT_SKU", "qty": 1 } }</textarea>
<button onclick="addProductToCart()" class="btn btn-primary">POST</button>
<pre id="add_product_response" class="alert alert-light"></pre>
<h2 class="mt-4">Step 3: Set shipping information</h2>
<textarea class="form-control" id="set_shipping_data">
{
"addressInformation": {
"shippingAddress": {
"firstname": "John",
"lastname": "Doe",
"company": "Company Name",
"street": ["3320 N Crescent Dr", "Beverly Hills"],
"city": "Los Angeles",
"region": "CA",
"region_id": 12,
"postcode": "90210",
"country_id": "US",
"telephone": "123-456-0000",
"save_in_address_book": 0
},
"shipping_method_code": "flatrate",
"shipping_carrier_code": "flatrate"
}
}
</textarea>
<button onclick="setShippingInformation()" class="btn btn-primary">POST</button>
<pre id="set_shipping_response" class="alert alert-light"></pre>
<h2 class="mt-4">Step 4: Collect a payment method</h2>
<div id="payment-element">
<!-- Elements will create input elements here -->
</div>
<button onclick="createPaymentMethod()" class="btn btn-primary">Create Payment Method</button>
<pre id="create_payment_method_response" class="alert alert-light"></pre>
<h2 class="mt-4">Step 5: Set payment information</h2>
<textarea class="form-control" id="set_payment_data">
{
"paymentMethod": {
"method": "stripe_payments",
"additional_data": {
"payment_element": 1,
"payment_method": "PAYMENT_METHOD_ID"
}
},
"billing_address": {
"firstname": "John",
"lastname": "Doe",
"company": "Company Name",
"street": ["3320 N Crescent Dr", "Beverly Hills"],
"city": "Los Angeles",
"region": "CA",
"region_id": 12,
"postcode": "90210",
"country_id": "US",
"telephone": "123-456-0000",
"save_in_address_book": 0
},
"email": "guest@example.com"
}
</textarea>
<button onclick="setPaymentInformation()" class="btn btn-primary">POST</button>
<pre id="set_payment_response" class="alert alert-light"></pre>
<h2 class="mt-4">Step 6: Create Admin Token</h2>
<textarea class="form-control" id="admin_token_data">
{"username": "ADMIN_USERNAME", "password": "ADMIN_PASSWORD"}
</textarea>
<button onclick="createAdminToken()" class="btn btn-primary">POST</button>
<pre id="admin_token_response" class="alert alert-light"></pre>
<h2 class="mt-4">Place order</h2>
<button onclick="placeOrder()" class="btn btn-primary">PUT</button>
<pre id="place_order_response" class="alert alert-light"></pre>
<br>
<br>
<br>
<script>
var customerToken = null;
var cartId = null;
var clientSecret = null;
var stripe = null;
var elements = null;
var paymentElement = null;
var paymentMethod = null;
var adminToken = null;
var adminUsername = null;
var adminPassword = null;
var $ = jQuery;
if (localStorage.getItem("base_url"))
{
$("#base_url").val(localStorage.getItem("base_url"));
}
else
{
$("#base_url").val(window.location.protocol + "//" + window.location.hostname);
}
if (localStorage.getItem("sku"))
{
$("#sku").val(localStorage.getItem("sku").toString());
}
if (localStorage.getItem("pk"))
{
$("#pk").val(localStorage.getItem("pk"));
}
if (localStorage.getItem("admin_username"))
{
$("#admin_username").val(localStorage.getItem("admin_username"));
}
if (localStorage.getItem("admin_password"))
{
$("#admin_password").val(localStorage.getItem("admin_password"));
}
var initStripe = function()
{
stripe = Stripe($("#pk").val(), {
betas: ['elements_enable_deferred_intent_beta_1']
});
};
var initPaymentElement = function()
{
initStripe();
var options = {
mode: 'payment',
amount: 1099,
currency: 'eur',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout form
elements = stripe.elements(options);
// Create and mount the Payment Element
paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');
};
var createPaymentMethod = function () {
stripe.createPaymentMethod({
elements: elements,
params: {
billing_details: {
name: 'Jenny Rosen'
}
}
}).then(function(result)
{
$( "#create_payment_method_response" ).html( JSON.stringify(result, null, 2) );
if (result && result.paymentMethod)
{
paymentMethod = result.paymentMethod.id;
}
});
}
try
{
initPaymentElement();
}
catch (e)
{
console.warn(e);
}
var post = function(step, restUrl, onSuccess)
{
var endpoint = $("#base_url").val() + restUrl;
var sku = $("#sku").val();
switch (step) {
case 'create_guest_cart':
case 'place_order':
var data = JSON.stringify({});
break;
case 'get_order':
var data = ''
break;
default:
var data = $("#" + step + "_data").val()
.replace("CART_ID", cartId)
.replace("SIMPLE_PRODUCT_SKU", sku)
.replace("PAYMENT_METHOD_ID", paymentMethod)
.replace("ADMIN_USERNAME", adminUsername)
.replace("ADMIN_PASSWORD", adminPassword);
break;
}
if (step === 'place_order') {
var type = "PUT";
} else if (step === 'get_order'){
var type = "GET";
} else {
var type = "POST";
}
$( "#" + step + "_response" ).html("");
$.ajax({
url: endpoint,
type: type,
data: data,
contentType:"application/json; charset=utf-8",
dataType:"json",
beforeSend: function (xhr)
{
if (adminToken)
{
xhr.setRequestHeader('Authorization', 'Bearer ' + adminToken);
}
},
success: function(response)
{
$( "#" + step + "_response" ).html( JSON.stringify(response, null, 2) );
if (typeof onSuccess != "undefined")
{
onSuccess(response);
}
},
error: function (response) {
$( "#" + step + "_response" ).html( JSON.stringify(response, null, 2) );
if (typeof onSuccess != "undefined")
{
onSuccess(response);
}
}
});
};
var createGuestCart = function()
{
post("create_guest_cart", '/rest/V1/guest-carts/', function(response)
{
cartId = response;
});
};
var addProductToCart = function()
{
post("add_product", '/rest/V1/guest-carts/'+cartId+'/items');
};
var setShippingInformation = function () {
post("set_shipping", '/rest/V1/guest-carts/'+cartId+'/shipping-information');
}
var setPaymentInformation = function () {
post("set_payment", '/rest/V1/guest-carts/'+cartId+'/set-payment-information');
}
var createAdminToken = function () {
adminUsername = $("#admin_username").val();
adminPassword = $("#admin_password").val();
post('admin_token', '/rest/V1/integration/admin/token', function (response) {
adminToken = response;
});
}
var placeOrder = function()
{
post("place_order", '/rest/V1/guest-carts/'+cartId+'/order', function(response)
{
post('get_order', '/rest/V1/orders/'+response, function (response) {
var paymentClientSecret = null;
var isTransactionPending = null;
if (response && response.extension_attributes && response.extension_attributes.payment_additional_info) {
for(var i=0; i < response.extension_attributes.payment_additional_info.length; i++)
{
if (response.extension_attributes.payment_additional_info[i].key === "is_transaction_pending") {
isTransactionPending = response.extension_attributes.payment_additional_info[i].value;
}
if (response.extension_attributes.payment_additional_info[i].key === "client_secret") {
paymentClientSecret = response.extension_attributes.payment_additional_info[i].value;
}
}
}
if ((isTransactionPending == "true") && paymentClientSecret)
{
stripe.retrievePaymentIntent(paymentClientSecret).then(function(result)
{
if (result.error)
{
alert(JSON.stringify(result,null,2));
}
else if (result.paymentIntent)
{
if (result.paymentIntent.status == "requires_action")
{
stripe.handleNextAction({
clientSecret: paymentClientSecret
}).then(function(result)
{
if (result && result.paymentIntent)
{
if (isSuccessful(result.paymentIntent))
{
$("#place_order_response").text("Success, you can redirect the customer to the order success page.");
}
else
{
$("#place_order_response").text("Payment failed, the PaymentIntent has a status of " + result.paymentIntent.status);
}
}
else
{
$("#place_order_response").text(JSON.stringify(result, null, 2));
}
});
}
else if (isSuccessful(result.paymentIntent))
{
$("#place_order_response").text("Success, you can redirect the customer to the order success page.");
}
else
{
$("#place_order_response").text("Unhandled PaymentIntent status " + result.paymentIntent.status);
}
}
else
{
// API call crashed
$("#place_order_response").text(JSON.stringify(result,null,2));
}
});
}
});
});
}
var isSuccessful = function(paymentIntent)
{
if (paymentIntent.status == "succeeded")
{
// The payment was captured automatically
return true;
}
if (paymentIntent.status == "requires_capture")
{
// The authorization succeeded and the payment needs to be captured manually
return true;
}
return false;
};
var save = function(key)
{
var value = $("#" + key).val();
localStorage.setItem(key, value);
}
</script>
</body>