Demo to preview the plugin:
Introduction
The Apple & Google Pay Plugin gives you a single integration for Apple Pay,and Google Pay.
Customers see an Apple Pay button or a Google Pay button, depending on what their device and browser combination supports. If no option is available, they don’t see the button.
Prerequisites
- Stripe account
- Your Bubble app should be subscribed to Personal Plan (or upper)
Requirements
Apple Pay
Apple Pay is supported only by the Safari browser
- Safari on Mac running macOS Sierra or later, Mobile Safari on iOS 10.1 or later.
- iPhone (not iPad; Safari doesn’t support them yet) with a card in its Wallet paired to your Mac with Handoff, or a Mac with TouchID
- Make sure you’ve verified your domain with Apple Pay.
- At least one payment method is added to your browser. For example, you can save a card in Chrome, add a card to your Google Pay account or add a card to your Wallet for Safari.
- Serve your application over HTTPS. This is a requirement both in development and in production.
Google Pay
Google Pay is supported only by Chrome browser
- At least one payment method is added to your browser. For example, you can save a card in Chrome, add a card to your Google Pay account or add a card to your Wallet for Safari.
- Chrome 61 or newer
- An activated Google Pay card or a saved card
When using Google Pay with a test mode key, you might see an “Unrecognized app” warning. This is expected and doesn’t show up in live mode.
Verify your domain with Apple Pay
To use Apple Pay, you need to register with Apple all of your web domains that will show an Apple Pay button. This includes both top-level domains (for example, stripe.com) and subdomains (for example, shop.stripe.com).
Important note: Apple’s documentation for Apple Pay on the Web describes their process of “merchant validation”, which Stripe handles for you behind the scenes. You don’t need to create an Apple Merchant ID, CSR, and so on, as described in their documentation, and should instead just follow these steps:
1) Now get your app domain:
- Open your bubble app
- Open preview
- Copy URL of this page (Example:
https://innerspacenative.bubbleapps.io/version-test/apple_pay?debug_mode=true)
- Remove
https://and remove all paths
- Example of correct domain
innerspacenative.bubbleapps.io
Copy your domain
2) Open Stripe Apple Pay Settings
3) Add a new domain
4) After you pasted your domain click on “
Download verification file”
Save this file
5) Open your bubble app editor and go to
Settings app -> SEO / metatagsScroll the page until the bottom and find
Hosting files in the root directory
As file name use
.well-known/apple-developer-merchantid-domain-associationAs file use downloaded file
And save it
Deploy your app in live
Go to Stripe and click
Add in popup
If all is done correctly you will see your domain in the list
How to setup
1) Complete plugin fields
Go to Stripe and copy your Publishable Key
For testing use the test mode key
Paste this key in the plugins tab
Now open Stripe and go to
Devepoers -> API Keys
Copy your secret key
Paste your Secret key in the plugins tab
2) Setup backend workflow
Go to your bubble app editor and open
Backend workflowsCreate New API Workflow
Allow running without authentication and add two parameters
Parameter Key
Parameter Type
amount
number
currency
text
Now go to the Settings tab in your bubble app editor, open API section, and enable API workflow
Copy your
Workflow API root URL and paste it into the plugin element in the field PaymentIntent Endpoint
Modify this url: add
/your-endpoint-name at end of url (Example:/google_apple_pay) 
PaymentInent Endpoint: Once you are satisfied with your test environment, you can update the URL to make it go live, version-test → version-live
Return to the Backend and finish the workflow
Use action
Apple & Google Pay - Create PaymentIntent
Use endpoint parameters as action fields sources
The next add action
Return data from API
Add a new parameter to this action and name it
payment with type text
And return data from the first step
Now you can try to use Apple & Google Pay
Apple & Google Pay
This element is the pay button. Element detects the current user browser, checks if payment is possible, and displays Google or Apple Pay button.
Title
Description
Button Type
A type that indicates the button types that you can display to initiate Apple Pay transactions.
Button Style
A type that indicates the available appearances for an Apple Pay Button.
PaymentIntent Endpoint
Bubble endpoint on which PaymentIntent is generated
Payment Label
A required value that’s a short, localized description of the item.
Payment Amount
A required value that’s the monetary amount of the item.
Country
The two-letter country code of your Stripe account (e.g., US).
Currency
Three-character currency code (e.g., USD).
Request Payer Billing address
Use this parameter to collect the payer’s billing address for Apple Pay.
Request Payer Email
Use this parameter to collect the payer’s email address
Supported Types
- Google Pay
- Apple Pay
Supported Styles
- Google Pay
- Apple Pay
Exposed States
Name
Description
Type
Apple Pay is supported
Return Yes if Apple Pay is supported, and No if isn’t supported
Yes/No
Google Pay is supported
Return Yes if Google Pay is supported, and No if isn’t supported
Yes/No
Element Events
Name
Description
Payment Failed
Triggered when the payment is failed
On failed payment, the payment sheet is not closing automatically
Payment Success
Triggered when the payment is successful
Payment Cancelled
Triggered when a user cancels payment
Workflow example
Workflow example - is part of the plugin documentation which shows a couple (3-4 workflows) workflow steps Events and Actions (if available) for basic setup and how to start with the plugin with a description.
If a plugin is an API with authorization, we’ll show the steps on how to authorize workflow with a basic setup and describe it. If a plugin is a visual element and/or has actions/events we’ll show how to start and work with it.
Plugin Actions
Apple & Google Pay - Create PaymentIntent
Create and return Stripe PaymentIntent object
Title
Description
Amount
A required value that’s the monetary amount of the item.
Currency
Three-character currency code (e.g., USD).
Changelogs
In changelogs will be logged all the updates for the given plugin. With the date of publishing the update by admin and plugin Version, things that were changed/fixed/improved
Example:
Update: 07/22/2020 – Version 1.1.0
- fixed - Refresh a Table action
Update: 08/07/2020 – Version 1.2.0
- added - a new plugin element v2.0
Update: 18/03/2023 - Version 1.8.0
- added verification when payment is changed.
Update: 03/20/2023 - Version: 1.9.0
- Minor fixes