shopify / checkout-sheet-kit-swift Goto Github PK
View Code? Open in Web Editor NEWShopify’s Checkout Sheet Kit makes it simple to perform a checkout inside your Swift native app.
License: MIT License
Shopify’s Checkout Sheet Kit makes it simple to perform a checkout inside your Swift native app.
License: MIT License
Test issue to ensure issue notifications are being received
Checkout Sheet Kit
3.0.0
No response
In many cases when the preload
method is called, the user is sent an OTP code for shop pay despite not yet opening the checkout view controller. This is disconcerting to the user, who is not expecting to get an SMS at this point and has nothing visible to use it for.
Steps to reproduce:
ShopifyCheckoutSheetKit.preload
again (e.g. adding something to the cart)Nothing happens visibly, checkout sheet preloads in background
I receive a text message of the format "123456 is your Shop verification code"
yaysay.myshopify.com
Test
Hi, I'm trying to use this SDK in a SwiftUi app. Since this view appears to be a UIKit one, I wrapped in it a UIViewControllerRepresentable
to be used in Swiftui.
struct CheckoutView: UIViewControllerRepresentable {
let url: URL
func makeCoordinator() -> Coordinator {
return Coordinator(self)
}
func makeUIViewController(context: Context) -> UIViewController {
let viewController = UIViewController()
return viewController
}
func updateUIViewController(_ viewController: UIViewController, context: Context) {
ShopifyCheckout.present(checkout: url, from: viewController, delegate: context.coordinator)
}
class Coordinator: NSObject, CheckoutDelegate {
var parent: CheckoutView
init(_ checkoutView: CheckoutView) {
parent = checkoutView
}
func checkoutDidFail(error: CheckoutError) {
}
func checkoutDidComplete() {
}
func checkoutDidCancel() {
}
}
}
However when I try to present this view as a modal sheet like below,
VStack {
// ...
}
.sheet(isPresented: $cartViewModel.isShowingCheckoutView) {
CheckoutView(url: cartViewModel.cart!.checkoutURL)
}
I get the following error.
Attempt to present <UINavigationController: 0x10513ae00> on <UIViewController: 0x104e0b860> (from <UIViewController: 0x104e0b860>) whose view is not in the window hierarchy.
Not sure what might be the issue. An example on how to use this SDK in SwiftUI in the docs would be nice.
Thank you!
Update 1
I looked at how view controllers are displayed in SwiftUI. This example shows how it's done for MFMailComposeViewController
. As you can see, the view controller is configured in the makeUIViewController()
method and SwiftUI automatically handles the presenting part.
I think the current way of showing the checkout view controller might have to be re-written to support both UIKit and SwiftUI. Maybe exposing the internal CheckoutViewController
?
Checkout Sheet Kit
2.0.1
No response
Not able to change Pay Now Button Color with Existing Properties
There should be a property to change button Pay Now Color
Not able to change Pay Now Button Color with Existing Properties
Checkout Sheet Kit
2.0.1
No response
Camera should open normal Camera to take pictures of ID instead of opening Live Broadcast Video.
When Opening camera on checkout it opens Live broadcast video instead of Camera to take picture of ID on Tamara.
No response
In the checkout process, the package currently uses the present
ViewController method, which presents the checkout as a card by default.
However, this card-style presentation allows users to swipe it down during checkout easily and interrupt the checkout.
It would be highly beneficial if we could have control over the modalPresentationStyle
and the isModalInPresentation
properties to either display it in full-screen mode or prevent it from being dismissed by swiping.
Checkout Sheet Kit
3.0.0
No response
Building the cart and checkout URL via:
let linesInput: [Buy.Storefront.CartLineInput] = [
.create(merchandiseId: GraphQL.ID(rawValue: productId), quantity: .value(Int32(quantity)))
]
let cartInput = Storefront.CartInput.create(
lines: .value(linesInput)
)
let createCartMutation = Storefront.buildMutation { $0
.cartCreate(input: cartInput) { $0
.cart { $0
.id()
.checkoutUrl()
}
}
}
let mutateTask = shopifyClient.mutateGraphWith(createCartMutation) { response, error in
if let error = error {
print("Error creating cart: \(error.localizedDescription)")
return
}
guard let cart = response?.cartCreate?.cart else {
print("No cart found in response")
return
}
print("Cart Id, url: \(cart.checkoutUrl)")
DispatchQueue.main.async {
self.checkoutURL = cart.checkoutUrl
self.isPresented = true
}
}
mutateTask.resume()
Combined with showing the Sheet via:
` .sheet(isPresented: $isPresented) {
if let url = checkoutURL {
CheckoutSheet(checkout: url)
/// Configuration
.title("Checkout")
.colorScheme(.automatic)
.tintColor(.blue)
.backgroundColor(.white)
/// Lifecycle events
.onCancel {
isPresented = false
}
.onComplete { event in
//handleCompletedEvent(event)
print("Checkout compl: ", event)
}
.onFail { error in
//handleError(error)
print("Checkout err: " , error)
}
.onPixelEvent { event in
//handlePixelEvent(event)
}
.onLinkClick { url in
if UIApplication.shared.canOpenURL(url) {
UIApplication.shared.open(url)
}
}
.edgesIgnoringSafeArea(.all)
}
}`
When I open the sheet, I only see the loading template when content is loading.
When I open the sheet, I see the loading template even after content is loaded.
d669cd-92.myshopify.com
We have a client who has successfully migrated to use Checkout Extensibility on their website. We are trying to use CSK to present the checkout but we get the follow error message. Any thoughts on what could cause this?
Storefronts using checkout.liquid are not supported. Please upgrade to Checkout Extensibility.
Checkout Sheet Kit
3.0
No response
I have attached a video.
It should show user info with discounts as well.
When discounts are applied to an order and a user is logged in, their information fails to appear on the checkout sheet. However, if we copy the checkout URL and paste it into any browser, all the information is visible. Yet, on the checkout sheet, it appears empty.
First of all, thank you so much for this great SDK! We couldn't wait to integrate it in our mobile apps and here is the first (minor) issue we've discovered:
When calling present
with a checkout URL of a store that has no checkout extensibility enabled, the SDK throws an error "Checkout has expired". We tried multiple different URLs (checkout URL and cart URL) but the error was always the same.
Finally, we switched to a new development shop where the error did not appear anymore. The difference between the stores was that one has checkout extensibility enabled and the other one not.
Steps to reproduce
ShopifyCheckout.present()
Expected behavior
Error message which explains that Mobile Checkout SDK does not work with Shops without checkout extensibility enabled
Actual behavior
Error message checkoutExpired(message: "Checkout has expired")
Checkout Sheet Kit
2.0.1
I'm building a mobile app for my shopify store. In order to provide the best checkout experience I've integrated Checkout Sheet Kit for Swift. At the moment my store is using checkout.liquid, I’m planning to make the final upgrade to checkout extensibility. I made some test but even though I switch to checkout extensibility publishing my theme Checkout Sheet Kit for Swift give me this error: The checkout url provided has resulted in an error. The store is still using checkout.liquid, whereas the checkout SDK only supports checkout with extensibility.
Have a store currently using checkout.liquid
Publish the theme on Customize your checkout
settings panel.
Open a native checkout dialog using the present function.
I want to open a native checkout dialog after I switch from checkout.liquid to checkout extensibility
When I open a native checkout dialog using the present function I'm getting back this error:
The checkout url provided has resulted in an error. The store is still using checkout.liquid, whereas the checkout SDK only supports checkout with extensibility.
even though I actually did the switch
No response
One big issue with the checkoutCreate
mutation that I've encountered is Throttled
error when there is over 4000 checkouts in under a minute, which is a common occurrence during flash sales.
cartCreate
mutation is restricted by this same limitation?CheckoutViewController
with this new mobile checkout, will the user be put in the "queue" that desktop/site users go thru when there are lots of checkouts?Thanks
Checkout Sheet Kit
2.0.1
No response
We tried two approaches
It was supposed to be opened in Arabic
But it opened up in English
No response
revibe.me
revibe-me
Checkout Sheet Kit
3.0.1 (latest)
MobileBuyIntegration Sample code
buyerIdentity
using the cartCreate API.checkoutUrl
.buyerIdentity
data in Cart should be pre-filled including address in checkout
Do not pre-fill the buyerIdentity address (only pre-fill the email).
During the implementation process we found it tricky to test all of delegate methods on checkout completion. It would be useful if there was a way to artificially trigger these methods so that we can test the flows and handle the error states/analytics events accordingly.
The only way we were able to do this was to complete checkouts using test payment details which seemed cumbersome.
Checkout Sheet Kit
3.0.1
No response
Vstack{}
.sheet(isPresented: $isGuestCheckout){
if let url = URL(string: self.myCheckoutURL){
CheckoutSheet(checkout: url)
.onCancel {
if isCheckoutCompleted {
UserDefaults.standard.set("", forKey: k_cartID)
GlobalObjects.myCartID = ""
}
isGuestCheckout = false
}
.onComplete { event in
print("COMPLETE:: \(event)")
print("ORDER SUCCESS")
isCheckoutCompleted = true
}
.onFail { error in
print("FAIL:: \(error)")
print("FAIL:: \(error.localizedDescription)")
}
.onPixelEvent { event in
print("PIXEL:: \(event)")
}
.onLinkClick { url in
print("URL: \(url)")
if UIApplication.shared.canOpenURL(url) {
UIApplication.shared.open(url)
}
}
.edgesIgnoringSafeArea(.all)
}
}
I want to load my checkouturl successfully in sheet and do checkout. for cart.
when i present checkout sheet by input my checkouturl from mycart page it's presented and gives fail error like bewlow beforeloading url:
FAIL:: checkoutUnavailable(message: "checkout crashed", code: ShopifyCheckoutSheetKit.CheckoutUnavailable.clientError(code: ShopifyCheckoutSheetKit.CheckoutErrorCode.unknown), recoverable: true)
No response
digimonk-shopee.myshopify.com
We're trying to test our implementation of CSK using a developer preview store setup with checkout extensibility.
However, as we are using a preview store we are asked to enter the store password in the checkout flow which redirects the user back to the homepage rather than the checkout flow. This effectively makes it impossible to test the CSK.
Checkout Sheet Kit
2.0.1
No response
Navigation bar on UIKit sheet to filled in on presentation, not just when the checkout scrolls down.
UIKit sheet displays a clear navigation bar on presentation which looks off. When you scroll down the on the UIKit sheet the navigation bar fills in. This feels a buggy and looks off which is not desired in a checkout flow.
No response
When creating a cart using the cartCreate
mutation and providing multiple deliveryAddressPreferences
for the CartBuyerIdentityInput
I can only see one address in the checkout sheet. When I copy the carts' checkoutUrl
and paste it in my browser I can see multiple (those I've sent with the mutation) addresses in the dropdown.
Thank you in advance!
EDIT: Same issue on android side, but I haven't opened an issue there yet. Let's check if this is really a bug first :)
Checkout Sheet Kit
3.0.1
No response
NavigationView{
Vstack{
.sheet(isPresented: $isGuestCheckout){
if let url = URL(string: self.myCheckoutURL){
CheckoutSheet(checkout: url)
.onCancel {
if isCheckoutCompleted {
UserDefaults.standard.set("", forKey: k_cartID)
GlobalObjects.myCartID = ""
}
isGuestCheckout = false
}
.onComplete { event in
print("COMPLETE:: (event)")
print("ORDER SUCCESS")
isCheckoutCompleted = true
}
.onFail { error in
print("FAIL:: (error)")
print("FAIL:: (error.localizedDescription)")
}
.onPixelEvent { event in
print("PIXEL:: (event)")
}
.onLinkClick { url in
print("URL: (url)")
if UIApplication.shared.canOpenURL(url) {
UIApplication.shared.open(url)
}
}
.edgesIgnoringSafeArea(.all)
}
}
}
}
I want to stay checkout sheet presented and load my checkouturl successfully and do checkout for existing cart and logged in user.
When i tries to present checkout sheet by input checkout url from my addresseslist view after updating buyeridentity it's automatically dismissed and moves back to the cart page.
No response
digimonk-shopee.myshopify.com
Checkout Sheet Kit
3.0.0
No response
On my view .task, I create a shopifyClient and then enable:
ShopifyCheckoutSheetKit.configure {
$0.preloading.enabled = false // defaults to true
}
When I select a shirt size, I create a cart and then get the associated checkoutUrl.
func updateCheckoutUrlForSize(size: String ) {
if let productId = getProductId(forTitle: size){
print("PrdId: ", productId, size)
let linesInput: [Buy.Storefront.CartLineInput] = [
.create(merchandiseId: GraphQL.ID(rawValue: productId), quantity: .value(Int32(quantity)))
]
let cartInput = Storefront.CartInput.create(
lines: .value(linesInput)
)
let createCartMutation = Storefront.buildMutation { $0
.cartCreate(input: cartInput) { $0
.cart { $0
.id()
.checkoutUrl()
}
}
}
let createCartMutationTask = shopifyBuyClient?.mutateGraphWith(createCartMutation) { response, error in
if let error = error {
print("Error creating cart: \(error.localizedDescription)")
return
}
guard let cart = response?.cartCreate?.cart else {
print("No cart found in response")
return
}
print("Cart url: \(cart.checkoutUrl)")
DispatchQueue.main.async {
self.checkoutURL = cart.checkoutUrl
}
}
createCartMutationTask?.resume()
}
}
When I select the checkout button, I only set the presented state as the url has already been determined via above.
Button(action: {
if self.checkoutURL != nil {
print("Current checkout URL: ", checkoutURL)
self.isPresented = true
}
}, label: {
Text("Checkout")
.frame(width: 250)
.font(Font.custom("Inter", size: 20))
.foregroundStyle(.black)
.fontWeight(.semibold)
.padding()
.background(sizeSelected == nil ? Color.yellow.opacity(0.5) : Color.yellow)
.cornerRadius(8)
})
.disabled( sizeSelected == nil )
Given a valid checkoutUrl, the Checkout Sheet should display a proper checkout page for the customer.
With a valid checkoutUrl, the Checkout Sheet appears completely empty and prevents a customer from purchasing.
When I check the URL in my logs, it's valid and opens correctly in a webpage. After selecting a different shirt size ( which will recreate the cart ), and then opening the sheet again, the page loads.
d669cd-92.myshopify.com
Checkout Sheet Kit
latest
No response
Set X-Shopify-Customer-Access-Token
header.
Open Checkout Web View
How do we log in the customer automatically now?
Pass header for customer access token and it should log in the customer automatically - Before we used to be able to pass X-Shopify-Customer-Access-Token
User needs to log in every time
No response
All
Checkout Sheet Kit
1.x 2.x and 3.x
No response
Using buy sdk:
Create a new cart
Add product
Attach buyer identity via access token
User should be attached to cart in checkout
Checkout fields are prefilled but no actual user is attached/logged in.
Same result when copying the checkout url in iPhone safari browser.
BUT, working as expected when checkout url is copied into a MacBook safari browser
Similar thing already happened earlier this year: see issue: https://github.com/Shopify/checkout-sheet-kit-swift/issues/160
This bug has a big impact on us, as this affects our loyalty program, and we need urgent resolution
Sreenshots show the checkout on the app before opening the checkout url in laptop browser and after.
so opening the checkout url once in a browser fixes the issue for this single cart...
waterdrop-official.myshopify.com
but happens on multiple of our stores
Hi, I'm encountering a crash in the app, and it's causing me some trouble!
When tapping AmazonPay within ShopifyCheckoutKit displayed from SwiftUI, it crashes.
The AmazonPay payment process should proceed without any issues, similar to credit card payments, ShopPay, and ApplePay.
The app crashes when attempting to proceed with the AmazonPay payment. Other payment methods, such as credit card payments, ShopPay, and ApplePay, work correctly.
struct ShopifyCheckout: UIViewControllerRepresentable {
let url: URL
let onCompleted: () -> Void
func makeUIViewController(context: Context) -> UIViewController {
let viewController = CheckoutViewController(url: url, onCompleted: onCompleted)
return viewController
}
func updateUIViewController(_ viewController: UIViewController, context: Context) {}
}
private final class CheckoutViewController: UIViewController, CheckoutDelegate {
let url: URL
let onCompleted: () -> Void
init(url: URL, onCompleted: @escaping () -> Void) {
self.url = url
self.onCompleted = onCompleted
super.init(nibName: nil, bundle: nil)
}
@available(*, unavailable)
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func viewDidAppear(_ animated: Bool) {
ShopifyCheckoutKit.present(checkout: url, from: self, delegate: self)
super.viewDidAppear(animated)
}
func checkoutDidComplete() {
dismiss(animated: true)
super.dismiss(animated: true)
onCompleted()
}
func checkoutDidCancel() {
dismiss(animated: true)
super.dismiss(animated: true)
onCompleted()
}
func checkoutDidFail(error: ShopifyCheckoutKit.CheckoutError) {
fatalError(error.localizedDescription)
}
func checkoutDidClickContactLink(url: URL) {
if UIApplication.shared.canOpenURL(url) {
UIApplication.shared.open(url)
}
}
}
iOS Version: iOS 17.1.2
Xcode Version: Xcode 15.0.1
ShopifyCheckoutKit Version: 0.6.0
Hello,
I did not where to put this except here. According to https://github.com/Shopify/checkout-sheet-kit-swift/blob/249b80f7ecfa29b632cb8dd85b8eee284dd7165d/.github/CONTRIBUTING.md#proposing-features it's possible to propose features :)
We are heavy users of the new native checkout sheet and already using this in production. Is there any way to bypass the online stores password protection?
Our use case is simple:
Thanks!
Hi Team,
When can we expect Customer Account API integration in checkout-sheet-kit or mobile-buy-sdk-ios?
Also, will it be passwordless login functionality?
Describe the bug
Cart attached buyer identity gets automatically reset every time checkout is opened after first time opening the checkout.
To Reproduce
Expected behavior
Buyer identity should not be lost
Versions (please complete the following information):
Checkout Sheet Kit
3.0.1
No response
ShopifyCheckoutSheetKit.configuration.colorScheme
to .web
Our suggestion is to provide a way to still force the theme to use light
/dark
mode while using the web
theme instead of using the automatic theming.
The automatic theme is used which sets the color of the background and the sheet header to dark when the device is set to dark mode.
Hi, I'm looking for guidance on how to identify orders placed via this SDK.
Our use case is to provide the checkout experience to users logged into our app. Upon placing the order, we will receive a web hook event on the backend, that we want to associate with the user, but its unclear how I can reliably do this.
The completion/cancellation delegate passes no information back to the calling context. I have the original Cart object used to get the checkoutURL, but how can I match that to a Checkout ID (or something similar) to pass along to the backend, that we could use to match the incoming webhook?
Building a custom checkout with the Buy SDK makes this trivial, but so much more is abstracted away here.
Any guidance is appreciated, thanks in advance!
Checkout Sheet Kit
3.0.1
No response
N/A
We want to use our own navigation controller and not use the close button from your controller UI so that we can gain access to your bridge handling but without most of the UI. Anyway to workaround this I've nested your view controller in a container controller to fit with our platform.
Currently the initialiser is public but the class is internal.
No response
N/A
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.