This repository contains a sample implementation of Apple Pay JS using ASP.NET Core 6 written in C# and JavaScript.
Apple Pay JS is a way of accepting Apple Pay in websites using Safari in either iOS 10 and macOS for users who have a TouchID compatible device.
This example integration shows a minimal sample of how to integrate Apple Pay into a webpage to obtain an Apple Pay token that can be used to capture funds for a user for goods and services.
The key components to look at for the implementation are:
src\ApplePayJS\Views\Home\Index.cshtml- The view that renders the Apple Pay button.src\ApplePayJS\wwwroot\css\site.css- The CSS used to style the Apple Pay button.src\ApplePayJS\wwwroot\js\site.js- The JavaScript that performs the majority of the Apple Pay functionality.src\ApplePayJS\Controllers\HomeController.cs- The controller that performs the POST to the Apple Pay service to verify a merchant session.
To setup the repository to run the sample, perform the steps below:
- Install the latest .NET 7 SDK, Visual Studio 2022 or Visual Studio Code.
- Fork this repository.
- Clone the repository from your fork to your local machine:
git clone https://github.com/{username}/ApplePayJSSample.git - Restore the Bower, npm and NuGet packages.
- Follow the steps to obtain your Apple Pay Merchant ID, Payment Processing Certificate, Domain Verification file and Merchant Identity Certificate if you do not already have them.
- Place the Domain Verification file (
apple-developer-merchantid-domain-association) in thesrc\ApplePayJS\wwwroot\.well-knownfolder. - Generate a
.pfxfile from your Merchant Identity Certificate (merchant_id.cer, which is the public key) and the Certificate Signing Request (your_file_name.csr, which is the private key) that you used to generate it. - Either add your
.pfxfile to the root of the application insrc\ApplePayJS(but not in thewwwrootfolder) or install it into the local certificate store. - Update the Apple touch icon (
src\ApplePayJS\wwwroot\apple-touch-icon.png) and favicon (src\ApplePayJS\wwwroot\favicon.ico) to your own designs. - Configure the following settings as appropriate in either your environment variables or in
src\ApplePayJS\appsettings.json:ApplePay:StoreNameApplePay:UseCertificateStoreApplePay:MerchantCertificateThumbprintorApplePay:MerchantCertificateFileName
- Configure the following setting in either your environment variables, your user secrets or in
src\ApplePayJS\appsettings.json(not recommended) if loading the.pfxfile from disk (i.e.ApplePay:UseCertificateStore=false):ApplePay:MerchantCertificatePassword
- Deploy the application to the hosting environment for the domain where you wish to use Apple Pay JS.
- Verify the domain in the Apple Developer Portal.
You should now be able to perform Apple Pay JS transactions on the deployed application.
You should be able to debug the application in Visual Studio Code or Visual Studio 2022.
If you are deploying the sample application to a Microsoft Azure App Service Web App, you will need to make the following configuration changes to your Web App for the sample application to run correctly:
- Navigate to the Private Key Certificates (.pfx) tab of your Web App's TLS/SSL Settings blade and upload your Apple Merchant certificate as a
.pfxfile, making a note of the Thumbprint value. - Navigate to the Configuration blade of your Web App and add the following settings:
- WEBSITE_LOAD_CERTIFICATES to the value of Thumbprint you noted above.
- ApplePay:MerchantCertificateThumbprint to the value of Thumbprint you noted above.
- ApplePay:UseCertificateStore to the value of true.
- Save the changes.
- Ensure the hostname you are using (either
{yourappname}.azurewebsites.netor a custom hostname that you have set up) has been added in the Apple Developer portal to your merchant ID and you've added the Apple Pay domain validation file as described in the Setup section above.
Any feedback or issues can be added to the issues for this project in GitHub.
This project is licensed under the Apache 2.0 license.