136 lines
5.4 KiB
HTML
136 lines
5.4 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
<!DOCTYPE html [
|
|
<!ENTITY viewAllItems "View All Items">
|
|
<!ENTITY paymentSummaryTitle "Your Payment">
|
|
<!ENTITY shippingAddressLabel "Shipping Address">
|
|
<!ENTITY deliveryAddressLabel "Delivery Address">
|
|
<!ENTITY pickupAddressLabel "Pickup Address">
|
|
<!ENTITY shippingOptionsLabel "Shipping Options">
|
|
<!ENTITY paymentMethodsLabel "Payment Method">
|
|
<!ENTITY payerLabel "Contact Information">
|
|
<!ENTITY cancelPaymentButton.label "Cancel">
|
|
<!ENTITY approvePaymentButton.label "Pay">
|
|
<!ENTITY processingPaymentButton.label "Processing">
|
|
<!ENTITY successPaymentButton.label "Done">
|
|
<!ENTITY failPaymentButton.label "Fail">
|
|
<!ENTITY unknownPaymentButton.label "Unknown">
|
|
<!ENTITY orderDetailsLabel "Order Details">
|
|
<!ENTITY orderTotalLabel "Total">
|
|
]>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"/>
|
|
<title></title>
|
|
<link rel="stylesheet" href="paymentRequest.css"/>
|
|
<link rel="stylesheet" href="components/rich-select.css"/>
|
|
<link rel="stylesheet" href="components/address-option.css"/>
|
|
<link rel="stylesheet" href="components/basic-card-option.css"/>
|
|
<link rel="stylesheet" href="components/shipping-option.css"/>
|
|
<link rel="stylesheet" href="components/payment-details-item.css"/>
|
|
<link rel="stylesheet" href="containers/order-details.css"/>
|
|
|
|
<script src="vendor/custom-elements.min.js"></script>
|
|
|
|
<script src="log.js"></script>
|
|
|
|
<script src="PaymentsStore.js"></script>
|
|
|
|
<script src="mixins/ObservedPropertiesMixin.js"></script>
|
|
<script src="mixins/PaymentStateSubscriberMixin.js"></script>
|
|
|
|
<script src="components/currency-amount.js"></script>
|
|
<script src="containers/order-details.js"></script>
|
|
<script src="components/payment-details-item.js"></script>
|
|
<script src="components/rich-select.js"></script>
|
|
<script src="components/rich-option.js"></script>
|
|
<script src="components/address-option.js"></script>
|
|
<script src="components/shipping-option.js"></script>
|
|
<script src="containers/address-picker.js"></script>
|
|
<script src="components/basic-card-option.js"></script>
|
|
<script src="containers/shipping-option-picker.js"></script>
|
|
<script src="containers/payment-method-picker.js"></script>
|
|
<script src="containers/payment-dialog.js"></script>
|
|
|
|
<script src="paymentRequest.js"></script>
|
|
|
|
<template id="payment-dialog-template">
|
|
<header>
|
|
<div id="total">
|
|
<h2 class="label"></h2>
|
|
<currency-amount></currency-amount>
|
|
<div id="host-name"></div>
|
|
</div>
|
|
<div id="top-buttons" >
|
|
<button id="view-all" class="closed">&viewAllItems;</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="main-container">
|
|
<section id="payment-summary">
|
|
<h1>&paymentSummaryTitle;</h1>
|
|
|
|
<section>
|
|
<div id="error-text"></div>
|
|
|
|
<div class="shipping-related"
|
|
id="shipping-type-label"
|
|
data-shipping-address-label="&shippingAddressLabel;"
|
|
data-delivery-address-label="&deliveryAddressLabel;"
|
|
data-pickup-address-label="&pickupAddressLabel;"><label></label></div>
|
|
<address-picker class="shipping-related" selected-state-key="selectedShippingAddress"></address-picker>
|
|
|
|
<div class="shipping-related"><label>&shippingOptionsLabel;</label></div>
|
|
<shipping-option-picker class="shipping-related"></shipping-option-picker>
|
|
|
|
<div><label>&paymentMethodsLabel;</label></div>
|
|
<payment-method-picker selected-state-key="selectedPaymentCard"></payment-method-picker>
|
|
|
|
<div class="payer-related"><label>&payerLabel;</label></div>
|
|
<address-picker class="payer-related"
|
|
selected-state-key="selectedPayerAddress"></address-picker>
|
|
<div id="error-text"></div>
|
|
</section>
|
|
|
|
<footer id="controls-container">
|
|
<button id="cancel">&cancelPaymentButton.label;</button>
|
|
<button id="pay"
|
|
data-initial-label="&approvePaymentButton.label;"
|
|
data-processing-label="&processingPaymentButton.label;"
|
|
data-fail-label="&failPaymentButton.label;"
|
|
data-unknown-label="&unknownPaymentButton.label;"
|
|
data-success-label="&successPaymentButton.label;"></button>
|
|
</footer>
|
|
</section>
|
|
<section id="order-details-overlay" hidden="hidden">
|
|
<h1>&orderDetailsLabel;</h1>
|
|
<order-details></order-details>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="disabled-overlay" hidden="hidden">
|
|
<!-- overlay to prevent changes while waiting for a response from the merchant -->
|
|
</div>
|
|
</template>
|
|
|
|
<template id="order-details-template">
|
|
<ul class="main-list"></ul>
|
|
<ul class="footer-items-list"></ul>
|
|
|
|
<div class="details-total">
|
|
<h2 class="label">&orderTotalLabel;</h2>
|
|
<currency-amount></currency-amount>
|
|
</div>
|
|
</template>
|
|
</head>
|
|
<body>
|
|
<iframe id="debugging-console"
|
|
hidden="hidden"
|
|
height="400"
|
|
src="debugging.html"></iframe>
|
|
<payment-dialog></payment-dialog>
|
|
</body>
|
|
</html>
|