Merge pull request #46 from martincostello/Support-ApplePay-4-5-6

Support Apple Pay JS versions 4-6

README.md

@@ -24,7 +24,7 @@ The key components to look at for the implementation are:
 
 To setup the repository to run the sample, perform the steps below:
 
-  1. Install the [.NET Core 2.2.300 SDK](https://www.microsoft.com/net/download/core), Visual Studio 2019 or Visual Studio Code.
+  1. Install the [.NET Core 2.2.402 SDK](https://www.microsoft.com/net/download/core), Visual Studio 2019 or Visual Studio Code.
   1. Fork this repository.
   1. Clone the repository from your fork to your local machine: ```git clone https://github.com/{username}/ApplePayJSSample.git```
   1. Restore the Bower, npm and NuGet packages.
@@ -46,7 +46,7 @@ You should now be able to perform Apple Pay JS transactions on the deployed appl
 
 ## Local Debugging
 
-You should be able to debug the application in [Visual Studio Code](https://code.visualstudio.com/) or [Visual Studio 2017 (15.3 or later)](https://www.visualstudio.com/downloads/).
+You should be able to debug the application in [Visual Studio Code](https://code.visualstudio.com/) or [Visual Studio 2019](https://www.visualstudio.com/downloads/).
 
 ## Azure App Service Deployment
 

global.json

@@ -1,5 +1,5 @@
 {
   "sdk": {
-    "version": "2.2.401"
+    "version": "2.2.402"
   }
 }

src/ApplePayJS/Clients/MerchantSessionRequest.cs

@@ -7,10 +7,13 @@ public class MerchantSessionRequest
         [JsonProperty("merchantIdentifier")]
         public string MerchantIdentifier { get; set; }
 
-        [JsonProperty("domainName")]
-        public string DomainName { get; set; }
-
         [JsonProperty("displayName")]
         public string DisplayName { get; set; }
+
+        [JsonProperty("initiative")]
+        public string Initiative { get; set; }
+
+        [JsonProperty("initiativeContext")]
+        public string InitiativeContext { get; set; }
     }
 }

src/ApplePayJS/Controllers/HomeController.cs

@@ -59,9 +59,10 @@ public async Task<IActionResult> Validate([FromBody] ValidateMerchantSessionMode
             // Create the JSON payload to POST to the Apple Pay merchant validation URL.
             var request = new MerchantSessionRequest()
             {
+                DisplayName = _options.StoreName,
+                Initiative = "web",
+                InitiativeContext = Request.GetTypedHeaders().Host.Value,
                 MerchantIdentifier = _certificate.GetMerchantIdentifier(),
-                DomainName = Request.GetTypedHeaders().Host.Value,
-                DisplayName = _options.StoreName
             };
 
             JObject merchantSession = await _client.GetMerchantSessionAsync(requestUri, request, cancellationToken);

src/ApplePayJS/Views/Home/Index.cshtml

@@ -11,7 +11,7 @@
     ViewData["Title"] = "Sample integration";
     var token = Antiforgery.GetAndStoreTokens(Context);
 
-    var language = Context.Request.Query["lang"].FirstOrDefault() ?? "en-GB";
+    var language = Context.Request.Query["lang"].FirstOrDefault() ?? Config["ApplePay:DefaultLanguage"];
     var region = new System.Globalization.RegionInfo(language);
 
     var countryCode = region.TwoLetterISORegionName;
@@ -156,7 +156,7 @@
                            autofocus
                            class="form-control input-block-level"
                            id="amount"
-                           min="0.01"
+                           min="0.00"
                            pattern="\d*(.\d\d)?"
                            placeholder="Amount"
                            step="0.01"
@@ -168,12 +168,12 @@
                 JavaScript determines that Apple Pay is available, but there are
                 no payment cards set up in Wallet.
             *@
-            <div id="set-up-apple-pay-button" class="apple-pay apple-pay-set-up-button apple-pay-set-up-button-black input-block-level d-none"></div>
+            <div id="set-up-apple-pay-button" class="apple-pay apple-pay-set-up-button apple-pay-set-up-button-black input-block-level d-none" lang="@countryCode"></div>
             @*
                 Used to render the Apple Pay button, which is shown if the
                 JavaScript determines that Apple Pay is available for use.
             *@
-            <div id="apple-pay-button" class="apple-pay input-block-level d-none"></div>
+            <div id="apple-pay-button" class="apple-pay input-block-level d-none" lang="@countryCode"></div>
         </form>
     </div>
 </div>

src/ApplePayJS/appsettings.json

@@ -1,5 +1,6 @@
 {
   "ApplePay": {
+    "DefaultLanguage": "en-GB",
     "StoreName": "Just Eat",
     "UseCertificateStore": false,
     "MerchantCertificateFileName": "",

src/ApplePayJS/bower.json

@@ -2,6 +2,6 @@
   "name": "justeatapplepayjs",
   "private": true,
   "dependencies": {
-    "applepayjs-polyfill": "3.0.0"
+    "applepayjs-polyfill": "6.0.0"
   }
 }

src/ApplePayJS/wwwroot/js/site.js

@@ -39,6 +39,7 @@ justEat = {
 
             // Create the Apple Pay payment request as appropriate.
             var paymentRequest = {
+                applicationData: btoa("Custom application-specific data"),
                 countryCode: countryCode,
                 currencyCode: currencyCode,
                 merchantCapabilities: [ "supports3DS" ],
@@ -67,7 +68,7 @@ justEat = {
             // };
 
             // Create the Apple Pay session.
-            var session = new ApplePaySession(3, paymentRequest);
+            var session = new ApplePaySession(6, paymentRequest);
 
             // Setup handler for validation the merchant session.
             session.onvalidatemerchant = function (event) {

src/ApplePayJS/wwwroot/ts/site.ts

@@ -30,7 +30,7 @@ namespace justEat {
             this.validationResource = $("link[rel='merchant-validation']").attr("href");
 
             // Set the Apple Pay JS version to use
-            this.applePayVersion = 3;
+            this.applePayVersion = 6;
 
             // Set the appropriate ISO country and currency codes
             this.countryCode = $("meta[name='payment-country-code']").attr("content") || "GB";
@@ -188,6 +188,7 @@ namespace justEat {
          */
         private createPaymentRequest = (deliveryAmount: string, lineItems: ApplePayJS.ApplePayLineItem[], total: ApplePayJS.ApplePayLineItem): ApplePayJS.ApplePayPaymentRequest => {
             let paymentRequest: ApplePayJS.ApplePayPaymentRequest = {
+                applicationData: btoa("Custom application-specific data"),
                 countryCode: this.countryCode,
                 currencyCode: this.currencyCode,
                 merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"],