Codementor Events

How to integrate Apple Pay in your mobile app?

Published Sep 09, 2019
How to integrate Apple Pay in your mobile app?

These days Apple Pay represents 70% of the world's card installment volume. So that, Apple is a must-have for your app. In addition, it enables you to acknowledge installment abroad as this service works in 20 nations.

How to execute Apple Pay in your IOS application? Let me explain to you in the article.

Why do you need to use Apple Pay?

Apple Pay is the main service on the credit card payments market. If you integrate it, you`ll see how loyal can be your customers. Apple Pay is really a perfect and easy way of payment.

Do you know the revenue of Apple in 2019? Q3 reports say it's almost 54$ billions! That's the best reason for you to make a decision. And there`re a few more ones below:

  1. Apple Pay is standard. Nowadays 90% of all contactless payments in the USA are made with this feature.
  2. In 2019 there were about 10 billion of contactless payments made using this payment method.
  3. 253 million people use Apple Pay.

Profits for your users

  1. Secureness will be guaranteed. Do you know that 50% of users care about the reliability of service and secureness of their personal data? It’s a great reason to integrate Apple Pay in your app! Apple Pay uses a device unique specific number and code, so it's safe and almost impossible to copy.

  2. You`ll take care about UX. I am sure, that smooth one-click payment is much better than empty text inputs to enter credit card data. Especially, when there is a need to save it on a website to go one-click payment next time. In 2019 it’s essential to implement the best features even in your MVP. Because user expectations got higher.

Nobody likes to enter credit card data in empty text inputs and save data on a website. Apple pay is an easy one-click payment and due to this fact, your customers' satisfaction will instantly grow.

apple pay meme.jpg

Guidance on how to actually integrate Apple Pay in your application

1. Create an account to enable Apple Pay in your mobile application. Follow the official setup steps:
official documentation
1.png
2. Next set up your server, not forgetting to first check out the official requirements at: official documentation

In the server configuration file you will need to add one of the possible Cipher Suite referenced above. Take a look at our example configuration for nginx.

``   
ssl_stapling on;
   ssl_stapling_verify on;

   ssl_protocols TLSv1.2;
   #ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384;
   ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!3DES:!MD5:!PSK';
   ssl_prefer_server_ciphers on;
   #ssl_dhparam /etc/nginx/dhparams.pem;
   ssl_dhparam /home/forge/dhparam/dhparam.pem;
``

3. Next you need to set up your work environment. As always, check the official requirements first. official documentation
3.png
4.Here is an example of how to add the Apple Pay payment button.

<div class="item" v-if="(window.ApplePaySession && window.ApplePaySession.canMakePayments())">
   <input class="apple-pay" type="submit" @click="sendCreateOrderRequest" value="" style="-webkit-appearance: -apple-pay-button; width: 100%;height: 40px;
-apple-pay-button-type: plain;
-apple-pay-button-style: black;"
   >
</div>

Using the v-if directive you can check whether you have successfully installed Apple Pay sessions and whether users can now make payments using Apple Pay.
5. Now let's create a certSigninRequest.certSigninRequest:

	a.Open Keychain Access on your Mac (located in Applications/Utilities).
    
	b.Open Preferences and click Certificates. Make sure both the Online 	Certificate Status Protocol and Certificate Revocation List are set to Off.
    
	c.Choose Keychain Access > Certificate Assistant > Request a Certificate Authority. N.b. If you have your private key selected when you do this, the CSR won’t be accepted. Make sure you do not have a private key selected. Next enter your user email address and user name. Use the same address and name that you used to register in the iOS Developer Program. A CA Email Address is required.
    
	d.Select the option “Save to disk” and “Let me specify key pair information” and click Continue.
    
	e.Specify a file name and click Save.

6. After Signing in you can register for your Apple Pay Developer account at: official website
7. Go to menu “Certificates, IDs & Profiles”.
image3.png
8. Click on the button ‘Add new certificate’.
image2.png
9. Then choose the option Apple Pay Merchant Identity Certificate.
image8.png
10. Now choose the required Merchant from the list of those currently available.
image1.png
11. Go to menu “Identifiers” and filter by Merchant IDs.
image11.png
12. Choose the previously created Merchant.
13. Next create an Apple Pay Payment Processing Certificate.
image4.png
14. After creation of certificate, you will need to upload the .csr extension which is an ECC encrypted file. We receive this file from our payment system (in our example we work with bank, so screen made there)
image6.png
15. Add and verify the domain, following the instructions on the screen. Pay attention every time you renew an SSL Certificate, as you will need to verify the domain each time.
image5.png
16. If you missed step 5 go back and take a look at how to create a certSigninRequest.certSigninRequest. If you haven't created one yet, now is the time using encryption RSA:2048.

17. Download your previously created certSigninRequest.certSigninRequest and then download merchant_id.cer.

18. Import received merchant_id.cer in Keychain (it required to export file in .p12).

19. In category Certificates in Keychain you need to export certificate using format .p12.

20. Generate merchantIdentityCert from the received file using the command below:
```
openssl pkcs12 -in your_cer_name.p12 -out you_key_cert_name.pem -clcerts

**21.** Enter the password that was entered during export **merchant_id.cer** in **.p12**.
**22.** Enter **Enter PEM pass phrase** - this will be the key to the generated **merchantIdentityCert**.
**23.** Put the generated **merchantIdentityCert** in project’s folder.
**24.** Use **merchantIdentityCert** in the body of the request for validation Apple Pay Session.
**25.** Example of the request:
  ```
$response = $client->post($request->appleValidationUrl, [
   'body' => json_encode([
   	   'merchantIdentifier' => $request->appleMerchantId,
    	   'displayName' => $request->displayName,
      	   'initiative' => 'web',
               'initiativeContext' => 'name of your api'
   ]),
   'curl' => array(
       CURLOPT_SSLVERSION => CURL_SSLVERSION_TLSv1_2,
       CURLOPT_SSLCERT => public_path(path_to_merchant_identity_cert.pem),
       CURLOPT_SSLKEYPASSWD =>’your_pem_passphrase’,
       CURLOPT_SSLKEY => public_path(path_to_merchant_identity_cert.pem'),
   ),
]);

where we see:
appleValidationUrl - it is url that is obtained when calling onvalidatemerchantevent
appleMerchantId - it is identificator of Merchant in Apple Pay
displayName - it is the name of seller.
26. Use answer to complete Merchant validation. Take a look:
image9.png
27. Create the Apple Pay button in accordance with the requirements on this page: https://applepaydemo.apple.com/ in section “Display an Apple Pay button”
28. Code listing in Apple Pay using Payment Request API

sendCreateOrderRequest: async function () {
       if (!window.PaymentRequest)
           return;
       const applePayMethod = {
           supportedMethods: ["https://apple.com/apple-pay"],
           data: {
               version: 3,
               merchantIdentifier: "your_merchant_identifier",
               merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"],
               supportedNetworks: ["mastercard", "visa"],
               countryCode: "put there your country code",
               currencyCode: "put there code of currency you will use",
               domainName: "your_domain_name"
           },
       };
       const paymentDetails = {
           total: {
               label: this.product.name,
               type: "final",
               amount: {value: th
       };
       const request = new PaymentRequest([applePayMethod], paymentDetails);
       request.onmerchantvalidation = function(event) {
           console.log(event);
           var data = JSON.stringify(
               {
                   appleValidationUrl: event.validationURL,
                   appleMerchantId:"your_merchant_identifier",
                   displayName: "your_merchant_name"
               });
           fetch("url_to_validate_merchant", {
               body: data,
               headers: {'content-type': 'application/json'},
               method: "POST",
           }).then(response => {
               event.complete(response.json())
           });
       };
       const response = await request.show();
       response.complete('success');

   },
}

Guys thanks for reading! I hope the guidance on how to implement Apple Pay was useful. If there are any questions left feel free to contact me any time. Looking forward your feedback!

Originally it was posted here: SpdLoad

Discover and read more posts from Maksym Babych
get started
post commentsBe the first to share your opinion
Show more replies