Hi, I’ve been trying to integrate Apple Pay, but for some reason, the payment button is not showing up.
The project is built with Laravel 11 and Vue. I imported the script as follows:
<script crossorigin crossorigin
src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"
></script>
Then I added the following the steps:
<style>
apple-pay-button {{
--apple-pay-button-width: --apple-pay-button-width: 150px;;
--apple-pay-button-height: --apple-pay-button-height: 30px;;
--apple-pay-button-border-radius: --apple-pay-button-border-radius: 3px;;
--apple-pay-button-padding: --apple-pay-button-padding: 0px 0px;;
--apple-pay-button-box-sizing: border-box;
}
</style>
<apple-pay-button buttonstyle="black" type="plain" locale="en-US"></apple-pay-button>
I followed all the steps from the official Apple Pay demo:
I also configured the Content Security Policy (CSP) to allow all necessary resources. However, when I test my integration, the button doesn’t appear. I’ve checked the console, but there are no errors.
At the same time, I have my certificate imported into the Keychain, and I’ve completed the entire process of creating both the certificate and the private key. However, when I try to validate the session using the certificate and key with Apple’s API, I get an error:
400 The SSL certificate error