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;
}
</style>
</head>
<body id="app" class="container">
<h1>Place an order using the PaymentElement</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>
<h2 class="mt-4">Step 1: Create a guest cart</h2>
<textarea class="form-control" id="create_guest_cart_data">
mutation {
createEmptyCart
}
</textarea>
<button onclick="createGuestCart()" class="btn btn-primary">POST</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">
mutation {
addSimpleProductsToCart(
input: {
cart_id: "CART_ID"
cart_items: [
{
data: {
quantity: 1
sku: "SIMPLE_PRODUCT_SKU"
}
}
]
}
) {
cart {
items {
id
product {
sku
stock_status
}
quantity
}
}
}
}
</textarea>
<button onclick="post('add_product')" class="btn btn-primary">POST</button>
<pre id="add_product_response" class="alert alert-light"></pre>
<h2 class="mt-4">Step 3: Set guest email address</h2>
<textarea class="form-control" id="set_guest_email_data">
mutation {
setGuestEmailOnCart(input: {
cart_id: "CART_ID"
email: "guest@example.com"
}) {
cart {
email
}
}
}
</textarea>
<button onclick="post('set_guest_email')" class="btn btn-primary">POST</button>
<pre id="set_guest_email_response" class="alert alert-light"></pre>
<h2 class="mt-4">Step 4: Set shipping address</h2>
<textarea class="form-control" id="set_shipping_data">
mutation {
setShippingAddressesOnCart(
input: {
cart_id: "CART_ID"
shipping_addresses: [
{
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_code: "US"
telephone: "123-456-0000"
save_in_address_book: false
}
}
]
}
) {
cart {
shipping_addresses {
firstname
lastname
company
street
city
region {
code
label
}
postcode
telephone
country {
code
label
}
available_shipping_methods{
carrier_code
carrier_title
method_code
method_title
}
}
}
}
}
</textarea>
<button onclick="post('set_shipping')" class="btn btn-primary">POST</button>
<pre id="set_shipping_response" class="alert alert-light"></pre>
<h2 class="mt-4">Step 5: Set billing address</h2>
<textarea class="form-control" id="set_billing_data">
mutation {
setBillingAddressOnCart(
input: {
cart_id: "CART_ID"
billing_address: {
address: {
firstname: "John"
lastname: "Doe"
company: "Company Name"
street: ["64 Strawberry Dr", "Beverly Hills"]
city: "Los Angeles"
region: "CA"
region_id: 12
postcode: "90210"
country_code: "US"
telephone: "123-456-0000"
save_in_address_book: true
}
}
}
) {
cart {
billing_address {
firstname
lastname
company
street
city
region{
code
label
}
postcode
telephone
country {
code
label
}
}
}
}
}
</textarea>
<button onclick="post('set_billing')" class="btn btn-primary">POST</button>
<pre id="set_billing_response" class="alert alert-light"></pre>
<h2 class="mt-4">Step 6: Set shipping method</h2>
<textarea class="form-control" id="set_shipping_method_data">
mutation {
setShippingMethodsOnCart(input: {
cart_id: "CART_ID"
shipping_methods: [
{
carrier_code: "flatrate"
method_code: "flatrate"
}
]
}) {
cart {
shipping_addresses {
selected_shipping_method {
carrier_code
method_code
carrier_title
method_title
}
}
}
}
}
</textarea>
<button onclick="post('set_shipping_method')" class="btn btn-primary">POST</button>
<pre id="set_shipping_method_response" class="alert alert-light"></pre>
<h2 class="mt-4">Step 7: Collect a payment method</h2>
<div id="payment-element">
<!-- Elements will create form elements here -->
</div>
<button onclick="createPaymentMethod()" class="btn btn-primary">Create</button>
<pre id="create_payment_method_response" class="alert alert-light"></pre>
<h2 class="mt-4">Step 8: Set the payment method</h2>
<textarea class="form-control" id="set_payment_method_data">
mutation {
setPaymentMethodOnCart(input: {
cart_id: "CART_ID"
payment_method: {
code: "stripe_payments"
stripe_payments: {
payment_element: true
payment_method: "PAYMENT_METHOD_ID"
save_payment_method: true
}
}
}) {
cart {
selected_payment_method {
code
}
}
}
}
</textarea>
<button onclick="post('set_payment_method')" class="btn btn-primary">POST</button>
<pre id="set_payment_method_response" class="alert alert-light"></pre>
<h2 class="mt-4">Place order</h2>
<textarea class="form-control" id="place_order_data">
mutation {
placeOrder(input: {cart_id: "CART_ID"}) {
order {
order_number
client_secret
}
}
}
</textarea>
<button onclick="placeOrder()" class="btn btn-primary">POST</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 $ = jQuery;
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');
};
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"));
}
try
{
initPaymentElement();
}
catch (e)
{
console.warn(e);
}
var getPaymentMethodId = function()
{
if (paymentMethod && paymentMethod.id)
{
return paymentMethod.id;
}
else
{
return "pm_card_visa";
}
};
var post = function(step, onSuccess)
{
var endpoint = $("#base_url").val() + '/graphql';
var sku = $("#sku").val();
var query = $("#" + step + "_data").val()
.replace("CART_ID", cartId)
.replace("SIMPLE_PRODUCT_SKU", sku)
.replace("PAYMENT_METHOD_ID", getPaymentMethodId());
var data = JSON.stringify({ query: query });
$( "#" + step + "_response" ).html("");
$.ajax({
url: endpoint,
type: "POST",
data: data,
contentType:"application/json; charset=utf-8",
dataType:"json",
beforeSend: function (xhr)
{
if (customerToken)
{
xhr.setRequestHeader('Authorization', 'Bearer ' + customerToken);
}
},
success: function(response)
{
$( "#" + step + "_response" ).html( JSON.stringify(response, null, 2) );
if (typeof onSuccess != "undefined")
{
onSuccess(response);
}
}
});
};
var createGuestCart = function()
{
post("create_guest_cart", function(response)
{
cartId = response.data.createEmptyCart;
});
};
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 placeOrder = function()
{
post("place_order", function(response)
{
if (response && response.data && response.data.placeOrder && response.data.placeOrder.order && response.data.placeOrder.order.client_secret)
{
stripe.retrievePaymentIntent(response.data.placeOrder.order.client_secret).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: response.data.placeOrder.order.client_secret
}).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 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;
}
});
};
var save = function(key)
{
var value = $("#" + key).val();
localStorage.setItem(key, value);
}
</script>
</body>