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'), initCardElement()">
</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: Create payment method</h2>
<div id="card-element">
<!-- Elements will create input elements here -->
</div>
<button onclick="createPaymentMethod()" class="btn btn-primary">Create Payment Method</button>
<pre id="initialize_card_element_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": {
"cc_stripejs_token": "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">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 card = null;
var payment_method_id = 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"));
}
var getStripeCardElementStyle = function () {
return {
base: {
fontFamily: '"Open Sans","Helvetica Neue", Helvetica, Arial, sans-serif',
fontSize: '16px',
},
};
}
var initCardElement = function () {
stripe = Stripe($("#pk").val());
var options = {
hidePostalCode: true,
style: getStripeCardElementStyle()
};
const elements = stripe.elements();
card = elements.create('card', options);
card.mount('#card-element');
}
initCardElement();
var createPaymentMethod = function () {
var options = {
type: 'card',
card: card,
billing_details: {
name: 'John Doe'
},
};
stripe.createPaymentMethod(options).then(function(result)
{
if (result.error) {
$("#initialize_card_element_response").html(result.error.message);
} else {
$("#initialize_card_element_response").html(JSON.stringify(result, null, 2));
payment_method_id = result.paymentMethod.id;
}
});
}
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;
default:
var data = $("#" + step + "_data").val().replace("CART_ID", cartId).replace("SIMPLE_PRODUCT_SKU", sku).replace("PAYMENT_METHOD_ID", payment_method_id);
break;
}
if (step === 'place_order') {
var type = "PUT";
} else {
var type = "POST"
}
$( "#" + step + "_response" ).html("");
$.ajax({
url: endpoint,
type: type,
data: data,
contentType:"application/json; charset=utf-8",
dataType:"json",
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 placeOrder = function()
{
post("place_order", '/rest/V1/guest-carts/'+cartId+'/order', function(response)
{
if (response.responseJSON)
{
var message = response.responseJSON.message;
if (message && message.indexOf("Authentication Required: ") === 0)
{
clientSecret = message.substring("Authentication Required: ".length);
authenticate(clientSecret);
}
}
});
}
var authenticate = function(pi_client_secret)
{
stripe.retrievePaymentIntent(pi_client_secret).then(function(result)
{
if (result.error)
alert(result.error.message);
else if (result.paymentIntent.confirmation_method == "manual")
return handleCardAction(pi_client_secret, placeAuthenticatedOrder);
else
return handleCardPayment(pi_client_secret, placeAuthenticatedOrder);
});
};
var handleCardPayment = function(pi_client_secret, done)
{
try
{
stripe.handleCardPayment(pi_client_secret).then(function(result)
{
if (result.error)
return done(result.error.message);
return done();
});
}
catch (e)
{
done(e.message);
}
};
var handleCardAction = function(pi_client_secret, done)
{
try
{
stripe.handleCardAction(pi_client_secret).then(function(result)
{
if (result.error)
return done(result.error.message);
return done();
});
}
catch (e)
{
done(e.message);
}
};
var placeAuthenticatedOrder = function(error)
{
if (typeof error != "undefined")
{
alert("Authentication failed: " + error);
}
else
{
alert("Authentication succeeded. Try placing the order again.");
}
};
var save = function(key)
{
var value = $("#" + key).val();
localStorage.setItem(key, value);
}
</script>
</body>