...
ApplePayHostedPagePayment
Reference: Technical refinement - Front end
Create a HostedPagePayment following the Paycomet Paypala 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(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}
/> |
...
| 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.