How to integrate Apple Pay into your application?

Category:
Mobile Development
Dmytro Sokolov
Human Resources Manager
Business Development Manager
Business Development Manager
Business Development Manager
Business Analyst
Business Analyst
Project Manager
Project Manager
UX/UI Designer
IT Lawyer
Chief Technology Officer
Chief Executive Officer
Head of Back-End Chapter
Head of Mobile Chapter
Marketing Manager
Head of QA Chapter

Why does your app/website need Apple Pay?

Since Apple released Apple Pay, and the magic button “Pay with Apple Pay” has appeared in web and mobile apps, online shopping has become much easier. According to the official figures, in September 2019 there were 441 million Apple Pay users worldwide! It is safe to assume that this number has grown considerably in the first 6 months of 2020.    

If you are planning to build an application or website where you will sell some goods or services, integrating Apple Pay will help you to make it more user-friendly. 

Besides its convenience, Apple Pay is also secure. While purchasing within apps and on the web in Safari actual card numbers of end-users aren’t stored on devices or on Apple servers. The merchant only receives information like name, email address, billing, and shipping addresses that end-users authorize to share to fulfill their orders. 

Stay tuned to let us show you how to integrate Apple Pay into your application or website. 

Table of Contents 

  1. Preparing app/website for Apple Pay
  2. How to integrate Apple Pay into the application?
  3. How to integrate Apple Pay into the website?
  4. Implementing Apple Pay into the app/website

Preparing app/website for Apple Pay

Make sure that Apple Pay is available in your country and find a payment provider that supports Apple Pay in your region. 

Creating a Merchant ID 

Merchant ID tells the payment processing systems involved in a transaction where to send which funds. To create it log in to your Apple Developer Account and go to “Certificates, IDs & Profiles”. Choose “iOS, tvOS, watchOS” from the pop-up menu. Tap “App IDs” in the “Identifiers” section.

Create a new iOS App ID by clicking the “+” button. Choose the App ID section on the next page and fill the “Description” field with the name of your App ID.

Fill the “Bundle ID” field as explained further. Then, go to the “Capabilities” section and choose “Apple Pay Payment Processing”.  

Next, on the Identifiers Page choose “+” and select the “Merchant ID” section to add the new one by clicking the “Continue” button on the page.

Fill the “Description” field, where you can enter the name of your application or website. 

An “ID” field is then filled using the following format “merchant.com.YourAppName”.

Then click the “Continue” button.

Back to the “App ID” in the “Identifiers” section. We have just created the new App ID, so all that needs to be done here is to choose  “Apple Pay Payment Processing”. 

Next select your Merchant ID in the “Merchant ID Assignment” section. 

 And that's it.

Creating Payment Processing Certificate

To make outgoing payment data for users safe, you need to create a Payment Processing Certificate. 

To start creating a Payment Processing Certificate, go to the “Certificates, Identifiers & Profiles” section → “Identifiers” → “Merchant IDs”. Select the “Merchant ID” and click “Edit”.  

After the “Payment Processing Certificate” is opened, click the button “Create Certificate

Apple Pay integration screenshot

After this click “Choose file” and select the CSR file that has the .certSigningRequest extension. Click “Continue” → “Download” → “Done”.

Got it! We’ve finished setting up the basic settings for Apple Pay. Now if you want to integrate Apple Pay into your mobile application, follow the steps in the next paragraph. If you prepared Apple Pay for the website, skip it and go to the paragraph on “How to integrate Apple Pay into a website?” 

How to integrate Apple Pay into the application?

Open the XCode and tap the “File” icon in the upper left corner. 

Go to XCode and click the file icon in the upper left corner. Choose the target project and move to the “Capabilities” section. After it has opened, turn on the “Apple Pay” section.

After refreshing the page you will see your Merchant ID in the “Merchant IDs” section. 

In the event you have used the “Automatically manage signing” the system will create a merchant identity certificate automatically.

How to integrate Apple Pay into the website? 

Creating Merchant Identity Certificate 

For authentication of communication between Apple Pay servers, you need to create a Merchant Identity Certificate. 

To create a Merchant Identity Certificate go to “Certificates, Identifiers & Profiles” → “Identifiers” → “Merchant IDs”. Choose your Merchant ID and click the button “Edit”.

Move to the “Apple Pay Merchant Identity Certificate” section and press the button “Create Certificate”. 

Apple Pay integration screenshot

Next click “Choose file” and upload your CSR file (look at the paragraph Create Payment Processing Certificate)

After that, click “Choose file” and choose your CSR file to upload. Next click “Choose” → “Continue” → “Download”.

Registering and verifying your domain

After the Merchant Identity Certificate for your website has been created, you’ll need to register and verify the domain of your website. 

To do this go to “Certificates, Identifiers & Profiles” → “Identifiers” → “Merchant IDs”. Choose your Merchant ID and click the button “Edit”. 

In the “Merchant Domains” section, click the “Add Domain” button. 

Enter your domain name and click “Continue” → “Download”. 

Apple Pay integration screenshot

The text file is generated and available to download. Download this file and host it to the provided URL path, this file will be valid for 7 days.

As soon as the file is made available on your server click  the “Verify” button.

Need help with Apple Pay integration?
Let us help you to make your application more convenient for end-users.

Implementing Apple Pay into the app/website 

We have finished the preparation stage and now to completely integrate Apple Pay into your mobile application or website, here will be needed programming skills. 

Setting up Apple Pay APIs for the app/website 

Here APIs need to be used that will determine whether the end-user’s device can support Apple Pay. 

Let’s implement Apple Pay into the mobile application by utilizing a PassKit framework:

When the new project is created and Apple Pay capability is On. 

Lets go to ViewController and add display error func

Then let’s create a simple model of our Goods with a price and name.

Add constant with Sneakers for 1000 $.

After that simply add button with the following code:

Link to the code snippet

Step 1 Creation of a Payment Item based on Goods we have.

Step 2 Addition of supported payment cards.

Step 3 Currency for transactions and transfers.

Step 4 Setup for country code.

Step 5 Previously created identifiers.

Step 6 Verifies the type of transaction. PKMerchantCapability.capability3DS and uses the 3-D Secure protocol, a secure way of processing debit and credit cards.

Steps 7 and 8 Uses payment networks and payment items we created previously. This is only basic information; you can add more information in the request, such as the billing information, shipping methods, and supported countries. You can also check the full list of properties.

To get callback on transaction success we can use this protocol 

PKPaymentAuthorizationViewControllerDelegate

To integrate Apple Pay into the website, use JavaScript-based APIs, and a detailed guide on how to do it.  

Note: these JS-based APIs are available only for Safari

Installing Apple Pay button and mark 

Choose the Apple Pay button for applications on the website.
ApplePay payment sheet
To install an Apple Pay mark download it first and read its usage guidelines. 

Customizing a payment sheet

You can create a customizable payment sheet that is open after the end-user taps the Apple Pay button. The Payment sheet in your application/website can also include additional charges, discounts, pending costs, as well as add-on donations. 

Source: developer.apple.com

To learn more about customization of payment sheets go here

We did it! The integration of Apple Pay into the application/website is finished. In the next blog post we will tell you how to implement an authorization with Apple ID into your app. So, stay tuned!

Axon Development Group
July 22, 2020
Mobile Development

readers who are obsessed with delivering great customer service.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Expertly curated emails that’ll help you deliver an exceptional customer experience.

Contact with us

Upload file with the file dialog or by dragging and dropping onto the dashed region

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.