Embed Square Online Checkout Card Page

[TDinAZ]

Hello everyone- I am new to Blocs and trying to embed an object into a Blocs website.

I use the Square (Squareup.com) iPhone app to take payments from clients and they have a built-in online checkout link/page for items that you can send people to pay online. This link creates a nice looking card that would fit well into a website built on Blocs. Perhaps 2-3 of these “cards” in a column for different items. Another option would have this be embedded in a modal pop-up.

See the attached screenshot for one of the item cards generated by Square.

I have tried different iframe and css code combinations in a Code Widget Bric, but either the sizing/alignment of the card is messed up or the applepay/googlepay/checkout buttons break and don’t function in a preview or live site.

[PeteSharp]

So this is in an iframe?

Without seeing the structure you have in Blocs, Im taking a shot in the dark.

No doubt you have placed the Code Bric in a column?

What did you want it to look like?

[TDinAZ]

Hi @PeteSharp. Yes it is code widget bric inside a column. The code in the bric is for an iframe with css code for the dimension properties.

I found some css code examples related to embedding YouTube videos in responsive sites so it changes the size for the different breakpoints based on aspect ratio.

I am new to web design and not a coder, but I pick things up quickly, so I’ve been trying different versions of that kind of code I’ve found on the web.

Below is a link to a live test site. Right now, it “looks” kind of how I want. The code widget is in the left column for a large screen, and for comparison, I put a standard Blocs card Bric in the right column. There are still some sizing issues, as scroll bars appear on the left column in some size screens, but the biggest issue is the applepay/googlepay/checkout buttons don’t work when the code is embedded.

https://www.tdadventure.com/test/

Here is the code I am using in the bric:

<style>
.embed-container1 {
 position: relative;
 padding-bottom: 100%;
 height: 690px;
 overflow: hidden;
 max-width: 100%; 
}

.embed-container1 iframe, .embed-container1 object, .embed-container1 embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
</style>

<div class="embed-container1">
 <iframe src="https://checkout.square.site/buy/MKIMSPTEO5CKWY2DNLQ4GJA6" style="border:0" class=""></iframe>
</div>

[PeteSharp]

Hey @TDinAZ,

Seems to work fine for me. I don’t get the iFrame scroll bars. Have you cleared your browser cache?

Disregard that, Once you click check out I see what you mean.

[TDinAZ]

Hi, @PeteSharp. The iframe scroll bars are subtle. On full size screen (Mac) if you place the cursor right over the iframe and scroll there is a little extra part of the frame that scrolls, not much, but it is there.

On Safari (Mac and iOS), the ApplePay and GooglePay buttons do not show up. Also, the checkout button gives an error. Looks like you are seeing this.

On Chrome and Firefox, only the GooglePay button is present, no ApplePay. The checkout button does seem to work.

[PeteSharp]

Yeah there is an error for the ApplePay

[TDinAZ]

Ok. Any thoughts on better code to get this working on all browsers, especially Safari, given a lot of my clients are iPhone users?

[PeteSharp]

I don’t know, it won’t let me test it here locally. LOL. It did now Im blocked. Security issue.

[TDinAZ]

Ok. I wonder where the security block is coming from. Could be from square because you are outside the US?