From bf439e4134b457efdd1cf3aefd2b473a37b61c94 Mon Sep 17 00:00:00 2001 From: Adam Cmiel Date: Wed, 2 Nov 2016 16:49:57 -0700 Subject: [PATCH 1/9] [REPO] inital commit for paymentrequest --- paymentrequest/index.d.ts | 0 paymentrequest/tsconfig.json | 18 ++++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 paymentrequest/index.d.ts create mode 100644 paymentrequest/tsconfig.json diff --git a/paymentrequest/index.d.ts b/paymentrequest/index.d.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/paymentrequest/tsconfig.json b/paymentrequest/tsconfig.json new file mode 100644 index 0000000000..79b9eb6b27 --- /dev/null +++ b/paymentrequest/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "es6", + "noImplicitAny": true, + "strictNullChecks": false, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts" + ] +} \ No newline at end of file From 406ee078bc562eb708fed9331a1618dbcf349f6d Mon Sep 17 00:00:00 2001 From: Adam Cmiel Date: Wed, 2 Nov 2016 18:46:07 -0700 Subject: [PATCH 2/9] [REPO] add payemnt requets spec --- paymentrequest/index.d.ts | 91 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) diff --git a/paymentrequest/index.d.ts b/paymentrequest/index.d.ts index e69de29bb2..d17dd381a7 100644 --- a/paymentrequest/index.d.ts +++ b/paymentrequest/index.d.ts @@ -0,0 +1,91 @@ +// Type definitions for PaymentRequest +// Project: https://www.w3.org/TR/payment-request/ +// Definitions by: Adam Cmiel +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +interface PaymentRequest extends EventTarget { + new (methodData: PaymentMethodData[], details: PaymentDetails, options?: PaymentOptions); + show(): PromiseLike; + abort(): PromiseLike; + shippingAddress?: PaymentAddress; + shippingOption?: string; + onshippingaddresschange: PaymentUpdateEventListener; + onshippingoptionchange: PaymentUpdateEventListener; +} + +interface PaymentMethodData { + supportedMethods: string[]; + data?: Object; +} + +interface PaymentCurrencyAmount { + currency: string; + value: string; +} + +interface PaymentDetails { + total: PaymentItem; + displayItems?: PaymentItem[]; + shippingOptions?: PaymentShippingOption[]; + modifiers: PaymentDetailsModifier[]; +} + +interface PaymentDetailsModifier { + supportedMethods: string[]; + total?: PaymentItem; + additionalDisplayItems: PaymentItem[]; +} + +interface PaymentOptions { + requestShipping: boolean; + requestPayerEmail: boolean; + requestPayerPhone: boolean; +} + +interface PaymentItem { + label: string; + amount: PaymentCurrencyAmount +} + +interface PaymentAddress { + country: string; + addressLine: string[]; + region: string; + city: string; + dependentLocality: string; + postalCode: string; + sortingCode: string; + languageCode: string; + organization: string; + recipient: string; + careOf: string; + phone: string; +} + +interface PaymentShippingOption { + id: string; + label: string; + amount: PaymentCurrencyAmount; +} + +interface PaymentResponse { + methodName: string; + details: Object; + shippingAddress?: PaymentAddress; + shippingOption?: string; + payerEmail?: string; + payerPhone?: string; + + complete(result?: '' | 'success' | 'fail'): PromiseLike; +} + +interface PaymentUpdateEventListener extends EventListener { + (evt: PaymentRequestUpdateEvent): void; +} + +interface PaymentRequestUpdateEvent extends Event { + updateWith(d: PromiseLike): void; +} + +declare var PaymentRequest: PaymentRequest; + From 3d5ab9b30bb9ab37a5a1b208e1b4eb92576c3ede Mon Sep 17 00:00:00 2001 From: Adam Cmiel Date: Thu, 3 Nov 2016 11:11:25 -0700 Subject: [PATCH 3/9] [FIX] constructor return type --- paymentrequest/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/paymentrequest/index.d.ts b/paymentrequest/index.d.ts index d17dd381a7..a7d831baa7 100644 --- a/paymentrequest/index.d.ts +++ b/paymentrequest/index.d.ts @@ -4,7 +4,7 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped interface PaymentRequest extends EventTarget { - new (methodData: PaymentMethodData[], details: PaymentDetails, options?: PaymentOptions); + new (methodData: PaymentMethodData[], details: PaymentDetails, options?: PaymentOptions): PaymentRequest; show(): PromiseLike; abort(): PromiseLike; shippingAddress?: PaymentAddress; From 6a5a97933b9b717c3bae01952a8e6ffeec4b7fec Mon Sep 17 00:00:00 2001 From: Adam Cmiel Date: Thu, 3 Nov 2016 12:05:08 -0700 Subject: [PATCH 4/9] [FIX] window reference --- paymentrequest/index.d.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/paymentrequest/index.d.ts b/paymentrequest/index.d.ts index a7d831baa7..d3a362d401 100644 --- a/paymentrequest/index.d.ts +++ b/paymentrequest/index.d.ts @@ -87,5 +87,7 @@ interface PaymentRequestUpdateEvent extends Event { updateWith(d: PromiseLike): void; } -declare var PaymentRequest: PaymentRequest; +interface Window { + PaymentRequest?: PaymentRequest; +} From 01024641189aafe8f2532d40f4ec66ea5fc0130d Mon Sep 17 00:00:00 2001 From: Adam Cmiel Date: Fri, 2 Dec 2016 15:16:34 -0800 Subject: [PATCH 5/9] add tests --- paymentrequest/index.d.ts | 2 +- paymentrequest/tests.ts | 106 +++++++++++++++++++++++++++++++++++ paymentrequest/tsconfig.json | 5 +- 3 files changed, 110 insertions(+), 3 deletions(-) create mode 100644 paymentrequest/tests.ts 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 +} From 33c62e0f7f07057cb23c1b503bb3a6577f6e6c7c Mon Sep 17 00:00:00 2001 From: Adam Cmiel Date: Fri, 2 Dec 2016 15:17:43 -0800 Subject: [PATCH 6/9] [FIX] rename tests file --- paymentrequest/{tests.ts => paymentrequest-tests.ts} | 0 paymentrequest/tsconfig.json | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename paymentrequest/{tests.ts => paymentrequest-tests.ts} (100%) diff --git a/paymentrequest/tests.ts b/paymentrequest/paymentrequest-tests.ts similarity index 100% rename from paymentrequest/tests.ts rename to paymentrequest/paymentrequest-tests.ts diff --git a/paymentrequest/tsconfig.json b/paymentrequest/tsconfig.json index 55cf6b6d36..68113a806a 100644 --- a/paymentrequest/tsconfig.json +++ b/paymentrequest/tsconfig.json @@ -14,6 +14,6 @@ }, "files": [ "index.d.ts", - "tests.ts" + "paymentrequest-tests.ts" ] } From b4f72c033b94e2201bcbd6529fdc37eba3cdc25e Mon Sep 17 00:00:00 2001 From: Adam Cmiel Date: Fri, 2 Dec 2016 15:18:47 -0800 Subject: [PATCH 7/9] [REPO] add tests attribution --- paymentrequest/paymentrequest-tests.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/paymentrequest/paymentrequest-tests.ts b/paymentrequest/paymentrequest-tests.ts index db74be2a21..81ead992c1 100644 --- a/paymentrequest/paymentrequest-tests.ts +++ b/paymentrequest/paymentrequest-tests.ts @@ -1,6 +1,9 @@ /// /// +/// Code examples derived from +/// https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/ + function makeRequest() { if (!window.PaymentRequest) { return Promise.reject(new Error("PaymentRequest not available")) From 2cbd5e06eefe8265662217110b0ab68e886316f4 Mon Sep 17 00:00:00 2001 From: Adam Cmiel Date: Fri, 2 Dec 2016 18:16:15 -0800 Subject: [PATCH 8/9] [FIX] tests --- paymentrequest/paymentrequest-tests.ts | 77 +++++++++++++------------- 1 file changed, 40 insertions(+), 37 deletions(-) diff --git a/paymentrequest/paymentrequest-tests.ts b/paymentrequest/paymentrequest-tests.ts index 81ead992c1..4e373c8af1 100644 --- a/paymentrequest/paymentrequest-tests.ts +++ b/paymentrequest/paymentrequest-tests.ts @@ -1,5 +1,5 @@ /// -/// +/// /// Code examples derived from /// https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/ @@ -15,7 +15,7 @@ function makeRequest() { } ] - const details = { + const details: PaymentDetails = { displayItems: [ { label: "Original donation amount", @@ -39,14 +39,47 @@ function makeRequest() { } const request = new window.PaymentRequest(methodData, details, options) - request.addEventListener("shippingaddresschange", onShippingAddressChange) + request.addEventListener("shippingaddresschange", (e: any) => { + 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)); + }) return request.show() } -async function processPayment() { +async function processPayment(): Promise { + let paymentResponse; try { - const paymentResponse = await makeRequest() + paymentResponse = await makeRequest() } catch (error) { location.href = '/checkout'; return; @@ -58,7 +91,7 @@ async function processPayment() { // payment details as you requested details: paymentResponse.details, // shipping address information - address: toDict(paymentResponse.shippingAddress), + address: paymentResponse.shippingAddress, // shipping option shippingOption: paymentResponse.shippingOption } @@ -73,37 +106,7 @@ async function processPayment() { } } -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)); +function onShippingAddressChange(e: any) { } document.querySelector("#pay").addEventListener("click", processPayment) From f328c7c62dda4f989860bddd4d3d92d8aa9a5da8 Mon Sep 17 00:00:00 2001 From: Adam Cmiel Date: Mon, 5 Dec 2016 13:31:49 -0800 Subject: [PATCH 9/9] [FIX] test --- paymentrequest/paymentrequest-tests.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/paymentrequest/paymentrequest-tests.ts b/paymentrequest/paymentrequest-tests.ts index 4e373c8af1..2297d30a71 100644 --- a/paymentrequest/paymentrequest-tests.ts +++ b/paymentrequest/paymentrequest-tests.ts @@ -1,5 +1,4 @@ /// -/// /// Code examples derived from /// https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/