search

JsssCode / SmallAwesomeShop

angular 7 + graphQL sample, backend - shopify storefront API
46 stars 7 forks source link

Can I show the web checkout in an angular component ? #6

Open bashome opened 5 years ago

bashome commented 5 years ago

Hi Jsss, First off ... Thank you so much for building this example ... it seems to be the only example I can find of building a Shopify shopping cart into an Angular app. (i.e. NOT an AngularJS app). I was able to get your code running with my storefront on myshopify account.

One thing I can't figure out how to do is put the shopify web checkout in an Angular component and show it in a dialog box or pop up ... or just show it as tab on the navbar next to the "My cart" router link.

My app is using Angular Material and it would really love to show the user a Material dialog popup to complete the check out ... but I can't figure out how to embed the WebUrl for the shopify checkout into an angular component to show it in a pop up or dialog.

Might you have any ideas or experience getting something like that to work ?? I tried just a simple "iframe" in a div ... but the checkout does not like that ... I don't have enough experience with Content Security Policies and the like to know if there is a way to get that to work.

Thanks again for making this repository and any and all pointers would be greatly appreciated. Brett.

JsssCode commented 5 years ago

Hello Brett. Great that my repo is useful! As I understand, you mean this link to Shopify checkout. image Don't have an idea about that. Next step - payment info, so don't think that this possible. But you could also ask about this here . Sincerely, Jsss

bashome commented 5 years ago

Hi Jsss, Thanks for the replay ... and yes that is exactly what I mean by the Shopify Web Checkout ... that page allows the buyer to enter their credit card, address, shipping details etc and manages the transaction with Shopify payments ... so I want to be able to put that in and iFrame or a Web Component so I can keep it as tab on my site and keep my header bar above it ... I will keep looking and see if I can figure out a way to show it in a web component and ask Shopify directly. Thanks again, Brett.

uzairdev97 commented 7 months ago

Hey @bashome did you figure out a way to show the checkout page in a angular web component. Any help would be highly appreciated. Thanks