Apple Pay via Paysight Widget

Apple Pay is currently in closed beta testing. If you would like to use Apple Pay, please contact your account manager.

Overview

Apple Pay integration allows customers to pay using their Apple devices (iPhone, iPad, Mac) with Touch ID, Face ID, or passcode authentication. The Paysight Widget supports Apple Pay for a seamless checkout experience.

How Apple Pay Beta Works on Paysight

Apple Pay is enabled on Paysight through a guided setup process managed by our team during the beta phase.

Merchant Enrollment Paysight handles Apple Pay merchant enrollment on your behalf. Apple Pay is currently enabled per merchant account, one MID at a time. To complete enrollment, we require your company name, registered address, and MCC code.
Merchant Identifier Once enrollment is complete, we provide you with a unique Apple Pay merchant identifier. This identifier must be included in your widget configuration to enable Apple Pay for the selected merchant account.
Domain Certificate Upload You need to provide us with the domain where you will be placing the Paysight Widget. Once we provide you with the apple-developer-merchantid-domain-association file, you must upload it to your domain. The file must be placed in a .well-known directory at the root of your domain (e.g., https://yourstore.com/.well-known/apple-developer-merchantid-domain-association). This certificate file is required by Apple for domain verification.

This setup process will be fully automated within the Paysight UI in an upcoming release. During the beta period, enrollment is handled manually per MID upon request.

Prerequisites

Contact Your Account Manager

Apple Pay is currently in closed beta. Contact your Paysight account manager to request access.

Install and load the Widget

Ensure you have the Paysight Widget installed or loaded on your page. See Installation.

Complete Company Information

Make sure you have filled in all details in the Companies section of Paysight for the relevant MIDs.

Steps to Get Started

Select Your MIDs

Select a MID or MIDs you would like to enable Apple Pay on.

Verify Company Details

Make sure you have filled in all details in the Companies section of Paysight for the relevant MIDs.

Provide Your Domain

Provide us with the domain where you will be placing the Paysight Widget (e.g., mystore.com or checkout.mystore.com). This is the domain where you will advertise your products and host the widget.

Open Support Ticket

Open a Support Ticket on Paysight with title Apple Pay - MID ID and provide us with all of the above information, including your domain.

Upload Apple Certificate

Once we provide you with the apple-developer-merchantid-domain-association file, upload it to your domain. The file must be accessible at https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association. We will verify the certificate is properly configured before enabling Apple Pay.

Apple Pay Configuration

Once you receive approval for your MIDs, you can initialize your widget with the additional applePay property:

Configuration Properties

applePayEnabled (boolean, optional): Enable or disable Apple Pay for the widget
applePayOptions (object, optional): Apple Pay configuration options
- applePayMerchantId (string, required when applePayEnabled is true): Apple Pay merchant identifier provided by Paysight (per merchant account). Currently required, will be optional in v2.
- style (object, optional): Optional styling (maps to Evervault Apple Pay options)
  - buttonStyle (‘black’ | ‘white’ | ‘white-outline’, optional): Button style
  - buttonType (string, optional): Button type: ‘pay’, ‘buy’, ‘donate’, etc.
  - borderRadius (number, optional): Border radius in pixels
  - size (object, optional): Button size (Evervault options.size)
    - width (number | string, optional): Button width in pixels or ‘100%’
    - height (number | string, optional): Button height in pixels

Apple Pay automatically collects customer information (name, email, billing address) from the Apple Pay sheet, so you don’t need to provide these fields when using Apple Pay.

Implementation Examples

import { useEffect, useRef } from 'react';

export function CheckoutWithApplePay() {
  const widgetRef = useRef<any>(null);

  useEffect(() => {
    widgetRef.current = (window as any).PaySightSDK?.createWidget({
      targetId: 'widget-container-apple-pay',
      config: {
        productId: 7900,
        sessionId: `session_${Date.now()}`,
        environment: 'production',
        amount: 1.00,
        currency: 'USD',
        locale: 'en-US',
        applePayEnabled: true,
        applePayOptions: {
          applePayMerchantId: 'merchant_xxxxxxxx',
          style: {
            buttonStyle: 'black',
            buttonType: 'pay',
            borderRadius: 8,
            size: {
              width: '100%',
              height: 48
            }
          }
        }
      },
      onMessage: (message: any) => {
        switch (message.type) {
          case 'PAYMENT_START':
            // Show loading state
            break;
          case 'PAYMENT_SUCCESS':
            // Handle successful payment
            console.log('Payment successful:', message.payload);
            break;
          case 'PAYMENT_ERROR':
            // Handle payment error
            console.error('Payment error:', message.payload);
            break;
        }
      },
      onError: (error: any) => {
        console.error('Widget error:', error);
      },
    });
    return () => widgetRef.current?.destroy?.();
  }, []);

  return <div id="widget-container-apple-pay" />;
}

Customer Information

Apple Pay automatically collects customer information (name, email, billing address) directly from the Apple Pay sheet. You don’t need to configure Name and Email fields or provide them in the customer object when using Apple Pay - the widget will automatically retrieve this information from Apple Pay.

If you’re also supporting standard card payments (non-Apple Pay), you may still want to include Name and Email fields or customer object for those payment methods.

Limitations and Caveats

The following limitations apply to the current Apple Pay beta implementation. These will be addressed in upcoming updates.

Configuration Management

Currently, you must pass applePayEnabled: true and applePayOptions with applePayMerchantId in your widget initialization:

applePayEnabled: true,
applePayOptions: {
  applePayMerchantId: 'merchant_xxxxxxxx',
  style: {
    buttonStyle: 'black',
    buttonType: 'pay',
    borderRadius: 8,
        size: {
          width: '100%',
          height: 48
        }
  }
}

Upcoming changes:

Apple Pay configuration will be controlled from your merchant accounts in Paysight
The applePayMerchantId field in applePayOptions will become optional in v2
Domain and support URL configuration will no longer be required

MID Selection

Currently, only one MID per widget initialization can be used with Apple Pay. Upcoming changes:

We will be rolling out an update that automatically selects an Apple Pay compatible MID from your MID router
This will allow seamless Apple Pay support across multiple merchant accounts

Platform Support

Currently, Apple Pay is limited to the Paysight Widget implementation. Current limitations:

Shopify checkout is not supported
Only available through the Paysight Widget SDK

Stay tuned for updates as we continue to expand Apple Pay support across more platforms and simplify the configuration process.

Event Handling

Handle widget events to provide feedback to users during the Apple Pay flow:

onMessage: (message) => {
  switch (message.type) {
    case 'PAYMENT_START':
      // Disable submit button, show "Processing..."
      break;
    case 'PAYMENT_SUCCESS':
      // Show success message, redirect to confirmation page
      console.log('Transaction ID:', message.payload.transactionId);
      break;
    case 'PAYMENT_ERROR':
      // Show error message, allow retry
      console.error('Error:', message.payload.message);
      break;
  }
}

Full event details and patterns: Event Handling and Events Reference.

Testing

Use Production Environment

Apple Pay requires a production environment. Make sure you’re using environment: 'production' in your configuration.

Test on Apple Devices

Apple Pay is only available on Apple devices (iPhone, iPad, Mac). Test your integration on these devices.

Verify Certificate Upload

Ensure the apple-developer-merchantid-domain-association file is properly uploaded to your domain’s .well-known directory and is accessible via HTTPS.

Check Merchant Enrollment

Confirm with your account manager that your merchant account has been enrolled with Apple Pay.

Best Practices

No additional fields needed: Apple Pay automatically collects customer information (name, email, billing address) from the Apple Pay sheet, so you don’t need to configure these fields specifically for Apple Pay.
Test on real devices: Apple Pay functionality is only available on Apple devices, so test on actual hardware.
Handle errors gracefully: Implement proper error handling for cases where Apple Pay may not be available.
Provide fallback options: Ensure your widget still works with standard card payments if Apple Pay is unavailable.
Verify certificate upload: Ensure the apple-developer-merchantid-domain-association file is properly uploaded and accessible before going live.

Troubleshooting

Apple Pay Button Not Showing

Verify that you’re testing on an Apple device (iPhone, iPad, or Mac)
Check that your merchant account has been enrolled with Apple Pay
Ensure the apple-developer-merchantid-domain-association file is properly uploaded and accessible at https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association
Confirm that you’re using the correct applePayMerchantId in applePayOptions provided by Paysight
Verify that applePayEnabled is set to true

Payment Fails

Verify that applePayEnabled is set to true
Check that your applePayMerchantId in applePayOptions is correct
Ensure the apple-developer-merchantid-domain-association file is accessible and properly configured
Verify that the customer has completed the Apple Pay authentication (Face ID, Touch ID, or passcode)
Contact support if issues persist

Configuration Guide

Detailed configuration including all Apple Pay options.

Basic Integration Example

Simple widget integration example.

Paysight Guides

Zero to Hero

Integration Guides

Overview

How Apple Pay Beta Works on Paysight

Prerequisites

Steps to Get Started

Apple Pay Configuration

Configuration Properties

Implementation Examples

Customer Information

Limitations and Caveats

Configuration Management

MID Selection

Platform Support

Event Handling

Testing

Best Practices

Troubleshooting

Apple Pay Button Not Showing

Payment Fails

See Also

Configuration Guide

Basic Integration Example

Paysight Guides

Zero to Hero

Integration Guides

​Overview

​How Apple Pay Beta Works on Paysight

​Prerequisites

​Steps to Get Started

​Apple Pay Configuration

​Configuration Properties

​Implementation Examples

​Customer Information

​Limitations and Caveats

​Configuration Management

​MID Selection

​Platform Support

​Event Handling

​Testing

​Best Practices

​Troubleshooting

​Apple Pay Button Not Showing

​Payment Fails

​See Also

Configuration Guide

Basic Integration Example

Overview

How Apple Pay Beta Works on Paysight

Prerequisites

Steps to Get Started

Apple Pay Configuration

Configuration Properties

Implementation Examples

Customer Information

Limitations and Caveats

Configuration Management

MID Selection

Platform Support

Event Handling

Testing

Best Practices

Troubleshooting

Apple Pay Button Not Showing

Payment Fails

See Also