This guide will help brands who use headless Shopify.

Overview

Downpay deposits and deferred payments can be used with headless Shopify as an extension of Getting started with Hydrogen and Oxygen.

This guide will provide an example but for more assistance, please contact us.

Adding Downpay items to the cart through the Storefront API

At it's core, a Downpay integration with your headless storefront is fairly straightforward. To sell any product through Downpay, simply ensure that the sellingPlanId of the Downpay Purchase Option is included in the associated line item in the call to create the cart.

For the Storefront API, below is the simplest mutation that will add a product with a deposit to the cart/checkout. Make sure you have first:
Created a Downpay Purchase Option inside the app.
Take note of the sellingPlanId for that Purchase Option. You can find this by opening the Option inside the Downpay app, and copying it from the lower left corner of the page.

The mutation:

mutation createCart($input: CartInput!) {
  cartCreate(input: $input) {
    cart {
      checkoutUrl
    }
  }
}

Variables:

{
  "input": {
    "lines": {
      "quantity": 1,
      "merchandiseId": "gid://shopify/ProductVariant/45047789191454",
      "sellingPlanId": "gid://shopify/SellingPlan/8021279006"
    }
  }
}

The result will be similar to this, with a checkoutUrl to which you can redirect your customer:

{
  "data": {
    "cartCreate": {
      "cart": {
        "checkoutUrl": "https://my-store.myshopify.com/cart/c/Z2NwLXVzLWNlbnRyYWwxOjAxSkRKQTE5MEhNM0cwQlhTTTRTVzU0WjIw?key=372bb997b604b4ebd76030c030913fdc"
      }
    }
  }
}

Example

For an example on how to build custom storefronts with Hydrogen, We have adapted Shopify's Hydrogen/React example to include the code needed to sell with Downpay. This includes:

- Adding the deposit amounts to the product page
- Adding the right parameters to the Add To Cart call so that the purchase option propagates to the cart
- Showing the deposit information in the cart

You can find the source code here.

Updated on: 25/11/2024