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で支払うセッションの作成

Web SDKを使用してカードの詳細とCVCに個別のsessionを作成することにより、顧客の支払の詳細を保護します。

完全統合のサンプルコード

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/v2/checkout.js"></script>

// For production change to "https://access.worldpay.com/access-checkout/v2/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、一意のフォームIDとフィールド構成を提供しなければなりません。

オプションの構成

オプションで、以下を提供することもできます。

例 - 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アクセスチェックアウトID。 e.g. f7a25ad0-0224-46c2-9102-2229aaadbfec
form独自のフォーム#idセレクター。
stylesオプションのスタイルオブジェクト構成。
fieldsフィールド構成を含むオブジェクト。
selector特定のフィールドの#idセレクター。
placeholder顧客がフィールドに入力する必要のある情報のタイプを示すオプションのテキストプレビュー。
accessibilityオプションのアクセシビリティオブジェクト構成。
cardBrands受け入れたいカードブランドのオプションの配列。
enablePanFormatting呼び出された場合にPAN形式動作を有効にするオプションのパラメーター。

上記のJavaScriptの例では、sessionsは、sessions.cardの顧客のカード詳細の暗号化されたペイロードを含むオブジェクトとして返されます。また、sessions.cvvにCVCの暗号化されたペイロードがあります。

詳細:sessionsオブジェクトの詳細については、こちらをクリックしてください。

確認済みトークンAPIのリクエストのsessions.cardを使用してトークンを作成します。

重要: sessions.card の寿命は1分間で、一度しか使用できません。その時間内にトークンを作成しない場合は、新しいsessions.card値を作成する必要があります。

カード/チェックアウトpaymentInstrumentのCVCパラメーター(cvcHref)のsessions.cvvでファイル支払でカードを取得します。

重要: session.cvv の寿命は15分間で、一度しか使用できません。その時間内に支払を受け取らない場合は、新しいCVCsessionを作成する必要があります。これは、CVCのみのSDKを使用して実行できます。

paymentInstrumentは、ファイルリソース (payments:cardOnFileAuthorize,payments:migrateCardOnFileSaleandpayments:migrateCardOnFileAuthorize) のどのカードでも使用できます。


CVC専用のsessionを作成しなければなりませんか?以下の統合例をご覧ください。

CVC専用のsessionの作成

Web SDKで顧客のCVCをキャプチャし、これで以前に作成したトークンと一緒にファイル支払でカードを取得できます。

同じカード詳細で最初の支払から検証済みのトークンを以前に受け取った場合にのみ、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/v2/checkout.js"></script>

// For production change to "https://access.worldpay.com/access-checkout/v2/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、一意のフォームIDとフィールド構成を提供しなければなりません。

オプションで、スタイリング構成アクセシビリティ構成を提供することもできます。

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アクセスチェックアウトID。 e.g. f7a25ad0-0224-46c2-9102-2229aaadbfec
form独自のフォーム#idセレクター。
stylesオプションのスタイルオブジェクト構成。
fieldsフィールド構成を含むオブジェクト。
selector特定のフィールドの#idセレクター。
placeholder顧客がフィールドに入力する必要のある情報のタイプを示すオプションのテキストプレビュー。
accessibilityオプションのアクセシビリティオブジェクト構成。

この例に示すように、fields構成でcvvOnlyオブジェクトを提供しなければなりません。

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

カード/チェックアウトpaymentInstrumentでCVCsessionの値と確認済みのトークンでファイルでカードを支払います。

重要:CVCsessionの寿命は15分間で、一度しか使用できません。その時間内に支払を受け取らない場合は、新しいCVCsessionを作成する必要があります。

paymentInstrumentは、ファイルリソース (payments:cardOnFileAuthorize,payments:migrateCardOnFileSaleandpayments:migrateCardOnFileAuthorize) のどのカードでも使用できます。

フォームの消去

SDKは、SDKをリセットできるようにするclearForm方法も公開しています。SDKをリロードせずに、すべてのフィールドとクラスが元の状態に戻されます。

clearForm方法は、フォーム全体が正常に消去されたときに呼び出されるコールバックを受け入れます。

通常、顧客の行動がこれをトリガーします。例:

  • 消去フォームボタンをクリックする
  • sessionの正常な受理

顧客は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で修正されました)

他のすべてのバージョンでは、主要なブラウザのすべての最新バージョンをサポートしています。


次の手順


カード・オン・ファイル販売の受理
カード・オン・ファイル認証の受理、または
ファイル認証でカードの移行