[New Plugin] Square Card Form (Web Payments SDK) - By Interwebb

[phill.dev]

Hi All,

We’ve just released a new plugin, Square Card Form (Web Payments SDK)!

This Bubble 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.

You can the Square Payment Form (Web Payments SDK) plugin alongside the Square Seller Authentication (OAuth) plugin to allow your app to take payments on other sellers’ behalf and take an App Fee or a percentage of the transaction amount as developer income.

Demo - Try the plugin!

Plugin Page - Install on your app.

Documentation - Detailed set up instructions.

Support & Feedback

Please comment below if you have any questions, feedback or feature requests.

Thanks,

Phill

[phill.dev]

Just to note, we’re in the process of updating our other plugins to accept a Card Id.

Also, we’re testing out offering Free Trials, please fill in this form to get a 21-day free trial.

Any feedback is appreciated!

[chris.anderson]

@phill.dev I think the free trial form has some permissions settings to be changed as I’m getting the following error having clicked the link and then had to sign up to Zoho

[phill.dev]

@chris.anderson Thanks for letting me know, please try the link again. If it doesn’t work you can send me a private message and I’ll set up the free trial.

Thanks,

Phill

[chris.anderson]

Perfect, it’s working now. Please let me know once the free trial is available and I’ll install and test

[phill.dev]

@chris.anderson - Great, I’ve started your free trial - any questions let us know!

Thanks,
Phill

[chris.anderson]

Thanks @phill.dev , I’ve installed, setup and have successfully sent across a test transaction I now have questions as follows:

1. ZIP Code - Please see screenshots below under heading
2. Error: Cannot read property ‘id’ of undefined - Fixed (but I’ve left in here in case other people have the same issue)
3. In the workflow, there are two places to put the amount - create card token and create card payment. I assume these need to come from the same source / be the same or is one more relevant than the other?
4. Does the plugin come with a way to manage the response back from Square to obtain the relevant ID’s or does this need to be done manually with a backend workflow? The reason I ask is that on the Free Square Checkout plugin I’ve been testing, the returned values (checkout URL, Payment_link ID, etc) are available in the actions UI dropdown.
   4A. On that note, the response from the Free Square Checkout plugin returns a Payment Link ID but this isn’t provided in the webhook events triggered when payment is completed, so there is no way to match up the “draft” transaction and update it to be “open”. The payload sent from Square to the bubble webhooks contain Order ID and Payment ID. Order ID is in the full response from the Free Square Checkout plugin but isn’t available in the Action UI dropdown. Is this correct or should a backend workflow parse this? If this doesn’t make sense or you need more info, I’ll open a thread on the correct plugin page.
5. What would be your recommended way to direct the user to a success / failure page following the transatction being successfully sent to Square. At the minute, my test does send the payment but it remans on the screen and I’m unsure as to how to move the user along to a success page after all the necessary integrations have been completed

Zip Code
I cannot seem to get the card form to change to Postcode rather than Zip Code and this is mandatory for UK payments. As a Zip code I can only enter numerical values. I’ve setup the Location ID (From Square) in both the Plugin values but also in the “Square Payments - Create Card Payment” Action, just in case. I’ve also set the country code as per the ISO standard to GB to see if this prompted the change. Screenshots below

Error: Cannot read property ‘id’ of undefined - Fixed. Value was too low. Amount should be set in pennies, i.e. 500 for £5.00. It throws an ID error in bubble but the Square API logs show the problem.

I’ve completed all of the sandbox / Dev ID’s I can see but I’m getting this error in the screenshots below. It’s managing to give be a Source ID and a verification token so is getting so far but then hitting a problem. Are you able to advise on the root cause please?

Sorry, I know that’s a lot!

Lastly, from your roadmap, it would be great to see Android / Apple Pay in here

Well done so far!! Have a great weekend

[phill.dev]

Hi @chris.anderson - Thanks for the detailed response, I’ll do my best to answer your questions:

1. Zip Code - I believe the postal code/zip code is automatic based on the country the card was issued, try one of the EU card test values. We can reach out to Square support if you’re still having issues.

2. Glad you sorted it, it’s always worth checking the server logs to troubleshoot these errors.

3. Yes that’s correct that the amount you capture when creating a Card Token should match the amount to charge when using the Create Card Payment workflow action. I will update the documentation to make this more clear

4. Not sure I completely follow your issue here, but I’ll try my best to answer, if your question is related to Square Checkout please comment on the separate forum post so we can keep track of it. You should use the Square Checkout plugin if you want to use the Square hosted checkout to take payments and use the Square Web Payments SDK & Cards plugin to build your own checkout with more customizations such as delaying payments, taking an app fee, storing card details etc. Let me know what information/Ids you’d like returned from the Full Response and for which plugin action so that I can have a look at adding them as returned values when the workflow action has run.

5. When you use the Create Card Payment workflow action, it returns a Payment Status value that is ‘Success’ or ‘Failed’, I’d recommend using an alert or redirecting your user based on the returned value from the Create Card Payment within your workflow. For example, if Payment Status is “Success” open a confirmation page within your app.

I’m hoping this is helpful, let me know

Thanks,

Phill

[phill.dev]

@chris.anderson - Here is the info from Square regarding postal codes Web Payments SDK Overview (squareup.com)

[chris.anderson]

Thanks @phill.dev , much appreciated!!

Responses in line with the above as follows:

1. Sorry, yes well spotted. I was trying the first visa test values which must be US. The EU test cards (and my own) work fine.
2. Thanks, all sorted.
3. Thanks.
4. I’ll add more detail and screenshots to the correct plugin page (I’m currently evaluating web checkout link vs card SDK)
5. Sorry, I’m not sure how to do this with the plugin. The plugin makes the necessary API call to submit the request to Square but how do I capture the response, parse it and then use it navigate the user to the next screen? You’re correct in that I want to pull out Status from the response (but also Order ID and Receipt URL) but I don’t know how. Could you advise please? Request and response details below.

Request:

{
  "source_id": "[redacted]",
  "idempotency_key": "2d3q9wbcwzo64t2y3iharr",
  "amount_money": {
    "amount": 500,
    "currency": "GBP"
  },
  "app_fee_money": {
    "amount": 2,
    "currency": "GBP"
  },
  "autocomplete": true,
  "location_id": "LE7DZEDK4XTMQ",
  "verification_token": "verf:CBASEA7kb3jC3mI_q_YZsMnZN0s",
  "statement_description_identifier": "Tipz"

Response

{
  "payment": {
    "id": "vRlGJQrGG9DmY7Sq26ZdU10c14fZY",
    "created_at": "2022-07-23T12:14:43.757Z",
    "updated_at": "2022-07-23T12:14:43.988Z",
    "amount_money": {
      "amount": 500,
      "currency": "GBP"
    },
    "total_money": {
      "amount": 500,
      "currency": "GBP"
    },
    "app_fee_money": {
      "amount": 2,
      "currency": "GBP"
    },
    "approved_money": {
      "amount": 500,
      "currency": "GBP"
    },
    "status": "COMPLETED",
    "delay_duration": "PT168H",
    "delay_action": "CANCEL",
    "delayed_until": "2022-07-30T12:14:43.757Z",
    "source_type": "CARD",
    "card_details": {
      "status": "CAPTURED",
      "card": {
        "card_brand": "VISA",
        "last_4": "1111",
        "exp_month": 11,
        "exp_year": 2022,
        "fingerprint": "sq-1-zLlRG7bHnmpdyDIsi5iZn0p9g31eF0v88YFfsppNXdWzPr_wmZ4xN-P5pG2svVNTVQ",
        "card_type": "CREDIT",
        "prepaid_type": "NOT_PREPAID",
        "bin": "411111"
      },
      "entry_method": "KEYED",
      "cvv_status": "CVV_ACCEPTED",
      "avs_status": "AVS_ACCEPTED",
      "statement_description": "SQ *DEFAULT TEST ACCOUNT",
      "card_payment_timeline": {
        "authorized_at": "2022-07-23T12:14:43.866Z",
        "captured_at": "2022-07-23T12:14:43.989Z"
      }
    },
    "location_id": "LE7DZEDK4XTMQ",
    "order_id": "PcAYviBk4ZF03liIOx0Du5x8oUFZY",
    "statement_description_identifier": "Tipz",
    "receipt_number": "vRlG",
    "receipt_url": "https://squareupsandbox.com/receipt/preview/vRlGJQrGG9DmY7Sq26ZdU10c14fZY",
    "application_details": {
      "square_product": "ECOMMERCE_API",
      "application_id": "xxx"
    },
    "version_token": "Lh7gCGoMTNBgv4KeB9NTQnnWPIC0v6bZLTZbwCGiqOv6o"
  }
}

[phill.dev]

Hi @chris.anderson - I’ve pushed an update (1.1.0) which includes the Receipt Url and Order Id as returned values when you run the Create Card Payment workflow action.

I hope this solves your problem, let me know if you have any issues!

Feel free to request a trial of the premium version of the Square Checkout plugin if you want to test it’s full functionality.

Thanks,

Phill

[chris.anderson]

Perfect, thanks @phill.dev. Yes this is what I needed. I’ll test this and compare usability with the full Checkout plugin I’ve now purchased. I’ve left you a comment on that plugin page too as it would be great to have these values available in that plugin as well

Thanks again

[zach8]

Hey Phill, thanks for putting in so much time on all these useful square products. I’m hoping you can help me sort out which plugin might be able to do what I’m looking for.

I’m going to use my bubble database to handle all of the front end of the e-comm–copy, images, associated data types, etc, and use my square for the payments. And then I was wondering if it’s possible to streamline the workflow, add a little more info to my db entries–like price and quantity–and let bubble and Square talk to each other through some kind of api or something?

Would it be possible to accomplish this with any of your products?

[phill.dev]

Hi @zach8 ,

Yep, that sounds like the exact use case for our Square plugins. You can set up products and prices in your Bubble database and feed that info into the plugin workflow actions dynamically to take payments; this is what we’ve done in the Square Checkout demo.

Thanks,

Phill

[phill.dev]

Hi Everyone,

Slight name change from Square Web Payments SDK & Cards to Square Payment Form (Web Payments SDK).

Thanks,

Phill

[zach8]

Thanks for the response Phill. One more question, does Square checkout also use the API to update inventory? If I use Swuare Checkout to connect my site to the Square POS, will the site update the inventory count in the POS, and “reject” sales when the POS has zero inventory available?

[phill.dev]

Hi @zach8, The Square Online Checkout plugin doesn’t use the Inventory API in the plugin code directly although it’s on our roadmap to build a separate Square Inventory & Catalog plugin.

We do have a Square POS (In-Person Payments) plugin for Point of Sale scenarios.

I’d recommend reaching out to Square Developer Support to ask how these APIs work with the inventory amounts as I’m not 100% sure and don’t want to give incorrect information.

Hope that helps

Phill

[zach8]

Hi Phill, thanks again for your reponse. Just so I’m clear: if I use your plugin to take payment for an item on my bubble app, your plugin will connect to Square to process the payment, but it won’t update Square’s inventory count for the products being sold?

[phill.dev]

Hi @zach8, just thought I’d put a link here to reference my response on the other forum post.

[New Plugin] Square Checkout - By Interwebb

Hi @zach8, I’m continuing our conversation here as my reply is related to the Square Online Checkout plugin. I’ve tested processing a payment using the Create Order Payment Link action using a Catalog/Inventory item in the Line Items List. I can confirm that this did reduce the item’s stock in my test account. Feel free to reach out to Square Support or check their documentation if you’d like to understand how their APIs work. Our Square plugins are available to help make it easy for you to i…

Let me know if you have any other questions.

Thanks,

Phill

[yubikiri.app]

Hi @phill.dev - I started using it and have one question.

I can use “create card payment” and ”save card”, but I don’t know how to use a saved card to make a payment without entering the card information at the next payment.
Cloud you tell me how to do ?