Linux | Windows | |
---|---|---|
Build Status |
This repository contains a sample implementation of Apple Pay JS using ASP.NET Core 3.0 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 .NET Core 3.0.100 SDK, Visual Studio 2019 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-known
folder. - Generate a
.pfx
file 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
.pfx
file to the root of the application insrc\ApplePayJS
(but not in thewwwroot
folder) 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:StoreName
*ApplePay:UseCertificateStore
*ApplePay:MerchantCertificateThumbprint
orApplePay:MerchantCertificateFileName
- Configure the following setting in either your environment variables, your user secrets or in
src\ApplePayJS\appsettings.json
(not recommended) if loading the.pfx
file 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 2019.
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 SSL certificates tab of your Web App and upload your Apple Merchant certificate as a
.pfx
file, making a note of the THUMBPRINT value. - Navigate to the Application settings tab 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.net
or 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.