Tengo un archivo HTML donde agregué código como se describe aquí: https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_javascript
Así que mi código HTML se ve así:
<!DOCTYPE html> <html> <head> <script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script> <style> apple-pay-button { --apple-pay-button-width: 140px; --apple-pay-button-height: 30px; --apple-pay-button-border-radius: 5px; --apple-pay-button-padding: 5px 0px; } </style> </head> <body> <apple-pay-button buttonstyle="black" type="plain" locale="en">Check out</apple-pay-button> </body> </html>Cuando abro el archivo HTML en Chrome o Safari en mi MacBook Pro, no muestra el botón. Tampoco hay errores de JavaScript en la consola.
¿Cómo puedo hacer que el botón de pago de Apple se muestre en el navegador? Específicamente necesito el botón Pagar con el logo de Apple.
He intentado agregar display: initial; dentro de
apple-pay-button { --apple-pay-button-width: 140px; --apple-pay-button-height: 30px; --apple-pay-button-border-radius: 5px; --apple-pay-button-padding: 5px 0px; }código, y funcionó para mí. Queda así después de agregarlo:
apple-pay-button { --apple-pay-button-width: 140px; --apple-pay-button-height: 30px; --apple-pay-button-border-radius: 5px; --apple-pay-button-padding: 5px 0px; display: initial; }Entonces, la razón es básicamente que tiene una pantalla ninguno/escondida en alguna parte. Creo que tendrá que modificar esa pantalla para que se ajuste a sus necesidades.