Chargify.js配置

参考

本文介绍了Chargify.js 竞猜彩票的配置方式,包括基本设置(包括作为独立竞猜彩票的字段)以及传递不同的付款方式类型。

基本配置

Call chargify.load anywhere on your page. It’s that simple!

chargify.load({
    选择器: '#chargify-form',
    公钥: 'your-public-api-key',
    类型: 'card',
    serverHost: '//acme.ikvrej.icu'
});

您可以在 配置–> Integrations 网站上Chargify中的“区域”部分。

chargify.load 还接受可选参数。这是一个更完整的示例:

chargify.load({
    // selector, where the 竞猜彩票 will be included on your page
    // optional, if you have a `selector` for every field ('fields' option)
    选择器: '#chargify-form',

    // (i.e. '1a2cdsdn3lkn54lnlkn')
    公钥: 'your-public-api-key',

    // form type
    类型: 'card',

    // points to your Chargify site
    serverHost: '//acme.ikvrej.icu',

    // flag to show/hide the credit card image
    // true: hides the credit card image
    hideCardImage: false,

    // optional label/translation (i.e. '(optional field)') for optional fields
    // Especially useful if you use 'fields'
    可选标签: '(optional field)',

    // required label/translation (i.e. '*') for required fields
    // Especially useful if you use 'fields'
    必需的Label: '*',

    // Use auto-populated dropdowns instead of plain text fields
    地址Dropdowns: true,

    // optional global styles that include 竞猜彩票 styles,
    // styles for fields, inputs, labels and messages
    style: {
        // to style an 竞猜彩票, use the 竞猜彩票's container selector
        '#chargify-form': { 边界: '1px dashed #ffc0cb57' },

        // `field` is the container for each field
        领域: {
            背景颜色: 'orange',
            paddingTop: '10px',
            底部填充: '10px',
            边界Radius: '5px'
        },

        // `input` is the input HTML element
        输入: {
            背景颜色: '#e6e6e6',
            paddingTop: '2px',
            底部填充: '1px',
            placeholder: { 颜色: '#eee' }
        },

        // `label` is the label container
        标签: {
            背景颜色: 'lightblue',
            paddingTop: '2px',
            底部填充: '1px'
        },

        // `message` is the invalid message container
        信息: {
            背景颜色: 'red',
            颜色: 'white',
            paddingTop: '2px',
            底部填充: '1px'
        }
    },

    // use this option if you want to include each field
    // in a separate 竞猜彩票
    领域s: {}
});

选择器

选择器 control where the 竞猜彩票 will appear on the page. By choosing a single selector in the chargify.load function, all payment profile information–first and last name, credit card numbers, billing address, etc.–will appear within a single 竞猜彩票.

<!DOCTYPE html>
<html>
    <head>
        <script src="//js.ikvrej.icu/latest/chargify.js"></script>
    </head>

    <body>
        <form id='chargify-form'>
            <div id="chargify1"></div>

            <!-- While testing, you can remove the "hidden" type to expose the token for easy viewing. -->
            <input id="chargify-token" 类型="hidden" />

            <button 类型="submit">Submit Form</button>
        </form>
    </body>

    <script>
        var chargify = new Chargify();

        chargify.load({
            // selector, where the 竞猜彩票 will be included on your page
            // optional, if you have a `selector` for every field ('fields' option)
            选择器: '#chargify1',

            // (i.e. '1a2cdsdn3lkn54lnlkn')
            公钥: 'your-public-api-key',

            // payment profile type you will accept
            类型: 'card',

            // points to your Chargify site
            serverHost: '//acme.ikvrej.icu'
        });
    </script>
</html>

In the example above, a single 竞猜彩票 will appear on the Chargify.js form with the ID chargify1. The selector can have any name.

以下部分详细介绍了显示竞猜彩票的另一种方法。

使用字段

If you want to display each field in a separate 竞猜彩票, or to group a collection of attributes by 竞猜彩票, all you have to do is define a 领域s option and include its selector ID on your frontend form. When choosing this path, be sure to specify all required fields via the 领域s option or the payment profile will fail to be created.

  // ...

  领域s: {
      // ...

      : {
          // selector where the 竞猜彩票 with this field will be included on your page
          选择器: '#chargify4',

          // overrides default label
          标签: 'FIRST NAME',

          // overrides default placeholder
          placeholder: 'John',

          // if a given field is optional by default, you can make it required
          必需的: true,

          // overrides default error message
          信息: 'First name is not valid. Please update it.',

          // overrides or defines max length
          maxlength: '30',

          // it overrides global styles for this field only
          style: {
              领域: {
                  背景颜色: '#f0dfdf',
                  padding: '3px',
                  边界Radius: '5px'
              },
              输入: {
                  背景颜色: '#f0fde1',
                  paddingTop: '2px',
                  底部填充: '1px',
                  placeholder: { 颜色: '#eee' }
              },
              标签: { paddingTop: '2px', 底部填充: '1px', 字体大小: '11px' },
              信息: { paddingTop: '2px', 底部填充: '1px' }
          }
      }
  }

3D安全配置

如果您的业务符合欧洲的PSD2要求,并且您将Chargify.js用作注册流程的一部分,则可能需要对表单进行更改。身份验证后网关(例如Stripe)不需要在Chargify.js表单上进行其他配置。

For all other supported gateways (Cybersource, Windcave, Braintree, Adyen), add the field threeDSecure: true to your Chargify load function. Please review our testing 3DS documentation for an overview of how the workflow will look for your gateway.

当Chargify.js在加载3DS配置时遇到错误时,可以将回调函数传递给要调用的加载函数。

chargify.load(configObject, {
    onThreeDsConfigError: function(error) {
        console.error(error);
    },
}

如果Chargify.js无法获得3D安全配置,或者您的站点网关配置中未启用强客户身份验证,那么我们将退回到默认的信用卡流程。

GoCardless配置

chargify.load({
    // selector, where the 竞猜彩票 will be included on your page
    // optional if you have a `selector` on each and every field
    选择器: '#chargify-form',

    // (i.e. '1a2cdsdn3lkn54lnlkn')
    公钥: 'your-public-api-key',

    // form type
    类型: 'gocardless',

    // selector for GoCardless header
    // that should make the page identifiable to customers
    选择器ForGoCardlessHeader: '#gocardless-header',

    // selector for GoCardless footer that should make customers aware
    // that payments are powered by GoCardless
    选择器ForGoCardlessFooter: '#gocardless-footer',

    // selector for adding link to switch between IBAN and local bank details
    // (this link will be automatically added after account number
    // if selector is not present)
    //selectorForToggleIbanOrLocalDetails: '#gocardless-toggle-iban',

    // if you want to add your custom styles for GoCardless modal,
    // set this to true to skip automatic injection of CSS styles
    //customGoCardlessModalStyles: true,

    // points to your Chargify site
    serverHost: '//acme.ikvrej.icu',
});

Braintree高级欺诈防护配置

为了使用Braintree Advanced Fraud Protection,您需要首先在Chargify中进行设置。 See 充电帮助Docs for details. Once set up in Chargify, you simply need to use the deviceData option in Chargify.js:

chargify.load({
    // selector, where the 竞猜彩票 will be included on your page
    // optional if you have a `selector` on each and every field
    选择器: '#chargify-form',

    // (i.e. '1a2cdsdn3lkn54lnlkn')
    公钥: 'your-public-api-key',

    // form type
    类型: 'card',

    // points to your Chargify site
    serverHost: '//acme.ikvrej.icu',

    deviceData: true,
});

先进的欺诈保护功能可与Braintree支持的所有付款方式一起使用:

  • 信用卡
  • 具有3D安全功能的信用卡
  • 贝宝
  • 苹果支付

苹果支付配置

苹果支付需要几件事才能正常工作:

  • 您必须在Braintree中启用了Apple Pay选项
  • 与Safari浏览器兼容的设备
  • 该页面需要通过SSL进行投放
  • 您需要在Braintree面板中添加使用Chargify.js的子域
chargify.load({
    // selector, where the 竞猜彩票 will be included on your page
    // optional if you have a `selector` on each and every field
    选择器: '#chargify-form',

    // (i.e. '1a2cdsdn3lkn54lnlkn')
    公钥: 'your-public-api-key',

    // form type
    类型: 'apple_pay',

    // This will be presented in the Apple Pay modal window
    applePayLabel: 'Example product',
    applePayAmount: '10', // the amount should be formatted with period, for example "10.5"

    // selector for Apple Pay button (Apple Pay button will be shown inside of it)
    选择器ForApplePayButton: '#apple-pay',

    // points to your Chargify site
    serverHost: '//acme.ikvrej.icu',
});

您可以将带有回调的第二个对象传递给Apple Pay的加载功能。

chargify.load(configObject, {
    onApplePayAuthorized: function() {
        // this function is called after apple pay authorization passes (user has authorized payment via fingerprint)
    },
    onApplePayNotSupported: function() {
        // this function is called when apple pay is not supported by user's device
    },
    onApplePayError: function(err) {
        // this function is called on internal error related to apple pay
    }
}

贝宝配置

chargify.load({
    // selector, where the 竞猜彩票 will be included on your page
    // optional if you have a `selector` on each and every field
    选择器: '#chargify-form',

    // (i.e. '1a2cdsdn3lkn54lnlkn')
    公钥: 'your-public-api-key',

    // form type
    类型: 'pay_pal',

    // selector for PayPal button (PayPal button will be shown inside of it)
    选择器ForPayPalButton: '#pay-pal',

    // points to your Chargify site
    serverHost: '//acme.ikvrej.icu',
});

您可以将带有回调的第二个对象传递给PayPal的加载功能。

chargify.load(configObject, {
    onPayPalAuthorized: function() {
        // this function is called after PayPal authorization passes (user has completed PayPal flow)
    },
    onPayPalError: function(err) {
        // this function is called on internal error related to PayPal
    }

}

其他回调

Besides callbacks described above and related to given features or gateways, chargify.js makes available onCardTypeDetected callback.

chargify.load(configObject, {
    onCardTypeDetected: function(类型) {
        // this function is called when a card type provided by a customer is detected
    }
}

Returned card types: american-express, diners, diners-club, discover, jcb, maestro, mastercard, visa.

Chargify.js字典

全球领域

栏位名称 必需的? 描述
选择器 #chargify-form 可选的 将竞猜彩票拉入页面。可以在整体表单或每个字段中定义。
公钥 chjs_g3ifjs... 需要 向特定的Chargify网站验证您的Chargify.js表单。
类型 card 需要 The type of payment profile the form will accept. Can be card, bank, apple_pay, pay_pal or gocardless.
serverHost //acme.ikvrej.icu 需要 您的Chargify网站的完整URL。
gatewayHandle stripe 可选的 如果启用了多网关,则向其发送付款配置文件的特定网关。
hideCardImage true 可选的 选择是否显示信用卡图像。
可选标签 (optional) 可选的 当某些字段为可选字段时,将显示一个标签。对于翻译很有用。
必需的Label * 可选的 表示必填字段的标签。
选择器ForGoCardlessHeader #gocardless-header GoCardless需要 将GoCardless标头添加到页面。
选择器ForGoCardlessFooter gocardless-footer GoCardless需要 添加一个GoCardless,以指示付款由GoCardless提供支持。
选择器ForToggleIbanOrLocalDetails #gocardless-toggle-iban GoCardless可选 添加链接以在输入IBAN或本地银行详细信息之间切换。如果不存在,此链接将自动添加到“帐号”字段之后。
customGoCardlessModalStyles true GoCardless可选 设置为true时,它将允许您为GoCardless模式添加自定义样式。否则,将自动显示GoCardless的CSS。
applePayLabel Gold Product 苹果支付所需 在Apple Pay模式中更改购买标签。
applePayAmount 10.5 苹果支付所需 指定购买金额。
选择器ForApplePayButton #apple-pay 苹果支付所需 苹果支付按钮的选择器。
选择器ForPayPalButton #pay-pal 贝宝所需 贝宝按钮的选择器。
deviceData true 需要使用Braintree Advanced Fraud Protection功能 作为Braintree Advanced Fraud Protection功能的一部分,启用收集设备数据信息。
地址Dropdowns true 可选,不支持GoCardless 将国家和州字段显示为下拉列表,而不是纯文本字段。

以下字段更适合样式化特定字段,但可以为其全局指定CSS:

栏位名称 必需的? 描述
标签 First Name 可选的 竞猜彩票上方的标签。
placeHolder Jane 可选的 输入中显示的默认文本。
必需的 true 可选的 指明是否需要字段才能提交表单。
信息 This field is not valid. Please update it 可选的 无效提交中显示的文本。
最长长度 30 可选的 该字段允许的最大字符数。

款式

请注意,可以在整个表单中全局设置样式,也可以在特定字段上分别设置样式。它们都是可选的。

可以设置样式的对象:

栏位名称 描述
领域 这将应用于该字段的容器。
输入 竞猜彩票中显示的文本。
标签 竞猜彩票的标签。
信息 无效提交中显示的文本。

可用样式:

栏位名称 描述
背景颜色 orange 更改背景颜色。
paddingTop 10px 在顶部添加一些空间。
底部填充 10px 在底部添加一些空间。
边界Radius 5px 定义元素角的半径。
颜色 blue 更改输入中文本的颜色。
边界 1px dashed #ffc0cb57 在竞猜彩票周围创建边框。
字体大小 11px 输入中字体的大小。

信用卡栏位

栏位名称 必需的? 描述
Joe 可选的 持卡人名字
Doe 可选的 持卡人姓氏
4242 4242 4242 4242 需要 信用卡号码
08 需要 卡到期月份
2022 需要 卡有效期
冠状病毒 123 可选(网关设置可能需要) 3位数或4位数的卡验证值。该值仅传递给支付网关
地址 123 Main St. 可选(网关设置可能需要) 信用卡或银行帐户帐单地址。该值仅传递给支付网关
地址2 i.e. Apt. 100 可选的 客户帐单地址的第二行
Boston 可选(网关设置可能需要) 信用卡帐单地址城市。该值仅传递给支付网关
MA 可选(网关设置可能需要) 信用卡帐单邮寄地址状态,最好为2个字母的格式。该值仅传递给支付网关
压缩 12345 可选(网关设置可能需要) 信用卡帐单地址的邮政编码。该值仅传递给支付网关
国家 US 可选(网关设置可能需要) 信用卡帐单地址国家/地区,最好采用ISO 3166-1 alpha-2格式。该值仅传递到支付网关。某些网关要求使用特定格式的国家/地区代码。请检查网关的文档

ACH领域

栏位名称 需要 描述
Joe 可选的 银行帐户上的名字
Doe 可选的 卡或银行帐户上的姓氏
银行名称 Test Bank 需要 客户帐户所在银行的名称
routingNumber 110000000 需要 银行的转帐号码
账号 000123456789 需要 客户的银行帐号
帐户类型 checking ——– this defaults to checking and cannot be changed
accountHolderType personal 需要 may be personal (default) or business
地址 123 Main St. 产品配置或网关设置可能要求可选 银行帐户帐单街道地址(即123 Main St.)。该值仅传递给支付网关
地址2 Apt. 100 可选的 客户帐单地址的第二行
Boston 可选(您的产品配置或网关设置可能需要) 银行帐户帐单地址城市。该值仅传递给支付网关
MA 可选(网关设置可能需要) 银行帐户帐单邮寄地址状态,最好为2个字母的格式。该值仅传递给支付网关
压缩 12345 可选(网关设置可能需要) 银行帐户帐单邮寄地址的邮政编码。该值仅传递给支付网关
国家 US 可选(网关设置可能需要) 银行帐户帐单邮寄地址的国家/地区,最好采用ISO 3166-1 alpha-2格式。该值仅传递到支付网关。某些网关要求使用特定格式的国家/地区代码。请检查网关的文档

GoCardless字段

栏位名称 需要 描述
Joe 需要 银行帐户上的名字
Doe 需要 银行帐户的姓氏
电子邮件 joe@chargify.test 仅适用于Becs NZ计划 客户的电子邮件
电话 +640800000000 仅适用于Becs NZ计划 客户的电话号码
银行名称 Test Bank 需要 客户帐户所在银行的名称
银行 FR1420041010050500013M02606 需要 客户的国际银行帐号(IBAN)。如果本地银行详细信息为空,则需要通过
routingNumber 19043 需要 银行代码。或者,您可以提供一个iban。
分行代码 200000 需要 分行代码。或者,您可以提供一个iban。
账号 55779911 需要 客户的银行帐号。或者,您可以提供IBAN。
accountHolderType personal 需要 may be personal (default) or business
地址 123 Main St. 需要 银行帐户帐单街道地址(即123 Main St.)。该值仅传递给支付网关
地址2 Apt. 100 可选的 客户帐单地址的第二行
London 需要 银行帐户帐单地址城市。
LND 需要 银行帐户帐单邮寄地址状态,格式为2或3个字母。
压缩 E1W 3SS 需要 银行帐户帐单邮寄地址的邮政编码。
国家 GB 需要 银行帐户帐单邮寄地址的国家/地区,采用ISO 3166-1 alpha-2格式。
swedishIdentityNumber 198112289874 仅适用于Autogiro方案 瑞典公民/身份证号码
danishIdentityNumber 0101701234 仅对于Betalingsservice方案是必需的 丹麦公民/身份证号码

苹果支付领域

栏位名称 需要 描述
Joe 可选的 持卡人名字
Doe 可选的 持卡人姓氏
地址 123 Main St. 可选(网关设置可能需要) 信用卡或银行帐户帐单地址。该值仅传递给支付网关
地址2 i.e. Apt. 100 可选的 客户帐单地址的第二行
Boston 可选(网关设置可能需要) 信用卡帐单地址城市。该值仅传递给支付网关
MA 可选(网关设置可能需要) 信用卡帐单邮寄地址状态,最好为2个字母的格式。该值仅传递给支付网关
压缩 12345 可选(网关设置可能需要) 信用卡帐单地址的邮政编码。该值仅传递给支付网关
国家 US 可选(网关设置可能需要) 信用卡帐单地址国家/地区,最好采用ISO 3166-1 alpha-2格式。该值仅传递到支付网关。某些网关要求使用特定格式的国家/地区代码。请检查网关的文档

贝宝字段

栏位名称 需要 描述
Joe 可选的 持卡人名字
Doe 可选的 持卡人姓氏
地址 123 Main St. 可选(网关设置可能需要) 信用卡或银行帐户帐单地址。该值仅传递给支付网关
地址2 i.e. Apt. 100 可选的 客户帐单地址的第二行
Boston 可选(网关设置可能需要) 信用卡帐单地址城市。该值仅传递给支付网关
MA 可选(网关设置可能需要) 信用卡帐单邮寄地址状态,最好为2个字母的格式。该值仅传递给支付网关
压缩 12345 可选(网关设置可能需要) 信用卡帐单地址的邮政编码。该值仅传递给支付网关
国家 US 可选(网关设置可能需要) 信用卡帐单地址国家/地区,最好采用ISO 3166-1 alpha-2格式。该值仅传递到支付网关。某些网关要求使用特定格式的国家/地区代码。请检查网关的文档