Accelerated Checkouts - Feedback welcome!

[markmur]

Note

Accelerated Checkouts are still in beta testing, with a stable version expected soon.

---

✨ Shopify Accelerated Checkouts

3.4.0-rc.1 of @shopify/checkout-sheet-kit introduces the latest feature of the Checkout Kit: Accelerated Checkouts.

Accelerated Checkouts offer a way to render "wallet" buttons in your app with minimal code - including support for Apple Pay and Shop Pay out of the box.

📋 Requirements

• Your app is setup to run on iOS 16 and above.
• Your app has the write_cart_wallet_payments access scope, which you can request from us directly.
• You've completed the tutorial on creating Apple Pay payment processing certificates.
• Your device is set up for Apple Pay. You'll need to set up Apple Pay, create an Apple developer account, and test Apple Pay on a supported device.

🛠️ Integrating

Integrating these buttons is quite straight forward:

1. Install the beta 3.4.0-rc.1:

npm install @shopify/checkout-sheet-kit@next

2. Update your Checkout Kit Configuration object:

import { Configuration, ColorScheme } from '@shopify/checkout-sheet-kit'

const config: Configuration = {
  colorScheme: ColorScheme.web,
  preloading: true,
+  acceleratedCheckouts: {
+    storefrontDomain: env.STOREFRONT_DOMAIN!,
+    storefrontAccessToken: env.STOREFRONT_ACCESS_TOKEN!
+    wallets: {
+      applePay: {
+         contactFields: [ApplePayContactField.email, ApplePayContactField.phone],
+         merchantIdentifier:  env.STOREFRONT_MERCHANT_IDENTIFIER!,
+      }
+    }
  }
}

function AppWithCheckout() {
    return (
       <ShopifyCheckoutSheetProvider config={config}>
          <App />
       </ShopifyCheckoutSheetProvider>
     )
}

3. Add <AcceleratedCheckoutButtons /> to your cart or product details screens:

+ import { AcceleratedCheckoutButtons } from '@shopify/checkout-sheet-kit'

function CartScreen() {
    return (
       <View>
+      <AcceleratedCheckoutButtons 
+         cartId="gid://Shopify/Cart/123"  />
       </View>
    )
}

function ProductDetailsScreen() {
    return (
       <View>
+       <AcceleratedCheckoutButtons 
+         variantId="gid://Shopify/ProductVariant/123" 
+         quantity={1} />
       </View>
    )
}

🎯 What's Next

We're actively working towards a stable release of the feature, but if you have any questions of comments in the meantime, please post in the Announcement discussion.

---

Full Changelog: 3.3.0...3.4.0-rc.1

---

This discussion was created from the release 3.4.0-rc.1.