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 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:

<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 ("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.

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 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.