[Free Plugin] Square Checkout (Free) - By Interwebb

[phill.dev]

Hi All,

We’ve just released a new FREE version of our Square Checkout plugin, Square Checkout (Free)!

The FREE version of our Square Checkout plugin that allows you to easily take card payments using a Square-hosted quick payment checkout page.

The checkout can be integrated into any payments workflow with minimal set-up. You can also configure a URL for customers to be redirected to once they complete their purchase.

This free plugin is intended to get you started with taking payments using Square, please use our full Square Checkout plugin for more configuration options including, Google/Apple pay, tips, taxes, service charges collecting shipping information, orders with multiple items, OAuth and more.

Additional Information

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

[chris.anderson]

Hi Phil / @phill.dev ,

I’m just testing this with the free version before I buy the plugin. I’m getting an error which I cannot overcome. I’ve compared my setup with your demo setup and cannot see anything obvious. Please can you help? Details and screenshots below.

Error:

My Plugin Setup (access codes hidden)

Create Link:

Open External URL:

The only thing I can see different between mine and your demo is that the action box on your demo has more info at the top and an API button at the bottom. I only installed your plugin today so I’m assuming I have the latest.

Thanks in advance,

[phill.dev]

hi @chris.anderson,

Sorry you’re having trouble with the plugin, hopefully I can help get this sorted right away.

Can you please see what the error is in the server-side logs when you run the create quick payment link action? Guide here: Troubleshooting & Support - Interwebb Bubble.io Plugins

The plugin looks slightly different as we’ve been updating some of the documentation so please consider using the latest version.

One final note, If you want to use the in-built tipping feature, you can add tips to the Square checkout using the premium full version of the Square Checkout plugin.

Many thanks,

Phill

[chris.anderson]

Hi Phill,

Thanks I run the extra logs and spotted the problem. The currency code was case sensitive. I used “gpb” and it should have been “GBP”. Seems to be working now.

Does your premium version have a way to embed the checkout process into a Bubble Screen, rather than launching an external tab / page either using an iFrame plugin or similar? The native embed checkout from Square doesn’t look great to be honest (unless I’m doing something wrong) when I embed into a html element.

Point noted on the tipping functionality, I’ll check it out when I buy the premium plugin.

Thanks for your help

[phill.dev]

@chris.anderson that’s great, I’m glad you solved the issue

You can test the tipping functionality in the demo, although I’ve just double-checked and noticed some issues with the demo checkout, I’ll have a look at fixing that shortly.

The Square checkout isn’t designed to be embedded into a web page, however, we’ve not long submitted a new Square plugin, Square Web Payments & Cards that allows you to embed a card input form element and uses the Square Web Payments SDK to take payments, once the Bubble engineers have approved it I’ll be sure to post here so you can have a look.

Thanks,

Phill

[chris.anderson]

The SDK plugin sounds great, look forward to the updates. I’ll continue testing with the web page in the interim. Thanks

[phill.dev]

Hi @chris.anderson,

As promised, here is the new Square Web Payments SDK & Cards plugin!

Thanks,

Phill

[chris.anderson]

Hi @phill.dev,

Following on from point 4 on the other page

When I launch the checkout page I also want to record the transaction in my database so I have an action (screenshot below) which does this. This action also records the Payment Link ID provided by the plugin - referenced as Payment ID in the Bubble workflow UI - so that I have a reference for any webhook events sent from Square later. In this example: LTMGWIPZ7LHS7NM4

Payment Link ID and Payment ID are different things and when the payment is completed in the external page, Square triggers two webhook events for “Order Update” and “Payment Update”. I want to use these to update the status of my transaction in my database.

However, Payment Link ID isn’t provided by either of these events so there’s no way to match the webhook event to the transaction in the database.

For POST /v2/online-checkout/payment-links the response does contain Order ID (see below). So my question was, could your plugin expose the Order ID in the Bubble Workflow ID in addition to what it already provides? If not or in the interim, I note that the “full response” is also available. How would I parse / extract the Order ID from this response myself?

Thanks in advance

Checkout Response

{
  "payment_link": {
    "id": "LTMGWIPZ7LHS7NM4",
    "version": 1,
    "order_id": "bQJdDFZkowZjSOlERHqs3tcmrjYZY",
    "checkout_options": {
      "redirect_url": "https://tipperapp.bubbleapps.io/version-test/success/test7",
      "merchant_support_email": "support@tipz.com"
    },
    "url": "https://sandbox.square.link/u/C4yIPnKS",
    "created_at": "2022-07-22T15:32:26Z",
    "payment_note": "Payment Note"
  }
}

order.updated payload

{
  "merchant_id": "MLWDQSVZ7NHVM",
  "type": "order.updated",
  "event_id": "d1f2fffd-a698-42bd-8822-6d30a9ca7512",
  "data": {
    "id": "PcAYviBk4ZF03liIOx0Du5x8oUFZY",
    "object": {
      "order_updated": {
        "created_at": "2022-07-23T12:14:43.472Z",
        "location_id": "LE7DZEDK4XTMQ",
        "order_id": "PcAYviBk4ZF03liIOx0Du5x8oUFZY",
        "state": "COMPLETED",
        "updated_at": "2022-07-23T12:14:46.000Z",
        "version": 4
      }
    }
  }
}

[phill.dev]

Hi @chris.anderson - thanks for the detailed explanation,

I will update the returned value name from Payment Id to Payment Link Id to help avoid confusion in the future.

If I have understood correctly, I’m not sure what you are trying to achieve is possible with the Square hosted Checkout. The Payment Id is only generated when a Square hosted Checkout is paid (completed) and not when a Payment Link is generated. Because of this, the Payment Id is not available to be returned from the plugin’s Create Quick Payment Link workflow action.

As this is the free version of the Square Checkout plugin, it is very basic and the Order Id is not returned as a value to use in the workflow, you can use the full Square Checkout plugin as it will return the Order Id when a Payment Link/Square hosted Checkout is created.

In the background, we’ve been building a Square Orders plugin that will have an action to retrieve and Order using its Id, this will include the Order’s Payment Id. The plugin is fairly complex so I won’t be able to give you a release date.

Hope this helps,

Phill

[chris.anderson]

Thanks @phill.dev , I’ve purchased the full Square checkout plugin now. However, using the latest version there is still no Order ID returned (Screenshot below) as described above. Am I missing something here?

I can see you’ve done this for the Card Web SDK plugin in your latest response and I’ve upgraded to the latest version to test that plugin separately.

If possible, could you please include the status, receipt url and order ID in the returned values for this plugin too, so we can use them in the workflow editor? This will allow me to use the webhooks provided by Square to match up the transactions in the database using Order ID, so the status can be updated.

Thanks for responding to my queries so quickly!

[phill.dev]

Hi Everyone,

This free plugin has now been retired so that we can focus on updating our other Square plugins, to process payments using Square please use the Square Online Checkout plugin or Square Card Form (Web Payments SDK) plugin.

Existing apps using the plugin will not be impacted, however, no further updates will be released.

Thanks,

Phill