Apple Pay integration with Angular

Question

I want to integrate ApplePay and GooglePay in our Angular application.

For GooglePay, google has provided a useful package for npm. https://www.npmjs.com/package/@google-pay/button-angular

I tried to find a similar good package for ApplePay but couldn't find any.

I want to implement ApplePay on Angular. There are two ways to implement it (JS API and Payment Request API) and I would like to use the API method as I want to do as much as processing in server side. By looking at the following page, it's hard to understand the difference between JS API and Payment Request API. https://applepaydemo.apple.com/

Surprisingly I can't find any example code for Angular to use ApplePay. I can't believe no one has used ApplePay on Angular before. May be there is another/better way to do it?

In Angular it's even tricky to get the window instance. I have tried the solutions in this question and managed to inject window instance using a service provider. I can display the ApplePay button on appropriate devices but I am getting the following error when calling the ApplePaySession object. Apparenlty the injected window is not the top level one.

Error: Trying to start an Apple Pay session from a document with an different security origin than its top-level frame.

According to the WebKit code, this is when it returns that error but not sure how to solve it.

 if (!ancestorDocument->securityOrigin().isSameSchemeHostPort(topOrigin))
      return Exception { InvalidAccessError, "Trying to start an Apple Pay session from a document with an different security origin than its top-level frame." };

Has anyone tried ApplePay on Angular or is there any sample code on how to bind to validation events from Angular? Thanks.

Answer 1

If you want a package that supports both payment types, I found the NPM package ng-wallet for Angular. However, I wouldn't recommend using a package from an unofficial publisher. Google/Apple API changes might not be maintained by ng-wallet's publisher.

If you plan to maintain your Angular application long term, it is recommended to use packages that will have regular maintenance from Google/Apple:

• Google Pay - Use the official Google Pay package for Angular.
• Apple Pay - Apple haven't published an NPM package for Apple Pay yet. Using a third-party publisher's packages may cause problems mentioned above. Your best option is to implement it yourself using their Apple Pay JS API.

Keep in mind that Apple only supports ApplePay on Safari.