Square Card Form (Web Payments SDK)
Last updated
Was this helpful?
Last updated
Was this helpful?
This Bubble.io plugin will allow you to embed the Square Web Payments SDK Card Payment Form anywhere in your app to enable you to capture and verify card details to take payments and save cards on file for your customers.
API Reference
3D Secure (Strong Customer Authentication in the EEA) is used to verify the buyer and reduce the chance of fraudulent transactions. When a card is entered into the payment form and it requires verification, a pop-up is shown to allow additional authentication such as a 6-digit code. This step is required in the EU and UK or if using Square Risk Manager.
When a card is captured using the Square Payment Form, it is tokenized and the card token is used once to create a payment or store a card on file in the next workflow action.
Once a card has been successfully tokenized after a user has pressed the Square Payment Form button, the Card Token (source Id) and Verification Token (if using SCA) are published as states attached to the payment form element.
As a form of developer income, when your app is taking payments on another seller's behalf using a token from the Square Seller Authentication (OAuth) plugin, you can choose to take a fee from the Square seller's payment at the time it is processed, much like the percentage fee Square takes from all payments processed through their platform.
Payments can be processed but delayed and set to an APPROVED state, which gives you the opportunity to update or cancel them before they are captured and set to a COMPLETED or CANCELLED state.
Add the Square Payment Form element to a page in your app.
On the same page, create a workflow triggered by the event 'A Square Payment Form button clicked'.
Add the element workflow action 'Create Card Token (Source Id) From a Square Payment Form' as the first step of the workflow.
Note: Set the Intent field to CHARGE to take a payment and STORE if you are going to save the card on file for a customer to use later.
Create another event triggered by 'Do when condition is true' where the condition is the Square Payment Form's Token Id (Source Id) is not empty.
Add the Square Payments - Create Card Payment workflow action to your workflow and use the Card Token (Source Id) from the Square Payment Form element in the Source Id field.
(Optional) If using SCA verification, include the Verification Token within your Create Card Payment workflow action.
Note: If taking a payment with a saved card on file, use the customer's Card Id as the Source Id.
Add the Square Cards - Save Card workflow action to your workflow and use the Card Token (Source Id) from the Square Payment Form element in the Source Id field.
Use the Square Customers plugin to create a customer and add their Square Customer Id into the Create Card workflow action.
(Optional) If using SCA verification, include the Verification Token within your Create Card Payment workflow action.
A form that can be added to any page in your app, to accept card details, verify the owner and publish tokens to the exposed element states Token (Source Id) and Verification Token. The form button label can be changed dynamically.
Tokenizes the card details and verifies the owner (If card verification is checked) and publishes the Token and Verification Token.
Clears the Card Token (source Id) state and sets the payment button to 'enabled' so that another payment can be made without refreshing the page.
Starts a workflow when the payment button is clicked.
Starts a workflow when an error occurs within the Square Card Form element.
The ID for the source of funds for this payment. This is used as the Source Id in the Create Payment workflow action.
An identifying token generated by the 3-D secure challenge (SCA). This is used in the Create Payment workflow action.
If an error occurs with the element, it will produce an error message.
Creates a new payment using the card token generated from the Square Payment Form.
Edit a pending payment that is in an APPROVED state.
Set a pending payment from an APPROVED to a CANCELLED state and void the transaction.
Set a pending payment from an APPROVED to a COMPLETED state and complete the transaction.
Saves a card on file for a customer using the Card Token or Payment Id as the Source Id and the customer's Id from the Square Customers plugin.
List a customer's cards on file.
Retrieve card details using the Card Id.
There is a maximum amount that can be processed for each payment transaction set by Square, for example, $50,000, please check the Square documentation.
Retrieve Payment.
Dark mode style.
CASH and EXTERNAL payment types.
Google Pay, Apple Pay and more payment methods.
Integrate with Square Orders.
Tips.
Disable card.
ACH Payments
Please see the
