Widget thông tin thuế

Thị trường khả dụng

UK&US

Giới thiệu widget

TikTok Shop yêu cầu tất cả người bán hoàn tất Thông tin Định danh Thuế (Tax Identity Information) trước khi bán sản phẩm. Doanh nghiệp/cá nhân tại Mỹ cần điền W9 Form, còn doanh nghiệp/cá nhân ngoài Mỹ cần điền thông tin W8 Form.

Widget này cho phép người bán hoàn tất thông tin thuế và gửi thông tin này ngay trong app mà họ đang sử dụng, không cần chuyển sang Seller Center Account Settling >> Tax

Trình diễn

Demo tích hợp

React framework

Cấu hình preload trong WidgetConfigProvider preloadWidgetNames, bạn có thể đặt WidgetConfigProvider ra ngoài cùng để preload sớm

JSONWord Wrap

import { WidgetConfigProvider,RemoteWidget } from '@tiktokshop/widget-kit-react';  
  
const getWidgetToken = async () => {  
  const res: any = await get('https://xxx/api/v1/widget/access_token', {  
    outer_shop_id: 'xxx',  
    partner_type: '1',  
  });  
  if (res?.code === 0) {  
    return res?.data;  
  }  
  return {};  
};  
  
const initOptions = {  
  config: {  
    shopId: 'xxx', //seller id, such as 123456  
    oecRegion: 'xxx', //country,such as US  
    appKey: 'xxx', //The key corresponding to the merchant's creation service  
    isvInfo: {  
      name: 'xxx', //ISV name,such as OPEN_PLATFORM  
    },  
  },  
  getToken: getWidgetToken, //get auth token  
  remotes: [  
    {  
      name: 'xxx', //Integrated business name, provided by the open platform,such as:@tiktokshop-widget/finance:taxNumber  
    },  
  ],  
};  
  
export default () => {  
  return (  
    <WidgetConfigProvider  
      config={initOptions.config}  
      getToken={initOptions.getToken}  
      remotes={initOptions.remotes}  
      preloadWidgetNames={['@tiktokshop-widget/finance:taxNumber']}>  
      <RemoteWidget  
        name={'@tiktokshop-widget/finance:taxNumber'}  
        className={'containerClass'}  
        options={{  
            onResult: (data: { code: number }) => {  
              if (data.code === 0) {  
                //Callback function for successful tax submission  
              }  
            },  
        }} //Pass in the props required by the widget. If there are none, you don't need to pass them in.  
      />  
    </WidgetConfigProvider>  
  );  
};

Native js

JSONWord Wrap

import React, { useEffect } from 'react';  
import { get } from './utils/fetch';  
import { loadWidget, init, WidgetComponent } from '@tiktokshop/widget-kit';  
  
const name = '@tiktokshop-widget/finance:taxNumber';  
let view = null;  
export default () => {  
  const getWidgetToken = async () => {  
    const res: any = await get('https://xxx/api/v1/widget/access_token', {  
      outer_shop_id: 'xxx',  
      partner_type: '1',  
    });  
    if (res?.code === 0) {  
      return res?.data;  
    }  
    return {};  
  };  
  
  const initWidget = () => {//It is recommended to initialize the widget in the outer layer and execute the preloadWidget([name]) method to preload resources.  
    init({  
      config: {  
        shopId: 'xxx',  
        oecRegion: 'US',  
        appKey: 'xxx',  
        isvInfo: {  
          name: 'OPEN_PLATFORM',  
        },  
      },  
      remotes: [  
        {  
          name,  
        },  
      ],  
      getToken: getWidgetToken,  
    });  
  };  
  useEffect(() => {  
    initWidget();  
    loadWidget(name).then((component: WidgetComponent) => {  
      view = component.create(  
        document.getElementById('widget-preview-container')!,  
      );  
      view?.render({  
          onResult: (data: { code: number }) => {  
              if (data.code === 0) {  
                //Callback function for successful tax submission  
              }  
            },  
      });  
    });  
    return () => {  
      view?.unmount();  
    };  
  }, []);  
  return (  
    <div  
      className="widget-preview-container"  
      id="widget-preview-container"></div>  
  );  
};

Nhật ký thay đổi

Release date	Update
2024/2/22	Phiên bản đầu tiên được ra mắt

Hướng dẫn sử dụng Widget SDK

Hướng dẫn sử dụng Widget SDK