Pay with AfterPay/ClearPay

OpenPay provides AfterPay 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(...)

Accessing AfterPay from <ElementsForm />

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

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

AfterPay object shape

afterpay object has the following structure:

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

Starting the payment flow

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

{afterpay.isAvailable && (
  <button
    onClick={() =>
      afterpay.startFlow()
    }
  >
    Pay with AfterPay/ClearPay
  </button>
)}

Calling afterpay.startFlow(params) inside <ElementsForm /> is functionally equivalent to calling submitWith('afterpay', params) when using OpenPay.js.