我们最近发布了一种在您的网站上使用Stripe Payment Links的新方法。现在，您可以使用仪表板轻松地将它们变成可自定义的embedded buttons，生成一个自定义的代码，您可以将其添加到代码库中，以便您可以在线销售产品以最少的努力在线销售。

创建购买按钮

在Stripe Dashboard中，选择您生成的付款链接的产品。在“定价”部分下，单击要重定向到详细信息页面的“查看付款链接”按钮。

您将单击付款链接右侧的购买按钮。

一个面板将出现在右侧，让您自定义按钮的外观和内容。

嵌入按钮

当您的按钮准备就绪后，复制提供的代码样本，然后将其粘贴到负责呈现UI的代码库中的一部分中，您可以在其中显示要显示的按钮。
您会注意到该按钮是由脚本标签制成的，该标签导入了一个专门用于处理这些按钮的工作方式的JavaScript库，除了带有按钮ID的自定义<stripe-buy-button>标签，并且您的可发布键AS属性。

<script async src="https://js.stripe.com/v3/buy-button.js"></script>
<stripe-buy-button
 buy-button-id="buy_btn_1MgEyoDNsVQ3fzInaHTBBhYR"
 publishable-key="pk_test_51ABC" // replace with your publishable key
>
</stripe-buy-button>

上面的代码示例很好地显示出销售单个产品的按钮。但是，如果您想将购买按钮用于多个产品，并且您的UI是使用基于组件的前端框架（例如React）构建的，则必须调整此代码样本以使其更具动态性。
例如，如果您要渲染产品列表，并且想使用可重复使用的自定义组件显示每个产品的购买按钮，则可以将代码示例调整为类似的内容：

export default function App() {
// The list of your Buy button IDs
 const buttonIds = [
   "buy_btn_123ABC",
   "buy_btn_234DEF",
   "buy_btn_567GHI"
 ]
// The component to display the button that receives a single button ID as parameter
 const BuyButtonComponent = (buttonId) => {
   return (
     <stripe-buy-button
       buy-button-id={buttonId}
  publishable-key="pk_test_51ABC" // replace with your publishable key
     >
     </stripe-buy-button>
   );
 }
// Loop through the IDs and display a button for each product
 return (
   <>
   {buttonIds.map(b => BuyButtonComponent(b))}
   </>
 );
}

如果您使用此基于组件的方法构建网站，则需要在主HTML文件的head标签中分别添加脚本标签。
就是这样。不需要其他更改才能开始使用此功能。

结论

使用购买按钮可以通过提供简短的自动生成的代码示例来简化进入网站的条纹付款链接，您可以将其复制并粘贴到代码库中，并显示为您的品牌外观定制的按钮。

我们希望您能分享您计划如何使用它们。

您还可以在以下平台上关注Stripe开发人员的更新：
ð£在Twitter上关注@StripeDev和Twitter
ðiscribe我们的YouTube channel
−加入官方Discord server
ð§注册Dev Digest

关于作者

Charlie Gerard是Stripe，published author和creative technologist的开发人员倡导者。她喜欢研究和experimenting with technologies。当她不编码时，她喜欢在户外度过时光，阅读并为自己设定随机挑战。