如何在Shopify结账UI扩展中获取当前登录用户详情及配送信息

你已经完成了结账页面复选框的UI渲染，现在需要实现勾选复选框后，订单完成时将用户详情、配送信息同步到AWS上的Django GraphQL后端，具体实现步骤如下：

1. 管理复选框状态 #

用React的useState跟踪用户是否勾选复选框，确保只有勾选时才触发后续数据同步逻辑。

2. 监听订单完成事件 #

通过Shopify扩展API订阅checkout.completed事件，当用户成功提交订单后自动触发数据发送操作。

3. 提取用户与配送信息 #

从Shopify扩展API提供的checkout对象中，提取用户身份、配送地址、订单ID等所需数据。

4. 发送数据到Django GraphQL后端 #

构造符合后端要求的GraphQL请求，将数据发送至AWS服务端，同时处理跨域、权限验证等问题。

修改后的完整代码 #

import React, { useState, useEffect } from 'react';
import {
  useExtensionApi,
  render,
  Grid,
  GridItem,
  Heading,
  Checkbox,
  View,
  BlockSpacer,
  Text,
  Link,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => <App />);

function App() {
  const { checkout, subscribe } = useExtensionApi();
  const [isOptedIn, setIsOptedIn] = useState(false);

  // 监听订单完成事件
  useEffect(() => {
    const unsubscribe = subscribe('checkout.completed', async () => {
      if (!isOptedIn) return;

      // 提取用户、配送及订单数据
      const syncData = {
        email: checkout.buyerIdentity?.email,
        phone: checkout.buyerIdentity?.phone,
        shippingAddress: checkout.shippingAddress ? {
          name: checkout.shippingAddress.name,
          street: checkout.shippingAddress.address1,
          city: checkout.shippingAddress.city,
          province: checkout.shippingAddress.province,
          postalCode: checkout.shippingAddress.postalCode,
          country: checkout.shippingAddress.country,
        } : null,
        orderId: checkout.orderId,
        orderNumber: checkout.orderNumber,
      };

      try {
        // 发送到Django GraphQL后端
        await fetch('https://你的AWS后端域名/graphql', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            // 若后端需要认证，添加对应凭证
            // 'Authorization': 'Bearer YOUR_AUTH_TOKEN'
          },
          body: JSON.stringify({
            query: `
              mutation CreatePickupRequest(
                $email: String,
                $phone: String,
                $shippingAddress: ShippingAddressInput,
                $orderId: String,
                $orderNumber: String
              ) {
                createPickupRequest(
                  email: $email,
                  phone: $phone,
                  shippingAddress: $shippingAddress,
                  orderId: $orderId,
                  orderNumber: $orderNumber
                ) {
                  success
                  message
                }
              }
            `,
            variables: syncData,
          }),
        });
        console.log('数据同步成功');
      } catch (error) {
        console.error('数据同步失败:', error);
        // 可选：添加失败重试或错误上报逻辑
      }
    });

    // 组件卸载时取消订阅
    return () => unsubscribe();
  }, [isOptedIn, checkout, subscribe]);

  return (
    <View border="base" padding={"base"} borderRadius="base">
      <Grid columns={['95%','5%']}>
        <GridItem>
          <Heading>Declutter your closet and get 15% off on your next order.</Heading>
        </GridItem>
        <GridItem>
          <Checkbox
            checked={isOptedIn}
            onChange={(checked) => setIsOptedIn(checked)}
          />
        </GridItem>
      </Grid>

      <Text>Schedule a free doorstep pickup and get rid if the clothes that you no longer want,need or fit-into.</Text>
      <BlockSpacer/>
      <Link to="https://phirlo.in">Learn how?</Link>
    </View>
  );
}

关键注意事项 #

• CORS配置：在Django后端配置CORS规则，允许Shopify结账域名的请求；同时在扩展的shopify.extension.toml中添加网络访问权限：

  [network_access]
  allowed_urls = ["https://你的AWS后端域名/graphql"]
  

• 后端验证：后端需验证请求合法性，比如通过自定义密钥或Shopify签名，防止恶意请求。
• 容错处理：建议添加请求重试机制或日志记录，避免网络波动导致数据丢失。

内容的提问来源于stack exchange，提问作者Phirlo Fashion Ltd.