Search site
Payment Widget
Accept Apple Pay in Payment Widget
Apple Pay merchant onboarding
Currently, Truevo only supports Merchant Registration onboarding for Apple Pay. This means we as the payment platform manage the Apple Pay configuration on your behalf and you are not required to set up an Apple Developer account or configure your own keys and certificates.
In order to start accepting Apple Pay transactions within the Payment Widget, you will need to enable and configure Apple Pay.
Please make sure you have read and adhere to Apple Pay’s Acceptable Use Guidelines.
How to configure Apple Pay
Step 1 - Activate Apple Pay
Apple Pay is enabled via the Truevo Portal, the setting can be found once navigating to the Developer section of the Truevo Portal and is located under the Payment Configuration tab.
To enable Apple Pay, select the Activate button. This will immediately take you to the Apple Pay configuration page.
Step 2 - Domain verification
In order to start accepting Apple Pay transactions, you will need to prepare your domain before it can be registered.
First, you will need to enter a display name, and then download the Apple Domain Verification File. It is important to download this file and place it within your domain before you register your domain within the portal. The file only needs to be downloaded once and can be used for multiple domains.
The Apple Domain Verification File needs to be hosted within your domain at the following path for each domain you’re registering:
https://[DOMAIN_NAME]/.well-known/apple-developer-merchantid-domain-association Step 3 - Register your domain
Once you have added the Apple Domain Verification File to your domain you can start registering your domains. Multiple domains can be registered at the same time.
To register a domain, you will enter the domain name in the provided field under domain names and select the add button to register it.
Step 4 - Save your Apple Pay configuration
Once all domains have been added you can select the save button to save the configuration. A domain is only registered once the configuration has been saved.
Selecting the save or cancel button will return you to the main Payment Configuration tab within the developer section of the portal.
Saving the Apple Pay configuration can happen at any time throughout the above-mentioned steps.
Step 5 - Display the Apple Pay button
In order for the Payment Widget to display Apple Pay as a payment option, once you have enabled Apple Pay and registered your domains within the Truevo Portal, you will need to download the Merchant SDK from https://pay.truevo.com/widget/merchant.minified.js and host the merchant.minified.js file in the root of your domain as well as include the following Apple Javascript SDK to the page that loads the payment widget in the HTML Head tag section.
<html>
<head>
<script data-minify="1" src="https://docs.truevo.com/wp-content/cache/min/1/jsapi/v1/apple-pay-sdk.js?ver=1732112943" data-rocket-defer defer></script>
</head>
<body>
...
<div id="truevo_form_container" />
<script src="merchant.minified.js" type="text/javascript" / data-rocket-defer defer>
<script type="text/javascript">
const configuration = {
transactionType: 'sale',
transaction: {
paymentReference: 'Camp Website"',
merchantReference: 'Order 123',
amount: {
totalAmount: 0.99,
currencyAlphaCode: 'EUR'
}
},
merchant: {
mid: '999999',
tid: '000000'
},
additionalData: []
};
function openCheckout() {
TruevoCheckout.initialize(configuration);
const truevoCheckout = TruevoCheckout.mount('#truevo_form_container');
truevoCheckout.addEventListener('transactionCompleted', res => {
console.log(res.detail);
//handle a successful transaction
});
truevoCheckout.addEventListener('transactionDeclined', res => {
console.log(res.detail);
//handle a transaction that was received but declined in processing
});
truevoCheckout.addEventListener('transactionFailed', res => {
console.log(res.detail);
//handle a transaction that failed to process due to a server or communication error
});
}
</script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/docs.truevo.com\/wp-admin\/admin-ajax.php","nonce":"9e31296913","url":"https:\/\/docs.truevo.com\/payment-widget\/accept-apple-pay-in-payment-widget","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://docs.truevo.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
