diff --git a/paymentrequest/index.d.ts b/paymentrequest/index.d.ts
index d3a362d401..50ef94e1e6 100644
--- a/paymentrequest/index.d.ts
+++ b/paymentrequest/index.d.ts
@@ -27,7 +27,7 @@ interface PaymentDetails {
total: PaymentItem;
displayItems?: PaymentItem[];
shippingOptions?: PaymentShippingOption[];
- modifiers: PaymentDetailsModifier[];
+ modifiers?: PaymentDetailsModifier[];
}
interface PaymentDetailsModifier {
diff --git a/paymentrequest/tests.ts b/paymentrequest/tests.ts
new file mode 100644
index 0000000000..db74be2a21
--- /dev/null
+++ b/paymentrequest/tests.ts
@@ -0,0 +1,106 @@
+///
+///
+
+function makeRequest() {
+ if (!window.PaymentRequest) {
+ return Promise.reject(new Error("PaymentRequest not available"))
+ }
+
+ const methodData = [
+ {
+ supportedMethods: ["visa", "mastercard"]
+ }
+ ]
+
+ const details = {
+ displayItems: [
+ {
+ label: "Original donation amount",
+ amount: { currency: "USD", value : "65.00" }, // US$65.00
+ },
+ {
+ label: "Friends and family discount",
+ amount: { currency: "USD", value : "-10.00" }, // -US$10.00
+ }
+ ],
+ total: {
+ label: "Total",
+ amount: { currency: "USD", value : "55.00" }, // US$55.00
+ }
+ }
+
+ const options = {
+ requestShipping: true,
+ requestPayerEmail: true,
+ requestPayerPhone: true
+ }
+
+ const request = new window.PaymentRequest(methodData, details, options)
+ request.addEventListener("shippingaddresschange", onShippingAddressChange)
+
+ return request.show()
+}
+
+async function processPayment() {
+ try {
+ const paymentResponse = await makeRequest()
+ } catch (error) {
+ location.href = '/checkout';
+ return;
+ }
+
+ var paymentData = {
+ // payment method string
+ method: paymentResponse.methodName,
+ // payment details as you requested
+ details: paymentResponse.details,
+ // shipping address information
+ address: toDict(paymentResponse.shippingAddress),
+ // shipping option
+ shippingOption: paymentResponse.shippingOption
+ }
+
+ // make call to backend to process payment data
+ const ok = await Promise.resolve(true)
+
+ if (ok) {
+ paymentResponse.complete("success")
+ } else {
+ paymentResponse.complete("fail")
+ }
+}
+
+function onShippingAddressChange(e) {
+ e.updateWith(((details, addr) => {
+ if (addr.country === 'US') {
+ var shippingOption = {
+ id: '',
+ label: '',
+ amount: {currency: 'USD', value: '0.00'},
+ selected: true
+ };
+ if (addr.region === 'US') {
+ shippingOption.id = 'us';
+ shippingOption.label = 'Standard shipping in US';
+ shippingOption.amount.value = '0.00';
+ details.total.amount.value = '55.00';
+ } else {
+ shippingOption.id = 'others';
+ shippingOption.label = 'International shipping';
+ shippingOption.amount.value = '10.00';
+ details.total.amount.value = '65.00';
+ }
+ if (details.displayItems.length === 2) {
+ details.displayItems.splice(1, 0, shippingOption);
+ } else {
+ details.displayItems.splice(1, 1, shippingOption);
+ }
+ details.shippingOptions = [shippingOption];
+ } else {
+ details.shippingOptions = [];
+ }
+ return Promise.resolve(details);
+ })(details, request.shippingAddress));
+}
+
+document.querySelector("#pay").addEventListener("click", processPayment)
diff --git a/paymentrequest/tsconfig.json b/paymentrequest/tsconfig.json
index 79b9eb6b27..55cf6b6d36 100644
--- a/paymentrequest/tsconfig.json
+++ b/paymentrequest/tsconfig.json
@@ -13,6 +13,7 @@
"forceConsistentCasingInFileNames": true
},
"files": [
- "index.d.ts"
+ "index.d.ts",
+ "tests.ts"
]
-}
\ No newline at end of file
+}