{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Apple Pay / Google Pay processing","type":"basic","slug":"apple-pay-google-pay-processing","excerpt":"","body":"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.\nFor the best user experience, only available payment methods should be shown.\nBut 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.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Apple Pay domain registration\",\n  \"body\": \"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/article/apple-pay-aktivieren-494.html) for more information.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Recommendation\"\n}\n[/block]\nWe 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\".\n\n**Code example:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"paymentmethods\\\">\\n  <!-- APPLE PAY -->\\n  <div id=\\\"fb_payment_method_apple_pay\\\" class=\\\"paymentmethod\\\">\\n    <input type=\\\"radio\\\" name=\\\"payment[payment_method]\\\" id=\\\"stripe_apple_pay\\\" value=\\\"stripe_apple_pay\\\">\\n    <label for=\\\"stripe_apple_pay\\\" class=\\\"apple_pay\\\"><span>Apple Pay</span></label>\\n  </div>\\n  <!-- GOOGLE PAY -->\\n  <div id=\\\"fb_payment_method_google_pay\\\" class=\\\"paymentmethod\\\">\\n    <input type=\\\"radio\\\" name=\\\"payment[payment_method]\\\" id=\\\"stripe_google_pay\\\" value=\\\"stripe_google_pay\\\">\\n    <label for=\\\"stripe_google_pay\\\" class=\\\"google_pay\\\"><span>Google Pay</span></label>\\n  </div>\\n  <!-- OTHER PAYMENT METHODS -->\\n  <div class=\\\"paymentmethod\\\">\\n    <input type=\\\"radio\\\" name=\\\"payment[payment_method]\\\" id=\\\"wikando_direct_debit\\\" value=\\\"wikando_direct_debit\\\">\\n    <label for=\\\"wikando_direct_debit\\\" class=\\\"direct_debit\\\"><span>Lastschrift</span></label>\\n  </div>\\n  ...\\n</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Custom Selectors\",\n  \"body\": \"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](doc:form-api#constructor-options) (\\\"applePayElement\\\" and \\\"googlePayElement\\\")\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"The walletPayReady-Event\"\n}\n[/block]\nChecking 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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"myForm = $(\\\"#form\\\").fundraisingBoxForm({\\n  hash: \\\"{your_form_hash}\\\",\\n});\\n\\nmyForm.on('fundraisingBox:walletPayReady', function (_event, paymentMethods) { \\n  // 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.\\n  \\n  if (paymentMethods.stripe_apple_pay.can_make_payment) {\\n    // e.g. show Apple Pay Logo\\n  }\\n  if (paymentMethods.stripe_google_pay.can_make_payment) {\\n    // e.g. show Google Pay Logo\\n  }\\n  ...\\n  // now hide your loading overlay\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe data of the event provides the updated [payment methods](doc: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.","updates":[],"order":999,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"60ad69c045da260074558a7a","createdAt":"2021-05-25T21:18:56.343Z","user":"5720c075db52d01700f5d1e4","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Form-API (Enterprise)","slug":"form-api-jquery-plugin","order":3,"from_sync":false,"reference":false,"_id":"57e104db9ff1e21900a721ab","__v":1,"createdAt":"2016-09-20T09:43:55.998Z","version":"571f5e8cd8667f0e00a3c49b","project":"571f5e8cd8667f0e00a3c498"},"version":{"version":"1","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["571f5e8cd8667f0e00a3c49c","571f73cfcb4baa0e00d13a80","571f7451cb4baa0e00d13a88","571f7d2720695f3400f38797","571f7fb0ac2a080e0014c661","571f884be54f2d0e003ebb0a","572200c9ecb38d0e00d80ebd","572c301e7c8eff0e00aaa174","57df91b2c6348d0e0020c452","57e104db9ff1e21900a721ab","57fd04caeaa77f19008b8202","5899c7113514ce0f0014da84","5cbeda4b862d090013abd413","5e60d6278f8b380072f0b1e3"],"_id":"571f5e8cd8667f0e00a3c49b","hasDoc":true,"releaseDate":"2016-04-26T12:26:52.312Z","__v":14,"hasReference":true,"createdAt":"2016-04-26T12:26:52.312Z","project":"571f5e8cd8667f0e00a3c498"},"project":"571f5e8cd8667f0e00a3c498","__v":0}

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. [block:callout] { "type": "warning", "title": "Apple Pay domain registration", "body": "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/article/apple-pay-aktivieren-494.html) for more information." } [/block] [block:api-header] { "type": "basic", "title": "Recommendation" } [/block] 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:** [block:code] { "codes": [ { "code": "<div id=\"paymentmethods\">\n <!-- APPLE PAY -->\n <div id=\"fb_payment_method_apple_pay\" class=\"paymentmethod\">\n <input type=\"radio\" name=\"payment[payment_method]\" id=\"stripe_apple_pay\" value=\"stripe_apple_pay\">\n <label for=\"stripe_apple_pay\" class=\"apple_pay\"><span>Apple Pay</span></label>\n </div>\n <!-- GOOGLE PAY -->\n <div id=\"fb_payment_method_google_pay\" class=\"paymentmethod\">\n <input type=\"radio\" name=\"payment[payment_method]\" id=\"stripe_google_pay\" value=\"stripe_google_pay\">\n <label for=\"stripe_google_pay\" class=\"google_pay\"><span>Google Pay</span></label>\n </div>\n <!-- OTHER PAYMENT METHODS -->\n <div class=\"paymentmethod\">\n <input type=\"radio\" name=\"payment[payment_method]\" id=\"wikando_direct_debit\" value=\"wikando_direct_debit\">\n <label for=\"wikando_direct_debit\" class=\"direct_debit\"><span>Lastschrift</span></label>\n </div>\n ...\n</div>", "language": "html" } ] } [/block] [block:callout] { "type": "info", "title": "Custom Selectors", "body": "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](doc:form-api#constructor-options) (\"applePayElement\" and \"googlePayElement\")" } [/block] [block:api-header] { "title": "The walletPayReady-Event" } [/block] 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. [block:code] { "codes": [ { "code": "myForm = $(\"#form\").fundraisingBoxForm({\n hash: \"{your_form_hash}\",\n});\n\nmyForm.on('fundraisingBox:walletPayReady', function (_event, paymentMethods) { \n // 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.\n \n if (paymentMethods.stripe_apple_pay.can_make_payment) {\n // e.g. show Apple Pay Logo\n }\n if (paymentMethods.stripe_google_pay.can_make_payment) {\n // e.g. show Google Pay Logo\n }\n ...\n // now hide your loading overlay\n});", "language": "javascript" } ] } [/block] The data of the event provides the updated [payment methods](doc: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.