Apple & Google Pay Plugin

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
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
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
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
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
    • Image without caption
  • Apple Pay
    • Image without caption

Supported Styles

  • Google Pay
    • Image without caption
  • Apple Pay
    • Image without caption
Exposed States
State 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
Image without caption
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: 03/18/2023 - Version 1.8.0

  • added verification when payment is changed.

Update: 03/20/2023 - Version: 1.9.0

  • Minor fixes

Update: 07/24/2023 - Version: 1.12.0

  • Added "payment intent ID" state for element.

Update: 08/02/2023 - Version: 1.13.0

  • Upgrade to node18.

Update: 08/22/2023 - Version: 1.14.0

  • added comma recognition as a decimal separator.
This update was dedicated to implementing the ability to use decimal numbers. Once you upgrade to this version, you have to change a bit your action setup. On this version, you don’t have to multiply by 100 the decimal value you have from the Input element, etc.:
Image without caption
Note, the input content format should be text:
Image without caption

Update: 09/25/2023 - Version: 1.18.0

  • Added "Subscription" element, Customer, Product, Price, Subscription creating actions.

Update: 10/10/2023 - Version: 1.19.0

  • Added "Request Payer Address" field in "Apple & Google Pay" element

Update: 20/10/2023 - Version: 1.21.0

  • Added "Delivery Title" and "Delivery Price" fields

Update: 23/10/2023 - Version 1.22.0

  • Fixed “Create Payment Intent” action

Update: 09/11/2023 - Version 1.23.0

  • Completely changed Subscription element, added "Retrieve Product", "Retrieve Price", "Create Subscription", and fixed the “Create PaymentIntent” action.