Follow Payment Request spec updates

paymentrequest/index.d.ts

@@ -1,26 +1,33 @@
 // Type definitions for PaymentRequest
 // Project: https://www.w3.org/TR/payment-request/
-// Definitions by: Adam Cmiel <https://github.com/adamcmiel>
+// Definitions by: Adam Cmiel <https://github.com/adamcmiel>, Eiji Kitamura <https://github.com/agektmr>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
 interface PaymentRequest extends EventTarget {
     new (methodData: PaymentMethodData[], details: PaymentDetails, options?: PaymentOptions): PaymentRequest;
     show(): PromiseLike<PaymentResponse>;
     abort(): PromiseLike<void>;
-    shippingAddress?: PaymentAddress;
-    shippingOption?: string;
+    canMakePayment(): Promise<boolean>;
+    readonly paymentRequestID: string;
+    readonly shippingAddress?: PaymentAddress;
+    readonly shippingOption?: string;
+    readonly shippingType?: string;
     onshippingaddresschange: PaymentUpdateEventListener;
     onshippingoptionchange: PaymentUpdateEventListener;
 }
 
 interface PaymentMethodData {
     supportedMethods: string[];
-    data?: Object;
+    data?: {
+        supportedNetworks: string[];
+        supportedTypes: string[];
+    };
 }
 
 interface PaymentCurrencyAmount {
     currency: string;
     value: string;
+    currencySystem?:string;
 }
 
 interface PaymentDetails {
@@ -28,55 +35,63 @@ interface PaymentDetails {
     displayItems?: PaymentItem[];
     shippingOptions?: PaymentShippingOption[];
     modifiers?: PaymentDetailsModifier[];
+    error?: string;
 }
 
 interface PaymentDetailsModifier {
     supportedMethods: string[];
     total?: PaymentItem;
-    additionalDisplayItems: PaymentItem[];
+    additionalDisplayItems?: PaymentItem[];
+    data?: Object;
 }
 
 interface PaymentOptions {
-    requestShipping: boolean;
-    requestPayerEmail: boolean;
-    requestPayerPhone: boolean;
+    requestShipping?: boolean;
+    requestPayerEmail?: boolean;
+    requestPayerPhone?: boolean;
+    requestPayerName?: boolean;
+    shippingType?: 'shipping' | 'delivery' | 'pickup';
 }
 
 interface PaymentItem {
     label: string;
-    amount: PaymentCurrencyAmount
+    amount: PaymentCurrencyAmount;
+    pending?: boolean;
 }
 
 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;
+    readonly country: string;
+    readonly addressLine: string[];
+    readonly region: string;
+    readonly city: string;
+    readonly dependentLocality: string;
+    readonly postalCode: string;
+    readonly sortingCode: string;
+    readonly languageCode: string;
+    readonly organization: string;
+    readonly recipient: string;
+    readonly phone: string;
 }
 
 interface PaymentShippingOption {
     id: string;
     label: string;
     amount: PaymentCurrencyAmount;
+    selected?: boolean;
 }
 
 interface PaymentResponse {
-    methodName: string;
-    details: Object;
-    shippingAddress?: PaymentAddress;
-    shippingOption?: string;
-    payerEmail?: string;
-    payerPhone?: string;
+    readonly paymentRequestID: string;
+    readonly methodName: string;
+    readonly details: Object;
+    readonly shippingAddress?: PaymentAddress;
+    readonly shippingOption?: string;
+    readonly payerEmail?: string;
+    readonly payerPhone?: string;
+    readonly payerName?: string;
 
     complete(result?: '' | 'success' | 'fail'): PromiseLike<void>;
+    toJSON(): Object;
 }
 
 interface PaymentUpdateEventListener extends EventListener {

paymentrequest/paymentrequest-tests.ts

@@ -3,7 +3,7 @@
 /// Code examples derived from
 /// https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/
 
-function makeRequest() {
+async function makeRequest() {
     if (!window.PaymentRequest) {
         return Promise.reject(new Error("PaymentRequest not available"))
     }
@@ -31,10 +31,12 @@ function makeRequest() {
         }
     }
 
-    const options = {
+    const options: PaymentOptions = {
         requestShipping: true,
         requestPayerEmail: true,
-        requestPayerPhone: true
+        requestPayerPhone: true,
+        requestPayerName: true,
+        shippingType: 'delivery'
     }
 
     const request = new window.PaymentRequest(methodData, details, options)
@@ -72,7 +74,12 @@ function makeRequest() {
 		})(details, request.shippingAddress));
 	})
 
-    return request.show()
+    let canMakePayment = await request.canMakePayment()
+    if (canMakePayment) {
+        return request.show()
+    } else {
+        throw 'can not make payment on this environment.'
+    }
 }
 
 async function processPayment(): Promise<PaymentResponse> {