Translation disclaimer

Documentation is written in English and subsequently translated. This page, therefore, might not have the most up-to-date content. If any questions arise relating to the accuracy of the translated content, please refer to the English version of the page.

Menu

创建会话以便使用卡和 CVC 进行支付

为卡详情和 CVC 创建单独的会话，从而使用我们的 Web SDK 来确保您客户支付详情的安全。

完整集成示例代码

Copied!
<section class="container">
    <section class="card">
        <form class="checkout" id="card-form">

            <label class="label" for="card-pan">Card number <span class="type"></span></label>
            <section id="card-pan" class="field"></section>

            <section class="col-2">
                <section class="col">
                    <label class="label" for="card-expiry">Expiry date</label>
                    <section id="card-expiry" class="field"></section>
                </section>

                <section class="col">
                    <label class="label" for="card-cvv">CVV</label>
                    <section id="card-cvv" class="field"></section>
                </section>
            </section>

            <button class="submit" type="submit">Pay Now</button>
        </form>
        <button class="clear" id="clear">Clear</button>
    </section>
</section>

<script src="https://try.access.worldpay.com/access-checkout/v1/checkout.js"></script>

// For production change to "https://access.worldpay.com/access-checkout/v1/checkout.js"
body {
  font: 11px/22px sans-serif;
  text-transform: uppercase;
  background-color: #f7f7f7;
  color: black;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  position: relative;
  background: white;
  padding: 40px 30px;
  top: -30px;
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  box-shadow: 3px 3px 60px 0px rgba(0, 0, 0, 0.1);
}
.card .checkout .col-2 {
  display: flex;
}
.card .checkout .col-2 .col:first-child {
  margin-right: 15px;
}
.card .checkout .col-2 .col:last-child {
  margin-left: 15px;
}
.card .checkout .label .type {
  color: green;
}
.card .checkout.visa .label .type:before {
  content: "(visa)";
}
.card .checkout.mastercard .label .type:before {
  content: "(master card)";
}
.card .checkout.amex .label .type:before {
  content: "(american express)";
}
.card .checkout .field {
  height: 40px;
  border-bottom: 1px solid lightgray;
}
.card .checkout .field#card-pan {
  margin-bottom: 30px;
}
.card .checkout .field.is-onfocus {
  border-color: black;
}
.card .checkout .field.is-empty {
  border-color: orange;
}
.card .checkout .field.is-invalid {
  border-color: red;
}
.card .checkout .field.is-valid {
  border-color: green;
}
.card .checkout .submit {
  background: red;
  position: absolute;
  cursor: pointer;
  left: 50%;
  bottom: -60px;
  width: 200px;
  margin-left: -100px;
  color: white;
  outline: 0;
  font-size: 14px;
  border: 0;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 15px 0;
  transition: background 0.3s ease;
}
.card .checkout.is-valid .submit {
  background: green;
}

.clear {
  background: grey;
  position: absolute;
  cursor: pointer;
  left: 50%;
  bottom: -120px;
  width: 200px;
  margin-left: -100px;
  color: white;
  outline: 0;
  font-size: 14px;
  border: 0;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 15px 0;
  transition: background 0.3s ease;
}
(function () {
  var form = document.getElementById("card-form");
  var clear = document.getElementById("clear");
  var id = "your-checkout-id";
  // Create custom style config to pass into Worldpay.checkout.init()
  var styles = {
    input: {
      "font-size": "14px",
      "font-family": "Arial"
    },
    "input.is-valid": {
      color: "green"
    },
    "input.is-invalid": {
      color: "red"
    }
  };
  var fields = {
    pan: {
      selector: "#card-pan",
      placeholder: "Card number"
    },
    expiry: {
      selector: "#card-expiry",
      placeholder: "MM/YY"
    },
    cvv: {
      selector: "#card-cvv",
      placeholder: "CVV"
    }
  };
  // Create accessibility config to pass into Worldpay.checkout.init()
  var accessibility = {
     ariaLabel: {
       pan: "my custom aria label for pan input",
       expiry: "my custom aria label for expiry input",
       cvv: "my custom aria label for cvv input"
     },
     lang: {
       locale: "en-GB"
     },
     title: {
       enabled: true,
       pan: "my custom title for pan",
       expiry: "my custom title for expiry date",
       cvv: "my custom title for security code"
     }
  };
  // Create card brand configuration to control which card brands you accept
  var acceptedCardBrands = ["amex", "diners", "discover", "jcb", "maestro", "mastercard", "visa"]

  Worldpay.checkout.init(
    {
      id: id,
      styles: styles,
      form: "#card-form",
      fields: fields,
      accessibility: accessibility,
      acceptedCardBrands: acceptedCardBrands
    },
    function(err, checkout) {
      if (err) {
        // handle init error
        return;
      }
      form.addEventListener("submit", function(event) {
        event.preventDefault();
        checkout.generateSessions(function(err, sessions) {
          if (err) {
            // handle session state generation error
            return;
          }
          // send sessions to the server
          console.log('Sessions Card : ' + sessions.card + ', Sessions CVV : '+ sessions.cvv);
        });
      });

      clear.addEventListener("click", function(event) {
        event.preventDefault();
        checkout.clearForm(function() {
          // trigger desired behaviour on cleared form
          console.log('Form successfully cleared');
        });
      });
    }
  );
  })();

创建您的结账表

创建表格时，您必须使用独特的标识符和字段配置。然后，您必须将默认高度应用于字段。

以下是您如何为字段配置设置独特标识符的示例：

HTML

Copied!
<form class="checkout" id="card-form">
      <label class="label" for="card-pan">Card number <span class="type"></span></label>
      <section id="card-pan" class="field"></section>
      <section class="col-2">
        <section class="col">
          <label class="label" for="card-expiry">Expiry date</label>
        <section id="card-expiry" class="field"></section>
        </section>
        <section class="col">
          <label class="label" for="card-cvv">CVV</label>
          <section id="card-cvv" class="field"></section>
        </section>
      </section>
      <button class="submit" type="submit">Pay Now</button>
    </form>

以及您如何设置结账页面布局的示例：

CSS

Copied!
.card .checkout .col-2 {
  display: flex;
}
.card .checkout .col-2 .col:first-child {
  margin-right: 15px;
}
.card .checkout .col-2 .col:last-child {
  margin-left: 15px;
}
.card .checkout .field {
  height: 40px;
  border-bottom: 1px solid lightgray;
}
.card .checkout .field#card-pan {
  margin-bottom: 30px;
}

初始化 SDK

一旦包含了用于获取 SDK 的脚本并设置了表单和字段配置，您就必须初始化 SDK。

请使用 Worldpay.checkout.init 方法来进行。

在初始化 SDK 时，您必须提供 AccessCheckoutIdentity、独特表格标识符以及字段配置。

可选配置

您还可以选择提供您的：

示例 - 初始化 SDK（必需参数/配置）

Copied!
(function () {
  var form = document.getElementById("card-form");
  var clear = document.getElementById("clear");
  var id = "your-checkout-id";
  // Create custom style config to pass into Worldpay.checkout.init()
  var styles = {
    input: {
      "font-size": "14px",
      "font-family": "Arial"
    },
    "input.is-valid": {
      color: "green"
    },
    "input.is-invalid": {
      color: "red"
    }
  };
  var fields = {
    pan: {
      selector: "#card-pan",
      placeholder: "Card number"
    },
    expiry: {
      selector: "#card-expiry",
      placeholder: "MM/YY"
    },
    cvv: {
      selector: "#card-cvv",
      placeholder: "CVV"
    }
  };
  // Create accessibility config to pass into Worldpay.checkout.init()
  var accessibility = {
     ariaLabel: {
       pan: "my custom aria label for pan input",
       expiry: "my custom aria label for expiry input",
       cvv: "my custom aria label for cvv input"
     },
     lang: {
       locale: "en-GB"
     },
     title: {
       enabled: true,
       pan: "my custom title for pan",
       expiry: "my custom title for expiry date",
       cvv: "my custom title for security code"
     }
  };
  // Create card brand configuration to control which card brands you accept
  var acceptedCardBrands = ["amex", "diners", "discover", "jcb", "maestro", "mastercard", "visa"]

  Worldpay.checkout.init(
    {
      id: id,
      styles: styles,
      form: "#card-form",
      fields: fields,
      accessibility: accessibility,
      acceptedCardBrands: acceptedCardBrands
    },
    function(err, checkout) {
      if (err) {
        // handle init error
        return;
      }
      form.addEventListener("submit", function(event) {
        event.preventDefault();
        checkout.generateSessions(function(err, sessions) {
          if (err) {
            // handle session state generation error
            return;
          }
          // send sessions to the server
          console.log('Sessions Card : ' + sessions.card + ', Sessions CVV : '+ sessions.cvv);
        });
      });

      clear.addEventListener("click", function(event) {
        event.preventDefault();
        checkout.clearForm(function() {
          // trigger desired behaviour on cleared form
          console.log('Form successfully cleared');
        });
      });
    }
  );
  })();
参数必需描述
id您的 Access Checkout 身份。 e.g. f7a25ad0-0224-46c2-9102-2229aaadbfec
form您的独特表格编号选择器。
styles您可选的样式对象配置。
fields包含您的字段配置的对象。
selector给定字段的编号选择器。
placeholder为客户显示应在字段中输入的信息类型的可选文本预览。
accessibility您可选的可访问性对象配置。
cardBrands您希望接受的卡品牌的可选阵列。
enablePanFormatting若调用一个可选参数，即可启用 PAN 格式设置行为。

在上述 JavaScript 示例中，sessions 作为 sessions.card 中包含您的客户卡详情的加密有效负载的对象被返回。它还在 sessions.cvv 中包含 CVC 的加密有效负载。

更多信息：单击此处，了解有关 sessions 对象的更多信息。

使用您向Verified Tokens API发送的请求中的 sessions.card 来创建 Token。

重要信息： sessions.card 具有 1 分钟的使用寿命，并且您只能使用一次。如果未在该时间内创建 Token，您就必须创建新的 sessions.card 值。

使用在我们的卡/结账 paymentInstrument 的 CVC 参数 (cvcHref) 中的 sessions.cvv 来接受预存卡号支付。

重要信息： session.cvv 具有 15 分钟的使用寿命，并且您只能使用一次。如果未在该时间内接受支付，您就必须创建新的 CVC session。您可以利用仅限 CVC 的 SDK来完成此操作。

该 paymentInstrument 可用于任何预存卡号资源（payments:cardonFileAuthorize、payments:migrateCardOnFileSale和payments:migrateCardOnFileAuthorize）。

需要仅为 CVC 创建会话吗？查看下面的集成示例：

仅为 CVC 创建会话

使用我们的 Web SDK 来捕捉客户的 CVC，您可以用它来接受预存卡号支付以及之前创建的 Token。

只有您之前已从具有相同银行卡详情的初始支付中收到了已验证 Token，然后才能使用仅限 CVC 的 SDK。

完整集成示例代码

Copied!
<section class="container">
    <section class="card cvv">
        <form class="card__form checkout" id="cvv-form">
            <section class="field" id="cvv-field"></section>
            <button type="submit" class="submit">Submit</button>
        </form>
        <button class="clear" id="clear">Clear</button>
    </section>
</section>

<script src="https://try.access.worldpay.com/access-checkout/v1/checkout.js"></script>

// For production change to "https://access.worldpay.com/access-checkout/v1/checkout.js"
body {
  font: 11px/22px sans-serif;
  text-transform: uppercase;
  background-color: #f7f7f7;
  color: black;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  position: relative;
  background: white;
  padding: 40px 30px;
  top: -30px;
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  box-shadow: 3px 3px 60px 0px rgba(0, 0, 0, 0.1);
}
.card .checkout .col-2 {
  display: flex;
}
.card .checkout .col-2 .col:first-child {
  margin-right: 15px;
}
.card .checkout .col-2 .col:last-child {
  margin-left: 15px;
}
.card .checkout .label .type {
  color: green;
}
.card .checkout .field {
  height: 40px;
  border-bottom: 1px solid lightgray;
}
.card .checkout .field#card-pan {
  margin-bottom: 30px;
}
.card .checkout .field.is-onfocus {
  border-color: black;
}
.card .checkout .field.is-empty {
  border-color: orange;
}
.card .checkout .field.is-invalid {
  border-color: red;
}
.card .checkout .field.is-valid {
  border-color: green;
}
.card .checkout .submit {
  background: red;
  position: absolute;
  cursor: pointer;
  left: 50%;
  bottom: -60px;
  width: 200px;
  margin-left: -100px;
  color: white;
  outline: 0;
  font-size: 14px;
  border: 0;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 15px 0;
  transition: background 0.3s ease;
}
.card .checkout.is-valid .submit {
  background: green;
}

.clear {
  background: grey;
  position: absolute;
  cursor: pointer;
  left: 50%;
  bottom: -120px;
  width: 200px;
  margin-left: -100px;
  color: white;
  outline: 0;
  font-size: 14px;
  border: 0;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 15px 0;
  transition: background 0.3s ease;
}
(function () {
  var form = document.getElementById("cvv-form")
  var clear = document.getElementById("clear");

  var id = "your-checkout-id";
  // Create custom style config to pass into Worldpay.checkout.init()
  var styles = {
    input: {
      "font-size": "14px",
      "font-family": "Arial"
    },
    "input.is-valid": {
      color: "green"
    },
    "input.is-invalid": {
      color: "red"
    }
  };
  // Create accessibility config to pass into Worldpay.checkout.init()
  var accessibility = {
    ariaLabel: {
      cvvOnly: "my custom aria label for cvvOnly input"
    },
    lang: {
      locale: "en-GB"
    },
    title: {
      enabled: true,
      cvvOnly: "my custom title for security code"
    }
  };
  var fields = {
    cvvOnly: {
      selector: "#cvv-field",
      placeholder: "CVV"
    }
  };
  Worldpay.checkout.init(
      {
        id: id,
        styles: styles,
        form: "#cvv-form",
        fields: fields,
        accessibility: accessibility
      },
      function(err, checkout) {
        if (err) {
          // handle init error
          return;
        }
        form.addEventListener("submit", function(event) {
          event.preventDefault();
          checkout.generateSessionState(function(err, session) {
            if (err) {
              // handle session state generation error
              return;
            }
            // send session to the server
            console.log(session);
          });
        });

        clear.addEventListener("click", function(event) {
          event.preventDefault();
          checkout.clearForm(function() {
            // trigger desired behaviour on cleared form
            console.log('Form successfully cleared');
          });
        });
      }
  );
})();

创建您的结账表

创建表格时，您必须使用独特的标识符和字段配置。然后，您必须将默认高度应用于字段。

以下是您如何为字段配置设置独特标识符的示例：

HTML

Copied!
<section class="container-cvv">
  <form class="card-form" id="card-form">
    <section class="field" id="card-cvv"></section>
    <button type="submit">Submit</button>
  </form>
</section>

以及您如何设置 CVC 表布局的示例：

CSS

Copied!
body {
  font: 11px/22px sans-serif;
  text-transform: uppercase;
  background-color: #f7f7f7;
  color: black;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  position: relative;
  background: white;
  padding: 40px 30px;
  top: -30px;
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  box-shadow: 3px 3px 60px 0px rgba(0, 0, 0, 0.1);
}
.card .checkout .col-2 {
  display: flex;
}
.card .checkout .col-2 .col:first-child {
  margin-right: 15px;
}
.card .checkout .col-2 .col:last-child {
  margin-left: 15px;
}
.card .checkout .label .type {
  color: green;
}
.card .checkout .field {
  height: 40px;
  border-bottom: 1px solid lightgray;
}
.card .checkout .field#card-pan {
  margin-bottom: 30px;
}
.card .checkout .field.is-onfocus {
  border-color: black;
}
.card .checkout .field.is-empty {
  border-color: orange;
}
.card .checkout .field.is-invalid {
  border-color: red;
}
.card .checkout .field.is-valid {
  border-color: green;
}
.card .checkout .submit {
  background: red;
  position: absolute;
  cursor: pointer;
  left: 50%;
  bottom: -60px;
  width: 200px;
  margin-left: -100px;
  color: white;
  outline: 0;
  font-size: 14px;
  border: 0;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 15px 0;
  transition: background 0.3s ease;
}
.card .checkout.is-valid .submit {
  background: green;
}

.clear {
  background: grey;
  position: absolute;
  cursor: pointer;
  left: 50%;
  bottom: -120px;
  width: 200px;
  margin-left: -100px;
  color: white;
  outline: 0;
  font-size: 14px;
  border: 0;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 15px 0;
  transition: background 0.3s ease;
}

初始化 SDK

一旦包含了用于获取 SDK 的脚本并设置了表单和字段配置，您就必须初始化 SDK。

请使用 Worldpay.checkout.init 方法来进行。

在初始化 SDK 时，您必须提供 AccessCheckoutIdentity、独特表格标识符以及字段配置。

您还可以选择提供您的样式配置以及可访问性配置。

以下是如何初始化 SDK 以及必须纳入其中的参数/配置的示例：

Copied!
(function () {
  var form = document.getElementById("cvv-form")
  var clear = document.getElementById("clear");

  var id = "your-checkout-id";
  // Create custom style config to pass into Worldpay.checkout.init()
  var styles = {
    input: {
      "font-size": "14px",
      "font-family": "Arial"
    },
    "input.is-valid": {
      color: "green"
    },
    "input.is-invalid": {
      color: "red"
    }
  };
  // Create accessibility config to pass into Worldpay.checkout.init()
  var accessibility = {
    ariaLabel: {
      cvvOnly: "my custom aria label for cvvOnly input"
    },
    lang: {
      locale: "en-GB"
    },
    title: {
      enabled: true,
      cvvOnly: "my custom title for security code"
    }
  };
  var fields = {
    cvvOnly: {
      selector: "#cvv-field",
      placeholder: "CVV"
    }
  };
  Worldpay.checkout.init(
      {
        id: id,
        styles: styles,
        form: "#cvv-form",
        fields: fields,
        accessibility: accessibility
      },
      function(err, checkout) {
        if (err) {
          // handle init error
          return;
        }
        form.addEventListener("submit", function(event) {
          event.preventDefault();
          checkout.generateSessionState(function(err, session) {
            if (err) {
              // handle session state generation error
              return;
            }
            // send session to the server
            console.log(session);
          });
        });

        clear.addEventListener("click", function(event) {
          event.preventDefault();
          checkout.clearForm(function() {
            // trigger desired behaviour on cleared form
            console.log('Form successfully cleared');
          });
        });
      }
  );
})();
参数必需描述
id您的 Access Checkout 身份。 e.g. f7a25ad0-0224-46c2-9102-2229aaadbfec
form您的独特表格编号选择器。
styles您可选的样式对象配置。
fields包含您的字段配置的对象。
selector给定字段的编号选择器。
placeholder为客户显示应在字段中输入的信息类型的可选文本预览。
accessibility您可选的可访问性对象配置。

您必须按本示例所示在 fields 配置中提供 cvvOnly 对象：

Copied!
fields: {
        cvvOnly: {
          selector: "#cvv-only",
          placeholder: "123"
        },
      },

使用 CVC session 的值和我们卡/结账 paymentInstrument 中的已验证 Token 来接受预存卡号支付。

重要信息：CVC session 具有 15 分钟的使用寿命，并且您只能使用一次。如果未在该时间内接受支付，您就必须创建新的 CVC session。

该 paymentInstrument 可用于任何预存卡号资源（payments:cardonFileAuthorize、payments:migrateCardOnFileSale和payments:migrateCardOnFileAuthorize）。

清除表格

SDK 还可揭示允许重置 SDK 的 clearForm 方法。无需重新加载 SDK 即可将所有字段和类别重置回其原始状态。

clearForm 方法可接受在整个表格被成功清除时调用的回调。

客户行为可能通常会触发此操作。例如：

  • 单击清除表格按钮
  • 成功接收会话

这样可让客户在无需重新加载 SDK 的情况下输入多组卡详情。

移除 SDK

您可采用 remove 方法，从页面中移除 SDK。利用此法可移除由 SDK 添加到此页面中的所有字段。

浏览器支持

  • 小版本 1.7.0 不支持 Firefox、Edge Legacy 和 Chrome >= 91
  • 小版本 1.7.1 不支持 Edge Legacy 和 Chrome >= 91
  • 小版本 1.7.2 不支持 Chrome >= 91（问题已在 1.7.3 中解决）

我们在所有其他版本上支持主流浏览器的所有最新版本。


后续步骤

接受预存卡号销售
接受预存卡号授权或
迁移预存卡号授权