---
updatedAt: 2025-06-04T21:10:26.000Z
agentTools:
  projectIndex: https://developer.fundraisingbox.com/llms.txt
---

# Apple Pay / Google Pay processing

Apple Pay and Google Pay work with native browser overlays, which are triggered automatically by the FundraisingBox Form-API. These payment methods are **NOT** available on all browsers - Apple Pay is only available in Safari and Google Pay only in Chrome. Also, users must have a card in their Apple Pay or Google Pay wallet.\
For the best user experience, only available payment methods should be shown.\
But don't worry, the FundraisingBox Form-API can take care of this and show or hide Apple Pay or Google Pay in your form automatically.

> 🚧 Apple Pay domain registration
>
> Important note: you have to register **EVERY** domain on which you want to provide Apple Pay in a Form-API form. Please see our [article in our Help-Center](https://support.fundraisingbox.com/de/support/solutions/articles/79000127332-apple-pay-aktivieren) for more information.

## Recommendation

We recommend to show payment icons as a selection for your users. The payment icons for Apple Pay and Google Pay can be automatically toggled by the Form-API. By default, the Form-API toggles the visibility of the elements with the IDs "fb\_payment\_method\_apple\_pay" and "fb\_payment\_method\_google\_pay".

**Code example:**

```html
<div id="paymentmethods">
  <!-- APPLE PAY -->
  <div id="fb_payment_method_apple_pay" class="paymentmethod">
    <input type="radio" name="payment[payment_method]" id="stripe_apple_pay" value="stripe_apple_pay">
    <label for="stripe_apple_pay" class="apple_pay"><span>Apple Pay</span></label>
  </div>
  <!-- GOOGLE PAY -->
  <div id="fb_payment_method_google_pay" class="paymentmethod">
    <input type="radio" name="payment[payment_method]" id="stripe_google_pay" value="stripe_google_pay">
    <label for="stripe_google_pay" class="google_pay"><span>Google Pay</span></label>
  </div>
  <!-- OTHER PAYMENT METHODS -->
  <div class="paymentmethod">
    <input type="radio" name="payment[payment_method]" id="wikando_direct_debit" value="wikando_direct_debit">
    <label for="wikando_direct_debit" class="direct_debit"><span>Lastschrift</span></label>
  </div>
  ...
</div>
```

> 📘 Custom Selectors
>
> You can specify your own custom selectors for the elements, e.g. a class like ".applePayElements". In this case you have to provide these selectors in the [Form-API constructor options](https://developer.fundraisingbox.com/reference/form-api#constructor-options) ("applePayElement" and "googlePayElement")

## The walletPayReady-Event

Checking whether Apple Pay or Google Pay are available on a user's device can take a short amount of time. We recommend to have an event listener on the walletPayReady event to e.g. hide the loading overlay or to show/hide the payments, if you need to handle it by yourself.

```javascript
myForm = $("#form").fundraisingBoxForm({
  hash: "{your_form_hash}",
});

myForm.on('fundraisingBox:walletPayReady', function (_event, paymentMethods) { 
  // make sure apple pay and google pay are active in your form, otherwise you have to check first if these payments are even available in your form.
  
  if (paymentMethods.stripe_apple_pay.can_make_payment) {
    // e.g. show Apple Pay Logo
  }
  if (paymentMethods.stripe_google_pay.can_make_payment) {
    // e.g. show Google Pay Logo
  }
  ...
  // now hide your loading overlay
});
```

The data of the event provides the updated [payment methods](https://developer.fundraisingbox.com/reference/form-api-functions#section-getpaymentmethods-) with the property "can\_make\_payment" for stripe\_apple\_pay and stripe\_google\_pay. This attribute indicates whether the payment is available on the user's device.