Discovery Apple Pay Iframe
- Capovilla, Evandro
- 1 Development
- 1.1 Sequence Diagram
- 1.2 Feature Flags
- 1.2.1 Frontend flag
- 1.3 Payments Notifications
- 1.3.1 References
- 1.3.2 Datadog
- 1.4 Code Changes
- 1.4.1 Frontend
- 1.4.1.1 ApplePayHostedPagePayment
- 1.4.1.2 CommitOrder
- 1.4.2 PSP
- 1.4.2.1 CheckoutLink
- 1.4.1 Frontend
- 2 Tests
- 3 Possible Blockers
- 4 Possible Issues
- 4.1 Iframe Clip
- 4.2 Scalability
Development
Sequence Diagram
Feature Flags
For this task it will be necessary to create a new feature flag for the Apple Pay Iframe just for the frontend
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://docs.paycomet.com/en/documentacion/seguimiento#seg_llamada
Datadog
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.
Unfortunately, we did not have solutions on Paycomet's side to make this removal possible on their side.
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}
/>There is the possibility of adding the cut values within a feature flag so that it can be changed dynamically if the paycomet iframe changes some position fields.
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)
Include the ApplePayLink validation in useOrderPayment. Example: order-payment/use-order-payment.ts (line 944)
PSP
CheckoutLink
Update the CheckoutRequestDto to accept the apple pay link. Example: dtos/links.dto.ts (line 16)
Update the generateCheckoutLink function to handle apple pay link. Example: links/links.service.ts (line 81)
Paycomet request example:
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.
Scalability
This solution is not a scalable and any change that Paycomet makes to the iframe may cause the apple pay button to be removed or changed position, causing the button to disappear and incorrect information to appear.
As this feature is new on their part, it is not possible to just display the Apple Pay button and the option of just the Apple Pay button was unsuccessfully requested via email.