919 reads

[A Step by Step Guide] Integrating Apple Pay in Your iOS App

by Max BabychOctober 9th, 2019

Too Long; Didn't Read

Max is a serial entrepreneur and IT professional. Max explains how to set up Apple Pay in 28 steps. In 2019 alone 10 billion contactless payments were made using Apple Pay. The general workflow to implement Apple Pay is as follows: Create an Apple Pay configuration for the project in your Xcode. In the server configuration file, you will need to add one of the possible Cipher Suite referenced above. In this article, we show how to use the React Native framework in our React Native toolkit.

Companies Mentioned

featured image - [A Step by Step Guide] Integrating Apple Pay in Your iOS App

Today Apple Pay accounts for 70% of the world’s card payment transactions, making the Apple payment gateway a must-have for any digital business. Additionally, it allows you to accept overseas payments since this service is available in over 20 countries. So what are you waiting for?

The reasons for Apple Pay integration

As noted above, Apple Pay is a leader within the credit card payments market. It’s a simple one-touch way to make online payments, the simplicity of which, helps increase your customers' satisfaction rate. In Q3 of 2019, Apple reported record profits of almost 54$ billion. This number was led by services, like Apple Pay, showing just how huge their market is! At the moment 90% of all contactless payments in the USA are made by Apple.It’s commonly integrated into apps. In 2019 alone 10 billion contactless payments were made using Apple Pay. It’s popular, with over 253 million people already using this payment method.

Benefits for your customers

Guaranteed security. According to statistics, 50% of users are concerned about the security of their personal data, which is a good reason to set up Apple Pay! It uses device-specific numbers and codes, meaning it is almost impossible to copy.Apple Pay helps you create an easy and quick user experience for your customers. A smooth one-click payment transaction is so much better than empty text inputs to enter credit card data. Especially, when you would need to save your details on the website in order to have a one-click payment on your return.

How to set up Apple Pay in 28 steps

I’ve used a React Native framework. The general workflow to implement Apple Pay is as follows:

Create a Merchant account.
Set up an Apple Pay configuration for the project in your Xcode.
Then go to iTunes Connection. There you will need to create a sandbox user.
Add a test card.
Create a test request to make a payment.
Handle the result.

However, the details are a little more complicated. Below we will outline step by step how to set up Apple Pay:1. Create an account to enable Apple Pay in your mobile application. Follow the .

2. Next set up your server, not forgetting to first check out .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 first.

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

Open Keychain Access on your Mac (located in Applications/Utilities).
Open Preferences and click Certificates. Make sure both the Online Certificate Status Protocol and Certificate Revocation List are set to Off.
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.
Select the option “Save to disk” and “Let me specify key pair information” and click Continue.
Specify a file name and click Save.

6. After Signing in you can register for your Apple Pay Developer account at 7. Go to menu “Certificates, IDs & Profiles”.

8. Click on the button ‘Add new certificate’.

9. Then choose the options Apple Pay Merchant Identity Certificate.

10. Now choose the required Merchant from the list of those currently available.

11. Go to menu “Identifiers” and filter by Merchant IDs.

12. Choose the previously created Merchant.13. Next, create an Apple Pay Payment Processing Certificate.

14. After the creation of a certificate, you will need to upload the .csr extension which is an ECC encrypted file. We receive this file from our payment system (in my example I work with the bank, so screen made there)

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.

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 the 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 PEM pass phrase - this will be the key to the generated merchantIdentityCert.

23. Put the generated

merchantIdentityCert

in the 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 the answer to complete Merchant validation. Take a look:

27. Create the Apple Pay button in accordance with the requirements in the 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: ["//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: this.price, currency: "currency"},
           },
       };


       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');

   },
}

I hope you enjoy the reading! If you find this guide useful feel free to comment & share. Your feedback is important for me to improve the quality of content. Thanks!

(Disclosure: The Author is the Owner of SPDLoad)

L O A D I N G
. . . comments & more!