Apple & Google pay submission

If you're using React, OpenPay provides Apple Pay and Google Pay access via the <ElementsForm /> component. You can get their handlers directly from the function-as-child callback.

This allows you to:

• Check availability (isAvailable)

• Trigger the payment flow with startFlow(...)

• Optionally choose a processor

Accessing Apple/Google Pay from <ElementsForm /> Copied

Wrap your payment form in <ElementsForm />. Inside the render prop callback, you’ll receive applePay, googlePay, and submission helpers.

<ElementsForm
      checkoutSecureToken={`checkout-secure-token-uuid`}
      onCheckoutSuccess={onCheckoutSuccess}
      onCheckoutError={onCheckoutError}
    >
      {({ submit, applePay, googlePay, submitWith }) => (
        <>
          {/* Card fields and Billing Fields here */}
        </>
      )}
</ElementsForm>

Apple/Google Pay object shape Copied

Each of applePay or googlePay has the following structure:

{
    processors: PaymentProcessor[];
    isAvailable: boolean;
    isLoading: boolean;
    startFlow: (customParams?: ApplePayFlowCustomParams) => Promise<void>;
}

Starting the payment flow Copied

Only call startFlow if the method is available. You can pass the processor explicitly, or omit it if there's only one available.

{applePay.isAvailable && (
  <button
    onClick={() =>
      applePay.startFlow({
        processor: 'stripe', // or 'airwallex', or omit if only one
      })
    }
  >
    Apple Pay
  </button>
)}

Calling applePay.startFlow(params) inside <ElementsForm /> is functionally equivalent to calling form.generalSubmit('apple-pay', params) when using OpenPay.js.

Apple pay integration notes Copied

Apple Pay requires that you call applePay.startFlow() directly within a user gesture handler such as a click or onClick. This is enforced by the browser — violating it will result in Apple Pay failing silently or throwing an error.

To ensure a successful integration, follow these requirements:

✅ Do’s Copied

• Call applePay.startFlow() immediately inside a user-triggered event (e.g., a click or onClick).

• Ensure the event handler runs on the main thread (i.e., don't await anything before calling startFlow).

• Keep the triggering element (like a button) visible and mounted during the Apple Pay session.

❌ Don’ts Copied

• Wrap startFlow() in useEffect, setTimeout, or any async flow not triggered by a user.

• Do async work (like API calls) before calling startFlow().

• Unmount or hide the button while Apple Pay is still processing.

Example Copied

import { useApplePay } from '@getopenpay/openpay-js-react';

function ApplePayButton() {
  const applePay = useApplePay();

  const handleApplePayClick = () => {
    // ✅ Called immediately in user gesture
    applePay.startFlow();
  };

  return (
    <button onClick={handleApplePayClick}>
      Pay with Apple Pay
    </button>
  );
}