结帐SDK快速入门

Checkout JS SDK是一个JavaScript方法库，用于执行与签出相关的操作。它包括用于登录客户、向结帐对象添加地址以及显示商家已配置的运输和支付方法的方法。这是你在BigCommerce上建立自己的自定义结账页面所需要的一切。

我们的样品检测React app如果您喜欢在框架中开发，这是一个很好的开始。然而，使用香草ajs构建的SDK与框架无关。

本教程将引导您完成将自定义签出直接构建到控制面板的第一步，以说明这一点。在本教程的最后，您将安装Checkout SDK，为自定义结帐创建一个新的JavaScript模块，并在控制台记录结帐对象。

先决条件

• 本教程使用基石。你的主题可能不同。
• 主题应该设置为地方发展。

安装Checkout JS SDK

1. 打开终端并导航到主题目录。

例如,cd基石

2. 执行如下命令:

NPM安装——保存@bigcommerce/checkout-sdk

创建checkout-loader.js文件

在你的文本编辑器中，创建一个名为checkout-loader.js的文件，包含以下内容:

脚本。onload = function () {checkoutloader .load('checkout-sdk') .then(function (module) {var checkoutService = module. createcheckoutservice ();返回checkoutService.loadCheckout (window.checkoutConfig.checkoutId);}) .then(函数(状态){console.log('Checkout SDK Quickstart'， state.data. getcheckout ());. getelementbyid (window.checkoutConfig.containerId)。innerHTML = 'Checkout ID: ' + state.data.getCheckout().id;});};脚本。src = " https://checkout-sdk.bigcommerce.com/v1/loader.js ";document.head.appendChild(脚本);

安装自定义签出

有关安装上一步生成的签出文件的信息，请参见安装定制签出。

在结帐页面上，您将看到脚本、屏幕上的结帐ID，在开发人员控制台中，您将看到整个可用的结帐对象。

记录Checkout对象

1. 导航到店面并打开浏览器控制台。
2. 将商品添加到购物车中，然后进入付款页面。签出页面将在标题下方为空白。
3. 注意记录到控制台的签出对象。

资源

样例应用程序

• 结帐SDK示例应用程序(BigCommerce GitHub)
• 结帐SDK源代码(BigCommerce GitHub)

相关文章

• 安装模板CLI