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.

Domain Registration You need to provide us with the domain where you will be placing the Paysight Widget (for example, yourstore.com or checkout.yourstore.com). This is the domain where you will advertise your products and host the widget. We need this domain to map it to your merchant ID for Apple Pay validation.
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.
Apple Certificate Upload 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.
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.

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.

Choose Support URL

Decide on a support URL for each company/MID (e.g., mystore.com or dedicated support URL).

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

applePayMerchantId (string, required): Apple Pay merchant identifier provided by Paysight (per merchant account)
applePayDomain (string, required): Apple Pay domain (per merchant account) - the domain where you will be hosting the Paysight Widget
applePaySupportUrl (string, required): Support URL for Apple Pay wallet redirects. If user goes to Apple Pay via wallet, we redirect to this URL

Apple Pay requires a minimum of Name and Email to process a transaction. These can be provided either:

As fields in the widget configuration, or
In the customer object in the widget configuration

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',
        applePay: {
          applePayMerchantId: 'merchantId_xxxxxx',
          applePayDomain: 'examplestore.com',
          applePaySupportUrl: 'https://examplestore.com/support'
        },
        // Apple Pay requires Name and Email - can be provided via fields or customer object
        customer: {
          firstName: 'John',
          lastName: 'Doe',
          email: '[email protected]'
        }
      },
      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" />;
}

Field Requirements

Apple Pay requires a minimum of Name and Email to process a transaction. These can be provided in one of two ways:

Option 1: Using Fields

Include Name and Email fields in your widget configuration:

fields: [
  {
    label: 'Full Name',
    placeholder: 'Enter your full name',
    fieldType: 'name',
    position: 'above',
    size: 'full',
    required: true
  },
  {
    label: 'Email Address',
    placeholder: 'Enter your email',
    fieldType: 'email',
    position: 'above',
    size: 'full',
    required: true
  }
]

Option 2: Using Customer Object

Provide Name and Email in the customer object:

customer: {
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]'
}

You can use either approach - fields or customer object - or a combination of both. As long as Name and Email are provided, Apple Pay will work correctly.

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 the complete applePay configuration object in your widget initialization:

applePay: {
  applePayMerchantId: 'merchantId_xxxxxx',
  applePayDomain: 'examplestore.com',
  applePaySupportUrl: 'https://examplestore.com/support'
}

Upcoming changes:

Apple Pay configuration will be controlled from your merchant accounts in Paysight
The applePayMerchantId, applePayDomain, and applePaySupportUrl fields will become optional overrides
A new applePay.enabled boolean property will be available to toggle Apple Pay on/off

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

Always provide Name and Email: Apple Pay requires Name and Email to process transactions. These can be provided via fields or the customer object in your widget configuration.
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 provided by Paysight
Verify that your applePayDomain matches the domain where the certificate is uploaded

Payment Fails

Ensure Name and Email are provided either via fields or the customer object
Verify that your applePayDomain matches the domain where you uploaded the certificate
Check that your applePaySupportUrl is accessible and returns a valid page
Ensure the apple-developer-merchantid-domain-association file is accessible and properly configured
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

Field Requirements

Option 1: Using Fields

Option 2: Using Customer Object

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

​Field Requirements

​Option 1: Using Fields

​Option 2: Using Customer Object

​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

Field Requirements

Option 1: Using Fields

Option 2: Using Customer Object

Limitations and Caveats

Configuration Management

MID Selection

Platform Support

Event Handling

Testing

Best Practices

Troubleshooting

Apple Pay Button Not Showing

Payment Fails

See Also