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.

Copied