- Home
- Japanese Welcome
- Quick Links
- Access Worldpay
- Checkout SDK
- Web SDK
- カードとCVCで支払うセッションの作成
カードとCVCで支払うセッションの作成
Web SDKを使用してカードの詳細とCVCに個別のsessionを作成することにより、顧客の支払の詳細を保護します。
完全統合のサンプルコード
<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
<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>
<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
.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;
}
.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を取得し、フォームとフィールドの構成を設定するための
これを行うには、Worldpay.checkout.init
方法を使用します。
SDKを初期化するときは、AccessCheckoutIdentity
、一意のフォームIDとフィールド構成を提供しなければなりません。
オプションの構成
オプションで、以下を提供することもできます。
構成の形式 - チェックアウトフォームの外観を形式化しますスタイリング構成 - チェックアウトフォームの外観をカスタマイズしますアクセシビリティの構成 - チェックアウトフォームを使用する機会が全員に均等に与えられるようにしますカードのブランド構成 - チェックアウトフォームに受け入れたいカードのみを表示します
例 - SDKを初期化します(必須パラメーター/構成)
(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
オブジェクトの詳細については、
sessions.card
を使用してトークンを作成します。
重要: sessions.card
の寿命は1分間で、一度しか使用できません。その時間内にトークンを作成しない場合は、新しいsessions.card
値を作成する必要があります。
カード/チェックアウトpaymentInstrument
のCVCパラメーター(cvcHref
)のsessions.cvv
でファイル支払でカードを取得します。
重要: session.cvv
の寿命は15分間で、一度しか使用できません。その時間内に支払を受け取らない場合は、新しいCVCsession
を作成する必要があります。これは、
paymentInstrument
は、ファイルリソース (
CVC専用のsessionを作成しなければなりませんか?以下の統合例をご覧ください。
CVC専用のsessionの作成
Web SDKで顧客のCVCをキャプチャし、これで以前に作成したトークンと一緒にファイル支払でカードを取得できます。
同じカード詳細で最初の支払から
完全統合のサンプルコード
<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
<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>
<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
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を取得し、フォームとフィールドの構成を設定するための
これを行うには、Worldpay.checkout.init
方法を使用します。
SDKを初期化するときは、AccessCheckoutIdentity
、一意のフォームIDとフィールド構成を提供しなければなりません。
オプションで、
SDKを初期化する方法と、含めなければならないパラメーター/構成例:
(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
オブジェクトを提供しなければなりません。
fields: {
cvvOnly: {
selector: "#cvv-only",
placeholder: "123"
},
},
fields: { cvvOnly: { selector: "#cvv-only", placeholder: "123" }, },
カード/チェックアウトpaymentInstrument
でCVCsession
の値と確認済みのトークンでファイルでカードを支払います。
重要:CVCsession
の寿命は15分間で、一度しか使用できません。その時間内に支払を受け取らない場合は、新しいCVCsession
を作成する必要があります。
paymentInstrument
は、ファイルリソース (
フォームの消去
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で修正されました)
他のすべてのバージョンでは、主要なブラウザのすべての最新バージョンをサポートしています。
次の手順