艺术浏览器
arta-浏览器是一款TypeScript SDK,为Arta的估算和跟踪部件以及Arta付费取出提供方便的设置.
- 使用 阿尔塔估计数 可在自己的网站上动态生成航运估计数(不可登录).
- 使用 阿尔塔追踪 方便在自己的网站上提供清晰和最新的跟踪信息.
- 使用 阿尔塔薪酬 让买家支付押金 用他们的阿尔塔信贷额度来支付其余的 方式在你的退票页上.
安装
与 <script> 标签
在关闭前复制并粘贴以下片断 </body> HTML 标签, 用于用户的“ 估计” 部件( 通常在产品页面上):
<script
src="https://cdn.jsdelivr.net/npm/@artaio/[email protected]/dist/bundle.js"
integrity="sha384-a9afvobPsoQi9Ygps92oxPjOQvNuZRlG1UFvnsO4V6e+wC3IqPni1HqXvayY/IgK"
crossorigin="anonymous"
></script>
一旦上面的剧本装入 Arta 对象应该可用.
片段标出最新出版的版本并用 分资源; 版本和 integrity 上面的散列会在每次发行时自动更新.
与 npm
在您的项目运行中
npm install @artaio/arta-browser
然后可以导入 Arta 例如,对象:
import Arta from '@artaio/arta-browser';
基本用途
估计部件
// On page load, initialize the Arta SDK with your publishable API key
Arta.init('<YOUR_API_KEY>');
// Set up origin and object details, request preferences as well as
// your widget configuration overrides
const origin = {
city: 'Brooklyn',
region: 'NY',
country: 'US',
postal_code: '11249',
};
const objects = [
{
depth: 2,
width: 36,
height: 24,
subtype: 'painting_unframed',
unit_of_measurement: 'in',
value_currency: 'USD',
value: 500.0,
},
];
const requestPreferences = { currency: 'EUR' };
const widgetConfig = {
style: {
position: 'center',
pricingDisplay: 'range',
},
};
// Setup an instance of the estimates widget
const estimate = Arta.estimate(
{ origin, objects, requestPreferences },
widgetConfig
);
// Validate the widget before rendering it
await esimate.validate();
// `estimate.isReady` will be true if validations pass and false if
// they do not. You can choose to render a button to open the widget
// when the widget has been validated.
//
// `estimate.open()` will render the widget on your page.
esimate.isReady && (
<Button onClick={() => estimate.open()}>Estimate Shipping</Button>
);
Arta 估计部件有许多配置选项来自定义部件的外观和感觉 。 您可以在 /lib/估计数 并查看现场演示 手册. arta.io/ 估计数-民主。 。 。 .
使用不同前端框架的额外示例请检查 gitHub 上的艺术浏览器实例。 。 。 .
用于跟踪部件
// On page load, initialize the Arta SDK with your publishable API key
Arta.init('<YOUR_API_KEY>');
// Optionally, build your Tracking widget configuration
const config = {
animation: {
in: {
type: 'slide',
duration: 500,
easing: 'ease-in-out',
},
out: {
type: 'slide',
duration: 250,
easing: 'ease-in-out',
},
},
style: {
color: {
iconPrimary: 'blue',
},
},
};
// Setup an instance of the tracking widget
const tracking = Arta.tracking('<SHIPMENT_ID>', config);
// Validate the widget before rendering it
await tracking.validate();
// `tracking.isReady` will be true if validations pass and false if
// they do not. You can choose to render a button to open the widget
// when the widget has been validated.
//
// `tracking.open()` will render the widget on your page.
tracking.isReady && <Button onClick={() => tracking.open()}>Track</Button>;
Arta 跟踪部件有许多配置选项来自定义部件的外观和感觉. 您可以在 /lib/跟踪。 。 。 .
阿尔塔付账
Arta Pay让买主按你的订单支付押金,用他们的Arta信贷额度,在你的页面上以Arta主持的方式为其余部分融资. 它有一个服务器半页半:
- 您的服务器 与您创建购买请求 私营 API 密钥( E)
POST https://api.arta.io/purchase_requests,加上订单金额、买方电子邮件和细列项目),然后返回id和短暂的生命client_token。仅通过{ purchaseRequestId, clientToken }到页面——私人密钥永远不会离开您的服务器. - 您的页面 初始化为您的 公开 键并打开取出 :
Arta.init('<PUBLIC_KEY>');
const checkout = Arta.pay(
{ purchaseRequestId, clientToken },
{
onReady: () => (payButton.disabled = false),
onComplete: ({ purchaseRequestId, purchaseId, status }) => {
// status: 'confirmed' | 'processing' | 'declined' — confirm server-side
},
onClose: ({ reason }) => {}, // 'customer' | 'complete' | 'error'
onError: ({ code, message, recoverable }) => {},
},
{ position: 'center' }
);
payButton.addEventListener('click', () => checkout.open());
部件挂载并验证购买请求, 所以 onReady 意思是"准备打开". open() 显示模式, close() 隐藏它(重新打开简历)和 destroy() 将取去. onComplete 当结果已知时, 点火一次; 回调是咨询的, 因此确认服务器端的命令 GET /purchase_requests/:id。 。 。 . position 接受 'center' (违约), 'left', (中文(简体) ), 'right' 或者说 'full_screen'编辑 PayCompletion, (中文(简体) ), PayCloseEvent 财务报告和审定财务报表 PayError 从软件包中导出类型.
捐款
请确保提供所有实例 github.com/artaio/arta-浏览器实例 在公关开业前还在工作.
发展
要开发 SDK 上的新功能, 运行 npm install 以安装所有依赖,然后运行 npm run build 编译的JS代码将存放于 dist/ 文件夹,包含向国家预防机制发布的内容.
请注意,目前的CI设置既公布编译的JS代码,也公布捆绑版. 然后,我们使用 https://www.jsdelivr.com/ (中文(简体) ) 分发存放在国家预防机制的捆绑版本.