Discovery Apple Pay Direct

1 Development
- 1.1 Sequence Diagram
- 1.2 Feature Flags
- 1.3 Code Changes
  - 1.3.1 Frontend
  - 1.3.2 Fulfillment
  - 1.3.3 Payment Service
  - 1.3.4 PSP Service
2 Apple Dashboard Configuration
3 CMS Configuration
4 Tests
- 4.1 Sandbox Account
  - 4.1.1 Creating sandbox account
  - 4.1.2 Linking the iPhone with sandbox account
  - 4.1.3 Add test card to Apple Pay account
5 Possible Blockers
- 5.1 Paycomet apple pay coming soon
- 5.2 Payment Refactor

Development

General integration - App with PSP:https://rbictg.atlassian.net/wiki/spaces/IN/pages/3660185610

Certification, setup configuration:https://rbictg.atlassian.net/wiki/spaces/IN/pages/753762326

Sequence Diagram

title Apple Pay ( PassKit )

User->Frontend: User click to pay with Apple Pay
Frontend->Mobile: Request Payment
User<-Mobile: Request to Authorize Payment
User->Mobile: Authorize via FaceID
Mobile->PassKit: Send payment request
PassKit->AppleServer: Make Payment
AppleServer->PassKit: Payment Response
Mobile<-PassKit: Payment Response
Frontend<-Mobile: Payment Response
Frontend->Backend: Verify Payment Status
Frontend<-Backend: Payment Status

For more details:

https://developer.apple.com/apple-pay/Apple-Pay-Merchant-Integration-Guide.pdf

Feature Flags

https://rbictg.atlassian.net/wiki/spaces/TRX/pages/4110647593

Code Changes

Frontend

It necessary add a new payment processor ( Paycomet ) validation inside the processOrderWithAccount function to handle the apple pay response.

if (payment.isPaycomet) {
  return commitOrder({
    ...commitInput,
    ...digitalPayDetails,
    creditType: CartPaymentCardType.APPLE_PAY,
    payment: {
      paycometInput: {
        fullName,
        paycometInput: {
          merchantAccount: '',
          pspReference: '',
          storePaymentMethod: false,
        },
      },
    },
  });
}

Fulfillment

Create a applePayDetails object in the paycometSale object to send the apple payment data to PSP Service.

applePayDetails: applePayDetails
              ? {
                  ...mapGQLApplePay(applePayDetails),
                  paymentData: applePayDetails.paymentData ?? '',
                }
              : undefined,

Add the condition to add applePayDetails in Paycomet mapPaymentMethod function

if (params.applePayDetails) {
      if (!params.applePayDetails.paymentData) {
        throw new Error('ApplePay payment is missing payment data');
      }

      return {
        paymentMethod: JSON.stringify({
          **: **,
          **: **,
          **: **,
          type: 'applepay',
        }),
        paymentMethodType: 'applepay',
      };
    }

Payment Service

Update the PaymentMethod and PaymentRequestDto interface to handle Apple Pay

Update the makePayment function to handle the apple pay payment and create a function to handle this payment type

PSP Service

We are still waiting for responses from Paycomet to understand how the integration with Apple Pay will work

Apple Dashboard Configuration

Linking the PSP Certificate to a merchant id

You need to go to “identifiers” in apple developer page and select the “Merchants Ids” (https://developer.apple.com/account/resources/identifiers/list/merchant) and you need to select the merchant id to the specific market that you want to configure.

Remember: We have two merchant ids for each market, one for prod/qa and one for dev/staging.

And a page like below will appear, then you need to click on “Create Certificate”

After that you need PSP certificate to upload to link with merchant ID

When all steps are completed the result should be the same as the image below

Configure the merchants ids to a specific app

You need to go to “identifiers” in apple developer page (https://developer.apple.com/account/resources/identifiers/list) and select the app you want to configure the apple pay.

After that a page like below will open to you and you need to select the merchants ids related to that app and market in the “Apple Pay Payment Processing”, to do that you need to click in “edit” button, select the merchants id and save.

XCode

You need to select the same merchant ID that you registered in the previous steps in the Signing & Capabilities tab in XCode.

CMS Configuration

You must fill this field with the merchant ID configured on the Apple Developers page in the CMS (CTG Configs → Front End Configuration)

Tests

Sandbox Account

Creating sandbox account

To create a sandbox account you need to go to https://appstoreconnect.apple.com/apps page and select the “Users and Access” button on the top of the page.

Select the “Sandbox” section and click in the “+” button on the right of the title “Test Accounts” and fill the form.

Linking the iPhone with sandbox account

To link the iPhone with a sandbox account, you need to restore the iPhone to factory settings (reset the iPhone) and start the iPhone with a sandbox account.

Add test card to Apple Pay account

You can find the test cards in this page Sandbox Testing - Apple Pay and select any card you want to link to you apple pay wallet.

To add the test credit card to your sandbox wallet, you need to go to “wallet” app on the iphone and click on “+” button and fill the credit card form.

Now you are able to test the apple pay inside the whitelabel-app.

https://developer.apple.com/account

Possible Blockers

Paycomet apple pay coming soon

https://www.paycomet.com/en/payment-methods

Payment Refactor

Today, refactoring of the payment system is being studied to transform the commitOrder that occurs in the frontend so that it only occurs in the backend. Looking at the current code, the entire Apple Pay payment process takes place in the iPhone SDK and we get the direct response from the SDK. You need to validate how this process will be carried out after payment refactoring.

Reference: https://rbictg.atlassian.net/wiki/spaces/IN/pages/4348543942

Iberia Collaboration