例子

参考

提供以下代码集合作为参考,并按原样提供。您有责任确保它在您的页面上正常运行,并为将来维护此代码。您对此代码进行的任何修改,或对类似部分中的代码进行的修改,都是您的责任。

以下示例均包含顺序命名为chargify1,chargify2等的选择器。但是,选择器可以命名为任何名称。

Chargify.js表单示例

面向订阅者的HTML表单示例
<!DOCTYPE html>
<html>
  <head>
    <title>Chargify</title>

    <script src="//js.ikvrej.icu/latest/chargify.js"></script>  <!-- This links to the Chargify hosted iframes for Chargify.js -->
    <link href="//fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
    <style>
      body {
        font-family: 'Lato', sans-serif;
        background-color: #F2F4F8;
        overflow: scroll;
        min-height: 800px;
        height: 100vh;
      }

      h1 {
        margin-top: 0;
      }

      button {
        padding: 10px;
        color: #FFF;
        border-radius: 6px;
        background: #47C486;
        font-size: 14px;
        font-weight: 500;
        border: none;
        margin-top: 5px;
        padding-left: 15px;
        padding-right: 15px;
      }

      .chargify-js-wrapper {
        margin: 0 auto;
        display: flex;
        flex-flow: column;
        width: fit-content;
        height: 100%;
        justify-content: center;
        align-items: center;
      }

      .chargify-js-content {
        padding: 20px;
        border-radius: 10px;
        background: #FFF;
        width: 50%;
        box-shadow: 0 5px 10px 0 rgba(0,0,0,0.175);
        margin: 0 auto;
        min-width: 300px;
        border-top: 5px solid #439aea;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
      }

      #chargify1 {
        display: flex;
      }

      #chargify1 iframe {
        width: 100% !important;
      }

      #chargify2 {
        display: flex;
      }

      #chargify2 iframe {
        width: 100% !important;
      }

      #chargify3 iframe {
        width: 100% !important;
      }

      #chargify4 iframe {
        width: 100% !important;
      }

      #chargify5 iframe {
        width: 100% !important;
      }

      #chargify6 iframe {
        width: 100% !important;
      }

      #chargify7 iframe {
        width: 100% !important;
      }

      #chargify8 iframe {
        width: 100% !important;
      }

      #chargify9 iframe {
        width: 100% !important;
      }

      #chargify10 iframe {
        width: 100% !important;
      }

      #chargify11 iframe {
        width: 100% !important;
      }

      #chargify12 iframe {
        width: 100% !important;
      }

      .cardfront {
        display: flex;
        flex-flow: column;
      }

      .cardback {
        display: flex;
        flex-flow: row;
      }

      .cardback div {
        margin-right: 15px;
      }

      .cardback div:last-child {
        margin-right: 0;
      }

      .name {
        display: flex;
        flex-flow: row;
      }

      .name div {
        margin-right: 15px;
        width: 100%;
      }

      .name div:last-child {
        margin-right: 0;
        width: 100%;
      }

      .address3 {
        display: flex;
        flex-flow: row;
      }

      .address3 div {
        margin-right: 15px;
        width: 100%;
      }

      .address3 div:last-child {
        margin-right: 0;
        width: 100%;
      }
      .address4 {
        display: flex;
        flex-flow: row;
      }

      .address4 div {
        margin-right: 15px;
        width: 100%;
      }

      .address4 div:last-child {
        margin-right: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div class="chargify-js-wrapper">
      <div class="chargify-js-content">
        <h1>Chargify</h1>

        <form class="host-form" id='host-form'>
          <div class="cardfront">
            <div id="chargify1"></div>
          </div>

          <div class="cardback">
            <div id="chargify2"></div>
            <div id="chargify3"></div>
            <div id="chargify4"></div>
          </div>

          <div class="name">
            <div id="chargify5"></div>
            <div id="chargify6"></div>
          </div>

          <div class="address1">
            <div id="chargify7"></div>
          </div>

          <div class="address2">
            <div id="chargify8"></div>
          </div>

          <div class="address3">
            <div id="chargify9"></div>
            <div id="chargify10"></div>
          </div>

          <div class="address4">
            <div id="chargify11"></div>
            <div id="chargify12"></div>
          </div>

          <button type="submit" class="host-button">Submit Host Form</button>
        </form>
      </div>
    </div>

    <script src="./assets/load.js"></script>   <!-- This contains your Chargify.js file -->
    <script src="./assets/submit.js"></script>  <!-- This pauses form submission to create a token -->
  </body>
</html>

最小的HTML形式

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

    <body>
        <div id="gocardless-header"></div>

        <form id='chargify-form'>
            <div id="chargify1"></div>
            <div id="chargify2"></div>
            <div id="chargify3"></div>
            <div id="chargify4"></div>
            <div id="chargify5"></div>
            <div id="chargify6"></div>
            <div id="chargify7"></div>
            <div id="chargify8"></div>
            <div id="chargify9"></div>
            <div id="chargify10"></div>
            <div id="chargify11"></div>
            <div id="chargify12"></div>
            <div id="chargify13"></div>
            <div id="chargify14"></div>

            <input id="chargify-token" type="hidden" />

            <button type="submit">Submit Form</button>
        </form>

        <div id="gocardless-footer"></div>
    </body>
</html>

最少的Chargify.js示例

信用卡最少的例子

The following example contains a minimalist approach to working with Chargify.js and credit cards. All the fields will appear as one iframe where you define the #chargify1 selector, and this form accepts credit cards.

<script>
    var chargify = new Chargify();

    chargify.load({
        selector: '#chargify1',
        publicKey: 'your-public-api-key',
        type: 'card',
        serverHost: '//acme.ikvrej.icu'
    });
</script>

ACH的最小示例

The following example contains a minimalist approach to working with Chargify.js and bank accounts. Note that the only difference from the example above is that type has been set to bank.

<script>
    var chargify = new Chargify();

    chargify.load({
        selector: '#chargify1',
        publicKey: 'your-public-api-key',
        type: 'bank',
        serverHost: '//acme.ikvrej.icu'
    });
</script>

GoCardless的最小示例

以下示例包含通过GoCardless使用Chargify.js和Direct Debit的极简方法。

有关GoCardless的更多信息,请参见以下资源:

<script>
    var chargify = new Chargify();

    chargify.load({
        selector: '#chargify1',
        publicKey: 'your-public-api-key',
        type: 'gocardless',
        selectorForGoCardlessHeader: '#gocardless-header',
        selectorForGoCardlessFooter: '#gocardless-footer',
        serverHost: '//acme.ikvrej.icu'
    });
</script>

Apple Pay的最小示例

以下示例包含通过Braintree使用Chargify.js和Apple Pay的极简方法。

有关通过Braintree进行Apple Pay的更多信息,请参见以下资源: 通过Braintree进行Apple Pay概述

<script>
    var chargify = new Chargify();

    chargify.load({
        selector: '#chargify1',
        publicKey: 'your-public-api-key',
        type: 'apple_pay',
        applePayLabel: 'Example product',
        applePayAmount: '10', // the amount should be formatted with period ".", for example "10.5"
        selectorForApplePayButton: '#apple-pay',
        serverHost: '//acme.ikvrej.icu'
    }, {
        // this function is called after Apple Pay authorization passes (i.e. user has authorized payment via fingerprint)
        onApplePayAuthorized: function() {
            chargify.token(
                document.querySelector('.host-form'),

                function success(token, message) {
                    console.log('{host} token SUCCESS - token: ', token);
                },

                function error(err) {
                    console.log('{host} token ERROR - err: ', err);
                }
            );
        }
    });
</script>

贝宝的最小示例

以下示例包含通过Braintree使用Chargify.js和PayPal的极简方法。

<script>
    var chargify = new Chargify();

    chargify.load({
        selector: '#chargify1',
        publicKey: 'your-public-api-key',
        type: 'pay_pal',
        selectorForApplePayButton: '#pay-pal',
        serverHost: '//acme.ikvrej.icu'
    }, {
        // this function is called after PayPal authorization passes (i.e. user has completed PayPal flow)
        onPayPalAuthorized: function() {
            chargify.token(
                document.querySelector('.host-form'),

                function success(token, message) {
                    console.log('{host} token SUCCESS - token: ', token);
                },

                function error(err) {
                    console.log('{host} token ERROR - err: ', err);
                }
            );
        }
    });
</script>

完整的Chargify.js示例

信用卡的完整示例

以下是将Chargify.js与信用卡一起使用的完整示例。

var chargify = new Chargify();

chargify.load({
    publicKey: 'your-public-api-key',
    type: 'card',
    serverHost: '//acme.ikvrej.icu',
    hideCardImage: false,
    optionalLabel: '(optional field)',
    requiredLabel: '*',
    addressDropdowns: true,
    style: {
        '#chargify-form': { border: '1px dashed #ffc0cb57' },
        field: {
            backgroundColor: 'orange',
            paddingTop: '10px',
            paddingBottom: '10px',
            borderRadius: '5px'
        },
        input: {
            backgroundColor: '#e6e6e6',
            paddingTop: '2px',
            paddingBottom: '1px',
            placeholder: { color: '#eee' }
        },
        label: {
            backgroundColor: 'lightblue',
            paddingTop: '2px',
            paddingBottom: '1px'
        },
        message: {
            backgroundColor: 'red',
            color: 'white',
            paddingTop: '2px',
            paddingBottom: '1px'
        }
    },
    fields: {
        firstName: {
            selector: '#chargify1',
            label: 'FIRST NAME',
            placeholder: 'John',
            required: false,
            message: 'First name is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    placeholder: { color: 'green' }
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        lastName: {
            selector: '#chargify1',
            label: 'LAST NAME',
            placeholder: 'Doe',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        number: {
            selector: '#chargify2',
            label: 'Number',
            placeholder: 'xxxx xxxx xxxx xxxx',
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        month: {
            selector: '#chargify2',
            label: 'Mon',
            placeholder: 'mm',
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        year: {
            selector: '#chargify2',
            label: 'Year',
            placeholder: 'yyyy',
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        cvv: {
            selector: '#chargify2',
            label: 'CVV code',
            placeholder: '123',
            required: false,
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        address: {
            selector: '#chargify3',
            label: 'Address',
            placeholder: '1234 Hill St',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '70',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        address2: {
            selector: '#chargify3',
            label: 'Address 2',
            placeholder: '1234 Hill St',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '70',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        city: {
            selector: '#chargify3',
            label: 'City',
            placeholder: 'Austin',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        country: {
            selector: '#chargify3',
            label: 'Country',
            placeholder: 'Select...',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '2',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                select: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        state: {
            selector: '#chargify3',
            label: 'State',
            placeholder: 'Select...',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '2',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                select: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        zip: {
            selector: '#chargify3',
            label: 'Zip Code',
            placeholder: '10001',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '5',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        }
    }
});

ACH的完整示例

以下是将Chargify.js与ACH结合使用的完整示例。 ACH仅适用于某些网关。要了解有关ACH和Chargify的更多信息,请查看我们的 文档。

var chargify = new Chargify();

chargify.load({
    publicKey: 'your-public-api-key',
    type: 'bank',
    serverHost: '//acme.ikvrej.icu',
    hideCardImage: false,
    optionalLabel: '(optional field)',
    requiredLabel: '*',
    addressDropdowns: true,
    style: {
        '#chargify-form': { border: '1px dashed #ffc0cb57' },
        field: {
            backgroundColor: 'orange',
            paddingTop: '10px',
            paddingBottom: '10px',
            borderRadius: '5px'
        },
        input: {
            backgroundColor: '#e6e6e6',
            paddingTop: '2px',
            paddingBottom: '1px',
            placeholder: { color: '#eee' }
        },
        label: {
            backgroundColor: 'lightblue',
            paddingTop: '2px',
            paddingBottom: '1px'
        },
        message: {
            backgroundColor: 'red',
            color: 'white',
            paddingTop: '2px',
            paddingBottom: '1px'
        }
    },
    fields: {
        firstName: {
            selector: '#chargify1',
            label: 'FIRST NAME',
            placeholder: 'John',
            required: false,
            message: 'First name is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    placeholder: { color: 'green' }
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        lastName: {
            selector: '#chargify1',
            label: 'LAST NAME',
            placeholder: 'Doe',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        bankName: {
            selector: '#chargify2',
            label: 'Bank Name',
            placeholder: 'My Bank',
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        routingNumber: {
            selector: '#chargify2',
            label: 'Routing',
            placeholder: '123412341234',
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        accountNumber: {
            selector: '#chargify2',
            label: 'Acct. Number',
            placeholder: '123412341234',
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        accountType: {
            selector: '#chargify2',
            label: 'Acct. Type',
            placeholder: 'Select One...',
            required: true,
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        accountHolderType: {
            selector: '#chargify2',
            label: 'Acct. Holder',
            placeholder: 'Select One...',
            required: true,
            message: 'This field is not valid. Please update it.',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        address: {
            selector: '#chargify3',
            label: 'Address',
            placeholder: '1234 Hill St',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '70',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        address2: {
            selector: '#chargify3',
            label: 'Address 2',
            placeholder: '1234 Hill St',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '70',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        city: {
            selector: '#chargify3',
            label: 'City',
            placeholder: 'Austin',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        country: {
            selector: '#chargify3',
            label: 'Country',
            placeholder: 'Select...',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '2',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                select: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        state: {
            selector: '#chargify3',
            label: 'State',
            placeholder: 'Select...',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '2',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                select: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        zip: {
            selector: '#chargify3',
            label: 'Zip Code',
            placeholder: '10001',
            required: false,
            message: 'This field is not valid. Please update it.',
            maxlength: '5',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px'
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        }
    }
});

GoCardless的完整示例

以下是将Chargify.js与GoCardless结合使用的完整示例。

有关GoCardless的更多信息,请参见以下资源:

var chargify = new Chargify();

chargify.load({
    publicKey: 'your-public-api-key',
    type: 'gocardless',
    selectorForGoCardlessHeader: '#gocardless-header',
    selectorForGoCardlessFooter: '#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,

    serverHost: '//acme.ikvrej.icu',
    hideCardImage: false,
    optionalLabel: '(optional field)',
    requiredLabel: '*',
    style: {
        '#chargify-form': { border: '1px dashed #ffc0cb57' },
        field: {
            backgroundColor: 'orange',
            paddingTop: '10px',
            paddingBottom: '10px',
            borderRadius: '5px'
        },
        input: {
            backgroundColor: '#e6e6e6',
            paddingTop: '2px',
            paddingBottom: '1px',
            placeholder: { color: '#eee' }
        },
        label: {
            backgroundColor: 'lightblue',
            paddingTop: '2px',
            paddingBottom: '1px'
        },
        message: {
            backgroundColor: 'red',
            color: 'white',
            paddingTop: '2px',
            paddingBottom: '1px'
        }
    },
    fields: {
        firstName: {
            selector: '#chargify1',
            label: 'FIRST NAME',
            placeholder: 'John',
            required: true,
            message: 'First name is not valid. Please update it.',
            maxlength: '30',
            style: {
                field: {
                    backgroundColor: '#ffdfdf',
                    padding: '3px',
                    borderRadius: '5px'
                },
                input: {
                    backgroundColor: '#fdfde1',
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    placeholder: { color: 'green' }
                },
                label: {
                    paddingTop: '2px',
                    paddingBottom: '1px',
                    fontSize: '11px'
                },
                message: { paddingTop: '2px', paddingBottom: '1px' }
            }
        },
        lastName: { selector: '#chargify2' },

        country: { selector: '#chargify3' },
        address: { selector: '#chargify4' },
        address2: { selector: '#chargify5' },
        city: { selector: '#chargify6' },
        state: { selector: '#chargify7' },
        zip: { selector: '#chargify8' },

        bankName: { selector: '#chargify9' },
        bankIban: { selector: '#chargify10' },
        branchCode: { selector: '#chargify11' },
        routingNumber: { selector: '#chargify12' },
        accountNumber: { selector: '#chargify13' },
        accountHolderType: { selector: '#chargify14' },
    }
});

Apple Pay的完整示例

以下是将Chargify.js与Apple Pay结合使用的完整示例。

有关通过Braintree进行Apple Pay的更多信息,请参见以下资源 通过Braintree进行Apple Pay概述

chargify.load({
    publicKey: 'your-public-api-key',
    type: 'apple_pay',
    applePayLabel: 'Example product',
    applePayAmount: '10', // the amount should be formatted with period ".", for example "10.5"
    selectorForApplePayButton: '#apple-pay',
    serverHost: 'h//acme.ikvrej.icu',
    fields: {
        firstName: {
            selector: '#chargify-form',
            required: true,
        },
        lastName: {
            selector: '#chargify-form',
            required: true,
        },
        address: {
            selector: '#chargify-billing',
        },
        address2: {
            selector: '#chargify-billing',
        },
        city: {
            selector: '#chargify-billing',
        },
        state: {
            selector: '#chargify-billing',
        },
        zip: {
            selector: '#chargify-billing',
        },
        country: {
            selector: '#chargify-billing',
        },
    },
}, {
    // this function is called after Apple Pay authorization passes (i.e. user has authorized payment via fingerprint)
    onApplePayAuthorized: function() {
        chargify.token(
            document.querySelector('.host-form'),

            function success(token, message) {
                console.log('{host} token SUCCESS - token: ', token);
            },

            function error(err) {
                console.log('{host} token ERROR - err: ', err);
            }
        );
    },
    onApplePayNotSupported: function() {
        alert('Your browser or device does not support Apple Pay on the web. Open this page in Safari on a compatible device.');
    },
    onApplePayError: function(err) {
        alert(err);
    }
});

贝宝的完整示例

以下是将Chargify.js与PayPal结合使用的完整示例。

chargify.load({
    publicKey: 'your-public-api-key',
    type: 'pay-pal',
    selectorForPayPalButton: '#pay-pal',
    serverHost: 'h//acme.ikvrej.icu',
    fields: {
        firstName: {
            selector: '#chargify-form',
            required: true,
        },
        lastName: {
            selector: '#chargify-form',
            required: true,
        },
        address: {
            selector: '#chargify-billing',
        },
        address2: {
            selector: '#chargify-billing',
        },
        city: {
            selector: '#chargify-billing',
        },
        state: {
            selector: '#chargify-billing',
        },
        zip: {
            selector: '#chargify-billing',
        },
        country: {
            selector: '#chargify-billing',
        },
    },
}, {
    // this function is called after PayPal authorization passes (i.e. user has completed PayPal flow)
    onPayPalAuthorized: function() {
        chargify.token(
            document.querySelector('.host-form'),

            function success(token, message) {
                console.log('{host} token SUCCESS - token: ', token);
            },

            function error(err) {
                console.log('{host} token ERROR - err: ', err);
            }
        );
    },
    onPayPalError: function(err) {
        alert(err);
    }
});