At a glance

  • All the operations from this guide can be executed on the backend and do not require client-side code.
  • You will capture funds from the shopper using whatever payment gateway you prefer.
  • After capturing funds from the shopper, you will place the order with Rye using the submitCart mutation.
For a live production example of creating an order using the Rye SDK in TypeScript, check out our Order from Amazon in TypeScript guide.

Step-by-step guide

1. Get a cart ready

First, we need to prepare a cart for checkout. We have a tutorial on this here. You will need to create the cart, attach the buyer’s identity, and optionally select shipping options for the store(s) you are purchasing from. Once you have a cart ready for checkout, you can return here to follow the remaining steps.

2. Capture payment from your customer

Once you have a cart prepared for checkout, you can query its cost field to determine how much you need to charge the shopper for the order. When placing the order, it is up to you to charge the shopper. You may use any payment gateway you prefer, although our recommendation is generally Stripe as it is relatively easy to get set up with them. Once you have charged the shopper, you will have collected funds for the order, but the Rye cart will still be pending checkout.

3. Submit the cart

Once you have collected the payment from the shopper, we’ll use the submitCart mutation to submit the cart. For our mutation, we’ll request some new fields status and orderId from the stores field. These fields will be used to track the status of the order, so be sure to take a look at the status and copy the orderId somewhere for later. We’ll also request errors back on the store level just in case we have an issue with placing the order.
mutation SubmitCart {
  submitCart(input: {
    id: "YOUR_CART_ID_HERE"
    selectedShippingOptions: [
      {
        store: "rye-staging-test-store.myshopify.com"
        shippingId: "YOUR_CHOSEN_SHIPPING_ID_HERE"
      }
    ]
  }) {
    cart {
      id
      stores {
        status
        # Note: This `orderId` field is important!
        orderId
        store {
          ... on ShopifyStore {
            store
            cartLines {
              quantity
              variant {
                id
              }
            }
          }
        }
        errors {
          code
          message
        }
      }
    }
    errors {
      code
      message
    }
  }
}

Congrats! You’ve successfully submitted an order via Rye! The orderId you copied from the response represents a Rye Order.

4. Check order status

Once we’ve successfully created an order, we can keep track of its status using two main methods:
  1. Receiving webhook updates from Rye (recommended)
  2. Polling using the orderByID query
While listening for webhooks is recommended in production, for the purposes of this guide we can use polling. See the OrderStatus enum for all possible statuses.
query OrderById {
  orderByID(id: "YOUR_ORDER_ID_HERE") {
    id
    status
    events {
      id
      createdAt
      ... on OrderFailedOrderEvent {
        reason
      }
    }
    requiredActions {
      ... on CompletePaymentChallenge {
        redirectURL
      }
    }
  }
}

Next steps

Congrats on making it this far! Here are some next steps you could take: