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.