Square

Demo
​Bubble editor​
​Run mode page​
Credentials for demo page are username: username and password: password.
Square test card: Use 4111 1111 1111 1111, with an expiry date in the future, 111 for CVV (although it seems to accept any CVV) and any zip code.
Top level overview
Square's payment form tool is a Bubble element. There is also a Make Payment action, but this action can be set up using the API connector (and more easily customized) if desired.
Technical info
App-wide info
In order to use this plugin, app ID (a.k.a. client ID) should be set in the plugin's options.
To run payments with the plugin's "Make payment" action, a valid access token must be set in the plugin's options. If your use case doesn't allow for this, then set up an API connector action instead:
POST https://connect.squareupsandbox.com/v2/payments

{
"idempotency_key": "<Idempotency key>",
"amount_money": {
    "amount": <Amount>,
    "currency": "<Currency>"
},
"source_id": "<Source ID (Nonce)>",
"location_id": "<Location ID>",
"customer_id": "<Customer ID>",
"note": "<Description>"
}
Payment form element
Square requires that we use a javascript library and a specific HTML structure so that they can turn each input on the page into an iframe, for security purposes. This means that this element has a UI that must be defined with raw HTML and CSS rather than Bubble's UI.



Element inputs:
Digital wallet yes/no fields
Include Apple pay
Note that for this to even render, the domain needs to be verified. This is done by uploading a file to the root domain of the app, which is only possible on a paid Bubble plan, not an agency plan (as of March 2021).
Include Google pay
Include Masterpass
Sandbox (yes/no)
If "yes" when the form loads, it will render the sandbox version of the form.
Button text
Text to be displayed on the credit/debit card payment button
Styles (optional)
Styles for the default credit card inputs and button. If no styles are chosen, the default styles (shown above in a screenshot) will be used. 
See official documentation for more detailed info on which fields can be used, and the structure of this information (it must be a list of JSON objects). Contact [email protected] for assistance in setting up the JSON if needed.
Location ID (optional)
The ID of the location where the item is being purchased from.
Digital wallet styles (optional)
CSS that will be applied to the digital wallet buttons. The CSS that is added by the plugin to the page header includes some styles for these buttons.
The HTML for the Digital wallet (and the rest of the form, although the inputs' HTML is edited by the Square library, is: 
<div class="square-form-container">
    <div id="sq-walletbox">
        <button id="sq-google-pay" class="button-google-pay"></button>
        <button id="sq-apple-pay" class="sq-apple-pay"></button>
        <button id="sq-src" class="button-src"></button>
        <div class="sq-wallet-divider">
            <span class="sq-wallet-divider__text">Or</span>
        </div>
    </div>
    <div id="form-container">
        <div id="sq-card-number"></div>
        <div class="third" id="sq-expiration-date"></div>
        <div class="third" id="sq-cvv"></div>
        <div class="third" id="sq-postal-code"></div>
        <button id="sq-creditcard" class="button-credit-card" onclick="onGetCardNonce(event)">Pay $1.00</button>
    </div> <!-- end #form-container --> 
</div>
Setting up Apple pay
Element outputs:
Nonce (Source ID): The token of the payment that the user submits.

Resources - Previous

Credit Card Payments

Stripe Plugin

Last modified 1yr ago

Copy link

Outline