...
| Expand | ||
|---|---|---|
| ||
title Apple Pay User->Frontend: User click to pay with Apple Pay |
Feature Flags
| Noteinfo |
|---|
For this task it will be necessary to create a new feature flag for the Apple Pay Iframe just for the frontend |
...
ApplePayHostedPagePayment
Create a HostedPagePayment following the Paycomet PaypalReference: 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.
...
| Code Block |
|---|
<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(121px 30px 316px 0px130px 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}
/> |
| Info |
|---|
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)
...
| Code Block |
|---|
...
else if(isPaymentLink(applePay){
this.createPaymentLink()
} else {
...
} |
Paycomet request example:
| Code Block |
|---|
{ "operationType": 1, "terminal": xxxx, "language": "es", "payment": { "order": "test-order-id", "amount": "220", "currency": "EUR", "terminal": xxxx, "secure": 1, "urlOk": "https://httpbin.org/get", "urlKo": "https://httpbin.org/get", "methods": [1] } } |
Tests
Sandbox Account
Creating sandbox account
...
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.
...
| Info |
|---|
In addition, we also tried to remove these buttons trying to access these elements from within the iframe, but the browser blocks this type of access because they are different domains. |
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.