Apple & Google Pay Plugin

Link to plugin page:

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
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
Image without caption
3) Add a new domain
Image without caption
Image without caption
4) After you pasted your domain click on “Download verification file
Image without caption
Save this file
5) Open your bubble app editor and go to Settings app -> SEO / metatags
Scroll the page until the bottom and find Hosting files in the root directory
Image without caption
As file name use .well-known/apple-developer-merchantid-domain-association
As file use downloaded file
And save it
Deploy your app in live
Go to Stripe and click Add in popup
Image without caption
If all is done correctly you will see your domain in the list
Image without caption

How to setup

1) Complete plugin fields

Go to Stripe and copy your Publishable Key
Image without caption
For testing use the test mode key
Paste this key in the plugins tab
Image without caption
Now open Stripe and go to Devepoers -> API Keys
Image without caption
Copy your secret key
Image without caption
Paste your Secret key in the plugins tab
Image without caption

2) Setup backend workflow

Go to your bubble app editor and open Backend workflows
Create New API Workflow
Image without caption
Allow running without authentication and add two parameters
Parameter Key
Parameter Type
amount
number
currency
text
Image without caption
Now go to the Settings tab in your bubble app editor, open API section, and enable API workflow
Image without caption
Copy your Workflow API root URL and paste it into the plugin element in the field PaymentIntent Endpoint
Image without caption
Modify this url: add /your-endpoint-name at end of url (Example:/google_apple_pay)
Image without caption
Return to Backend and finish workflow
Image without caption
Use action Apple & Google Pay - Create PaymentIntent
Image without caption
Use endpoint parameters as action fields sources
Image without caption
The next add action Return data from API
Image without caption
Add a new parameter to this action and name it payment with type text
Image without caption
Image without caption
And return data from the first step
Image without caption
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.
Image without caption

Supported Types

  • Google Pay
    • Image without caption
  • Apple Pay
    • Image without caption

Supported Styles

  • Google Pay
    • Image without caption
  • Apple Pay
    • Image without caption
Exposed States

Element Events

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
Image without caption

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

Demo to preview the plugin:

Live Demo:
Bubble Editor: