如何通过GraphQL在Shopify移动端结账流程中添加销售计划（订阅方案）

Hey there! Great job getting the basic checkout flow working with Shopify's GraphQL API. Since you're using Recharge Payments for subscriptions, integrating their plans into your mobile app checkout just requires adding one key field to your existing checkoutCreate mutation. Let me walk you through exactly how to adjust your code:

Key Change: Include the sellingPlanId in Line Items #

Recharge leverages Shopify's Selling Plans framework to power subscriptions. All you need to do is add the subscription plan ID you've already retrieved to the line item object in your mutation. This tells Shopify to link the product variant to your Recharge subscription plan.

Updated Code with Subscription Integration #

Here's your modified checkout code, with fixes for proper axios formatting (your original code was missing critical headers and JSON serialization) and the subscription plan field added:

// Replace with your actual Recharge subscription plan ID
const subscriptionPlanId = "your-recharge-subscription-plan-id";

const query = `mutation {
  checkoutCreate(input: {
    lineItems: [{
      variantId: "${item.variantId}",
      quantity: 1,
      sellingPlanId: "${subscriptionPlanId}", # New line to enable subscriptions
      customAttributes: {
        key: "Shipping Styles",
        value: "Mixed"
      }
    }]
  }) {
    checkout {
      id
      webUrl
      lineItems(first: 5) {
        edges {
          node {
            title
            quantity
            # Add this to verify the subscription is attached
            sellingPlanAllocation {
              sellingPlan {
                id
                name
              }
            }
          }
        }
      }
    }
    userErrors {
      field
      message
    }
  }
}`;

axios({
  url: `https://mystore.myshopify.com/api/2021-07/graphql.json`,
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    // Don't forget your Storefront API access token
    'X-Shopify-Storefront-Access-Token': 'your-storefront-access-token'
  },
  data: JSON.stringify({ query }),
  success: (response) => {
    const { checkout, userErrors } = response.data.data;
    if (userErrors.length > 0) {
      console.log('Checkout errors:', userErrors);
      onFailure({ value: 'fail' });
      return;
    }
    // Verify the subscription was successfully attached
    const subscriptionIsActive = checkout.lineItems.edges.some(edge => 
      edge.node.sellingPlanAllocation?.sellingPlan.id === subscriptionPlanId
    );
    if (subscriptionIsActive) {
      console.log('Checkout created with subscription:', checkout);
      onSuccess({ value: 'Checkout item added with subscription' });
    } else {
      onFailure({ value: 'Subscription not attached to checkout' });
    }
  },
  error: (err) => {
    console.log('updateCheckout err ', err);
    onFailure({ value: 'fail' });
  },
});

Critical Tips to Avoid Headaches #

• Validate Your Selling Plan ID: Double-check that the subscriptionPlanId you're using is valid for the product variant you're adding. You can confirm this by fetching the variant's available selling plans via GraphQL first.
• Check API Scopes: Ensure your Storefront API token has the read_selling_plans and write_checkouts permissions. Without these, you'll get permission denied errors.
• Leverage Error Handling: I added the userErrors field to the mutation response to help you debug specific issues (like invalid plan IDs) instead of just generic failures.
• Test End-to-End: After creating the checkout, visit the generated webUrl to confirm the subscription option appears in Shopify's checkout flow, then verify the subscription shows up in your Recharge admin dashboard once the order is completed.

内容的提问来源于stack exchange，提问作者John Wink