如何创建一个自定义的PATREON按钮Patreon是一个创作者的订阅管理系统。虽然它提供了一个默认的按钮片段，但你可以

Patreon是一个创作者的订阅管理系统。虽然它提供了一个默认的按钮片段，但你可以添加一个自定义按钮，包括你喜欢的设计和行动呼吁，以提高你的点击率。

在这篇文章中，你将学习如何创建一个简单的自定义Patreon链接按钮，将用户带到你喜欢的层级的支付流程中。

如何设置你的账户

第1步。

要开始设置，你需要一个Patreon账户。如果你没有账户，请创建一个账户，或登录你的账户。

第2步。

访问你的账户的注册门户。在客户和API密钥下**，点击创建客户**按钮。

Patreon客户注册门户

第3步。

点击该按钮后，将出现一个模态。填写与你的网站有关的信息，并确保在重定向URI领域输入一个完整的URI（包括结尾/ ）。然后，点击 "创建客户"按钮。

Patreon客户注册表

第四步。

在你现有的客户 下**，** 你会看到你新创建的客户。点击你的新客户的下拉图标。

最后，复制客户的ID，因为你在接下来的步骤中会需要它。

注册客户信息

自定义按钮的代码

以下是一个函数，它接收一个账户ID、首选金额或层级（美分）和一个重定向URI，并返回到Patreon的结账流程的链接。

在你的代码中使用下面的函数，添加一个自定义的日志/消息，并对元素进行样式化处理，使其成为你想要的链接按钮。

const PatreonButton = (clientId, amount, redirectURI) => {
  const clientId = `&client_id=${patreonClientId}`;
  const pledgeLevel = `$&min_cents=${amount}`;
  const v2Params = "&scope=identity%20identity[email]";
  const redirectUri = `&redirect_uri=${redirectURI}`;
  const href = `https://www.patreon.com/oauth2/become-patron?response_type=code${pledgeLevel}${clientId}${redirectUri}${v2Params}`;
  return (
    <a
      className="patreon-button link-button"
      data-patreon-widget-type="become-patron-button"
      href={href}
      rel="noreferrer"
      target="_blank"
    >
      /* 
      <svg
        id="patreon-logo"
        viewBox="10 0 2560 356"
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
      >
        <g>
          <path d="M1536.54 72.449v76.933h128.24v61.473h-128.24v74.51h128.24v62.921h-206.64V9.529h206.64v62.92h-128.24M2070.82 178.907c0-55.652-37.76-107.434-99.21-107.434-61.95 0-99.21 51.782-99.21 107.434s37.26 107.435 99.21 107.435c61.45 0 99.21-51.783 99.21-107.435zm-278.77 0c0-92.916 66.79-178.093 179.56-178.093 112.26 0 179.05 85.177 179.05 178.093 0 92.916-66.79 178.093-179.05 178.093-112.77 0-179.56-85.177-179.56-178.093zM186.32 131.97c0-31.46-21.299-58.563-54.206-58.563H78.398v117.109h53.716c32.907 0 54.206-27.086 54.206-58.546zM0 9.529h141.788c75.016 0 123.417 56.628 123.417 122.441s-48.401 122.423-123.417 122.423h-63.39v93.893H0V9.529zM492.17 106.314l-41.621 139.382h82.266L492.17 106.314zm73.081 241.972-13.054-41.134H431.69l-13.072 41.134h-83.73L455.882 9.529h72.105l122.442 338.757h-85.178zM782.055 77.277H705.61V9.529h231.793v67.748h-76.951v271.009h-78.397V77.277M2485.08 230.202V9.529h77.91v338.757h-81.78l-121.97-217.78v217.78h-78.4V9.529h81.78l122.46 220.673M1245.68 131.97c0-31.46-21.3-58.563-54.21-58.563h-53.72v117.109h53.72c32.91 0 54.21-27.086 54.21-58.546zM1059.36 9.529h142.29c75 0 123.4 56.628 123.4 122.441 0 47.425-25.17 89.517-67.28 109.369l67.77 106.947h-90.98l-60.03-93.893h-36.78v93.893h-78.39V9.529z" />
        </g>
      </svg> */
    </a>
  );
};

请随意取消嵌套的SVG元素，并使用它作为你的按钮的插图或插入你自己的。以下是一些样式，用于调整你的按钮的明暗模式。

a.patreon-button {
  border-radius: 5px;
  background-color: #ff424d;
  min-height: 42px;
  border: none;
  display: grid;
  place-items: center;
}
a.patreon-button svg {
  max-height: 12px;
  fill: white;
}
a.patreon-button:active,
a.patreon-button:active:focus,
a.patreon-button:hover {
  background-color: #e13d47;
}

.dark-palette a.patreon-button {
  background-color: white;
}

.dark-palette a.patreon-button svg {
  fill: #ff424d;
}
.dark-palette a.patreon-button:active,
.dark-palette a.patreon-button:active:focus,
.dark-palette a.patreon-button:hover {
  background-color: #efefef;
}