Discovery Apple Pay Iframe

Development

Sequence Diagram

Feature Flags

Frontend flag

Is necessary to handle the apple pay payment method. Example: payment-method-options/payment-method-options.tsx (line 90)

• enable-paycomet-apple-pay

Payments Notifications

References

https://rbictg.atlassian.net/wiki/spaces/TRX/pages/4323082241/2023-10-31+Iberia+Payments+Issue+Prevention#Notification-Endpoint-on-the-PSP

https://docs.paycomet.com/en/documentacion/seguimiento#seg_llamada

Datadog

RBI Payments Notification

RBI Test

Code Changes

Frontend

ApplePayHostedPagePayment

Reference: Technical refinement - Front end

Create a paycomet-apple-pay-form folder inside the paycomet-hosted-page-payment to create the page to handle the iframe.

Also is necessary to create a new variable "isPaycometApplePayMethodSelected" in paycomet-hosted-page-payment.tsx (line 509) and include in the PaymentMethod props, which will be necessary to update the IPaymentMethodProps interface. After that is necessary to add the page created in this code as well.

To capture just the apple pay button, it will be necessary to use some CSS techniques to hide the other payment methods, as the generation of this iframe includes all payment methods enabled on the dashboard.

Below is the code used to hide the other payment options and capture only the Apple Pay button

<iframe
  onLoad={() => setIframeLoaded(true)}
  data-testid="apple-pay-payment-form"
  title="Apple Pay Payment Form"
  style={{
    width: '500px',
    height: '500px',
    border: 'none',
    visibility: iframeLoaded ? 'visible' : 'hidden',
    position: 'absolute',
    clipPath: 'inset(130px 70px 322px 70px round 5px)', // important property to cut the iframe
    top: '128px',
    transform: 'scale(1.00)', // important property to increase button size
  }}
  src={paymentLink}
/>

CommitOrder

It necessary to handle this payment with backendCommitOrder. Example: use-paycomet-pay-link-popup/use-paycomet-pay-link-popup.ts (line 144)

const body: SuccessOutcomeResult = {
  type: 'Success',
  ...,
  ...,
  ...,
  paymentFlowType: PaymentFlowType.ApplePay,
}

Include the “ApplePay” type in the enum. Example: state/order/types.ts (line 46)

export enum PaymentFlowType {
  ...,
  ...,
  ...,
  APPLE_PAY = 'APPLE_PAY'
}

Include ApplePayLink in the “isPaycometPaymentLink” validation. Example: order-payment/use-order-payment.ts (line 1929)

const isPaycometPaymentLink = ... || ApplePayLink;

Include the ApplePayLink validation in useOrderPayment. Example: order-payment/use-order-payment.ts (line 944)

else if(isPaycometApplePayLink){
  paymentMethodBrandValue = PaymentMethodBrand.ApplePayLink;
}

PSP

CheckoutLink

Update the CheckoutRequestDto to accept the apple pay link. Example: dtos/links.dto.ts (line 16)

@IsIn([TypePayment..., TypePayment..., TypePayment..., TypePayment.ApplePay])

Update the generateCheckoutLink function to handle apple pay link. Example: links/links.service.ts (line 81)

...
else if(isPaymentLink(applePay){
  this.createPaymentLink()
} else {
...
}

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 https://developer.apple.com/apple-pay/sandbox-testing/ 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

Possible Issues

Iframe Clip

Paycomet's PSP does not use the same system as other PSPs, such as using credentials to communicate with Apple Pay, in this case they have a dedicated iframe to display this payment method. As we are using this iframe, which is not fully customizable, we had to use some CSS techniques to remove other payment methods and only display payment via Apple Pay.

As we are just cutting the iframe and not necessarily removing the button from within the iframe due to Paycomet limitations, if the user has knowledge related to html/css it will be possible to temporarily remove the "CLIP" property within the user's browser. This way, it will show all other payment options within that iframe. This will not occur any type of fraud as we use the payment notification solution through paycomet, however the user can make payments with other types of payments through this iframe.