온라인 결제를 위해 새로운 네트워크 결제 API 사용
28631 단어 webjavascriptpaymentadyen
오늘 우리는 API가 도대체 무엇인지, 그 장점이 무엇인지, 그리고 웹 응용 프로그램에서 어떻게 사용하는지 이해할 것이다.
결제 요청 API
Payment Request API는 웹 사이트에서 결제 세부 정보를 캡처하는 API 집합을 제공합니다.그것은 신용카드의 상세한 정보와 운송과 연락 정보 등 지불인으로부터 신속하고 편리한 사용자 인터페이스를 통해 지불 증명서를 수집할 수 있다.이 문서를 작성할 때 Payment Request API는 기본적으로 인터넷 신용카드, 체크카드, 선불카드 등 카드 기반 결제 방식만 지원한다(Safari를 제외하고 Safari는 Apple Pay만 지원한다).휴대전화에서도 구글페이, 삼성페이, 애플페이, 알리페이 등 카드와 URL 기반 결제 방식을 지원한다.
또한 결제 요청을 표시하고 관리할 수 있는 Interfaces 및 Dictionaries도 제공합니다.
이는 현재 W3C 후보 단계로, 크롬, Opera, 사파리, 엣지 등 상록 브라우저에 이미 적용supported됐다.Firefox는 야간 릴리즈에서 지원됩니다.
지금 바로 이점을 살펴보겠습니다.
결제 요청 API의 이점
결제 요청 API는 온라인 결제를 완료하는 데 필요한 단계 수를 줄이도록 설계되었습니다.예컨대
빠른 구매: 최종 사용자는 신용카드 상세 정보와 같은 결제 상세 정보를 한 번만 입력하면 후속 구매에 다시 사용할 수 있기 때문에 구매를 더욱 빨리 진행할 수 있다.그들은 심지어 이전의 모든 지불 세부 사항에서 선택할 수 있다.이는 결제 요청 API를 사용하는 동일한 브라우저와 웹 사이트의 장치 사이에서 작동합니다.
일관된 사용자 환경: 결제 양식은 브라우저에 의해 제어되므로 결제 요청 API를 사용하는 사이트 간의 사용자 환경은 일관되게 유지됩니다.이것은 브라우저가 사용자의 체험을 제어하고 사용자에 따라 맞춤형 제작을 할 수 있다는 것을 의미한다. 예를 들어 사용자가 브라우저에서 설정한 첫 번째 언어에 따라 현지화할 수 있다.
접근성: 브라우저가 결제 폼의 입력 요소를 제어하기 때문에 개발자가 아무 일도 하지 않고 모든 사이트의 키보드와 화면 리더가 일치된 접근성을 확보할 수 있다.브라우저는 결제 폼의 글씨체 크기나 색깔 대비도를 조정하여 사용자가 결제할 때 더욱 편안하게 할 수 있다.
결제 방법 관리: 사용자는 신용카드와 배송 주소와 같은 결제 상세 정보를 브라우저에서 직접 관리할 수 있습니다.브라우저는 또한 장치 간에 이러한 "자격 증명"을 동기화하여 사용자가 제품을 구매할 때 데스크탑에서 모바일 장치로 쉽게 이동한 후 다시 이동할 수 있도록 합니다.또한 브라우저에 저장된 다양한 결제 방법 및 주소를 선택할 수 있습니다.
일관성 오류 처리: 브라우저는 카드 번호의 유효성을 확인하고 사용자에게 카드가 만료되었는지 또는 만료되었는지 알려줄 수 있습니다.브라우저는 사용자의 과거 사용 패턴이나 제한에 따라 어떤 카드를 사용할 것인지를 자동으로 권장할 수 있습니다. (예를 들어, 우리는 Visa나Mastercard만 받아들일 수 있습니다.) 또는 사용자가 기본값/가장 좋아하는 카드를 말할 수 있도록 합니다.
예제 응용 프로그램
그래서 우리는 함께 예시를 하나 빨리 만들어서 그것이 어떻게 작동하는지 봅시다.물론, 나는 Adyen을 PSP로 사용해서 이 점을 실현하려고 시도할 것이다. 왜냐하면, 당신은 여전히 지불을 처리하는 사람이 필요하기 때문이다. 지불 요청 API는 지불 세부 사항만 포착할 수 있기 때문이다.
이 예시의 전체 소스 코드 here 를 찾을 수 있습니다.나는 백엔드에 중점을 두지 않을 것이다. 왜냐하면 나는 this example의 간략한 버전인 노드JS 백엔드를 사용하기 때문이다. 만약 당신이 백엔드에 관심이 있다면 읽을 수 있기 때문이다 this tutorial.
따라서 위 자습서에 따라 NodeJS express 웹 응용 프로그램을 구축했다고 가정합니다.이제 adyenImplementation.js 파일의 클라이언트 자바스크립트 섹션에만 집중할 수 있습니다.
우선, 체크아웃 단추를 눌렀을 때 함수를 호출할 것입니다
<a onclick="checkout()">
<p class="button">Checkout</p>
</a>
모든 논리가 그 안에 주재할 수 있도록 이 함수를 만듭니다.나는 비동기 함수를 사용했다. 이렇게 하면wait on promissions를 사용할 수 있다.먼저 API를 호출하여 Adyen에서 지원되는 결제 방법에 대한 자세한 정보를 얻으면 지원되는 신용 카드에 대한 자세한 정보를 얻을 수 있습니다.그런 다음 결제 요청 API 지원 카드와 비교하고 교차 지점을 기반으로 지원하는 결제 방법을 구축합니다.카트 요약을 작성하고 API 엔드포인트를 호출하는 데 사용되는 몇 가지 지원 함수도 있습니다.
async function checkout() {
try {
const adyenPaymentMethods = await callServer("/api/getPaymentMethods");
// create a new payment request
const request = new PaymentRequest(buildSupportedPaymentMethodData(adyenPaymentMethods), buildShoppingCartDetails());
// payment logic goes here
} catch (error) {
console.error(error);
alert(`Error occurred: ${error.message}`);
}
return false;
}
function buildShoppingCartDetails() {
// Hardcoded for demo purposes:
return {
id: "order-123",
displayItems: [
{ label: "Sunglasses", amount: { currency: "EUR", value: "5.00" } },
{ label: "Headphones", amount: { currency: "EUR", value: "5.00" } },
],
total: { label: "Total", amount: { currency: "EUR", value: "10.00" } },
};
}
function buildSupportedPaymentMethodData(adyenPaymentMethods) {
return [
{
supportedMethods: "basic-card",
data: {
supportedNetworks: getSupportedNetworksFromAdyen(adyenPaymentMethods),
supportedTypes: ["credit"],
},
},
];
}
// compare supported cards between Adyen and Payment Request API and get the intersection
function getSupportedNetworksFromAdyen(adyenPaymentMethods) {
const supportedByPaymentAPI = ["amex", "cartebancaire", "diners", "discover", "jcb", "mc", "mir", "unionpay", "visa"];
// filter supported credit cards
const supportedByAdyen = adyenPaymentMethods.paymentMethods.filter((v) => v.type === "scheme")[0].brands;
// get only the intersection between supportedByPaymentAPI and supportedByAdyen
return supportedByPaymentAPI.reduce((acc, curr) => (supportedByAdyen.includes(curr) ? [...acc, fixMasterCard(curr)] : acc), []);
}
// Mastercard id is not same for Adyen and Payment Request API
function fixMasterCard(v) {
return v === "mc" ? "mastercard" : v;
}
// Calls your server endpoints
async function callServer(url, data) {
const res = await fetch(url, {
method: "POST",
body: data ? JSON.stringify(data) : "",
headers: {
"Content-Type": "application/json",
},
});
return await res.json();
}
현재, 우리는 request.show()를 사용하여 브라우저의 지불 포획표를 호출하고, 지불표에서 얻은 신용카드 데이터로 Adyen(PSP) 지불 API를 호출할 수 있다.PSP API 응답을 처리하고 성공 및 실패 사례를 처리할 뿐입니다.
async function checkout() {
try {
const adyenPaymentMethods = await callServer("/api/getPaymentMethods");
// create a new payment request
const request = new PaymentRequest(buildSupportedPaymentMethodData(adyenPaymentMethods), buildShoppingCartDetails());
// show payment sheet
const payment = await request.show();
// Here we would process the payment.
const response = await callServer("/api/initiatePayment", {
// This works only for PCI compliant credit card payments.
// For non PCI compliant payments the data needs to be encrypted with something like https://github.com/Adyen/adyen-cse-web
// But encrypting data here is not secure as a malicious script may be able to access the data in memory here
paymentMethod: {
type: "scheme",
number: payment.details.cardNumber,
expiryMonth: payment.details.expiryMonth,
expiryYear: payment.details.expiryYear,
holderName: payment.details.cardholderName,
cvc: payment.details.cardSecurityCode,
},
});
// Handle the response code
switch (response.resultCode) {
case "Authorised":
await payment.complete("success");
window.location.href = "/result/success";
break;
case "Pending":
case "Received":
await payment.complete("unknown");
window.location.href = "/result/pending";
break;
case "Refused":
await payment.complete("fail");
window.location.href = "/result/failed";
break;
default:
await payment.complete("fail");
window.location.href = "/result/error";
break;
}
} catch (error) {
// ...
}
return false;
}
코드를 실행할 때, 우리는 다음과 같은 지불서를 보아야 한다
주의: 이것은 Adyen과 함께 생산에 사용하는 것을 절대 권장하지 않습니다. 왜냐하면 지불 요청 API는 매우 새롭기 때문에 신용카드 데이터를 포획하는 것은 Adyen이 제공한 Web components 안전한 암호화 데이터만큼 안전하지 않기 때문입니다.저는 카드의 상세한 정보를 암호화하지 않습니다. 이것은 PCI와 당신의 Adyen 계정에 필요한 역할이 있는 경우에만 가능합니다.앞으로 지불 처리 프로그램 API가 브라우저에 의해 광범위하게 실현되면 이러한 상황이 바뀔 수 있으며, Adyen은 이를 위해 공식 지원을 시작할 것이다.잠시 후 게시물에서 이 점에 대한 내용을 더 많이 볼 수 있습니다.
다음 단계에 따라 이 예시를 시도할 수 있습니다.Adyen 계정이 PCI 표준에 맞지 않으면 실제 지불이 실패합니다. 괜찮습니다. 지불 요청 API의 작업 방식을 볼 수 있습니다.
# Clone this repo
$ git clone https://github.com/deepu105/payment-request-api-example
$ cd payment-request-api-example
# Install dependencies
$ npm install
# create a file named `.env` with values `API_KEY="your_Adyen_API_key"` and `MERCHANT_ACCOUNT="your_Adyen_merchant_account"`
$ vi .env
# start application
$ npm start
즉, API 처리의 더 높은 용례를 사용할 수 있으며, 그 중 일부 here 를 찾을 수 있습니다.
결제 프로세서 API 소개
Payment Handler API 지불청구 API를 바탕으로 웹 응용 프로그램 사용 서비스 인원이 지불청구 API를 통해 더 많은 지불 방법을 제공할 수 있도록 새로운 지불 공급자를 추가할 수 있도록 허용한다.Here는 서로 다른 가능성을 보여주는 프레젠테이션 목록이다.
이는 현재 W3C 초안 단계이며, 현재는 크롬만 지원하고 있다.
결제 요청 API의 이점
Adyen과 같은 결제 서비스 제공자에게는 더욱 흥미롭다. 왜냐하면 우리는 표준적인 결제 요청 API를 통해 우리의 결제 방법을 제공할 수 있기 때문이다.예를 들어, 우리는 심지어 이런 방식을 통해 자신의 안전 필드를 제공할 수 있다.이는 서로 다른 결제 방식에 길을 열어 사이트 간의 일치된 체험을 제공하고 우리가 지난 절에서 본 장점을 증가시킬 수 있다
예제 응용 프로그램
우리는 상술한 견본의 기초 위에서 쉽게 세울 수 있다.BobPay라는 데모 결제 프로세스를 사용하겠습니다.우선itswebsite로 넘어가'BobPay 웹 결제 앱 설치'를 클릭하여 서비스 직원을 설치한다.현재 방법buildSupportedPaymentMethodData의 반환 그룹에 다음과 같은 내용을 추가합니다
{
supportedMethods: "https://bobpay.xyz/pay",
}
현재 방법request.show() 중checkout 이후 새로운 지불방법에 다음과 같은 처리를 추가합니다.
const payment = await request.show();
// This payment method handles everything and returns a final result
if (payment.details.bobpay_token_id) {
await payment.complete("success");
window.location.href = "/result/success";
return false;
}
그것은 반드시 지불서에 나타나야 한다. 아래와 같다
이렇게 해서 우리는 현재 지불 청구 API에서 사용할 수 있는 새로운 지불 방식이 생겼다
결론
웹 결제 API는 아직 성숙하지 않아서 PSP가 제공하는 클라이언트 구성 요소를 대체할 수 없지만, 이러한 API가 모든 주요 브라우저에 의해 실현되고, 특히 결제 처리 프로그램인 API를 대체하는 밝은 미래를 보았다.이러한 상황이 발생할 때 이것은 상인, 최종 사용자와 PSP에 모두 유리할 것이다. 왜냐하면 최종 사용자의 사용자 체험이 더욱 일치하고 상인과 PSP의 실시도 더욱 표준화될 것이다.Adyen에서, 우리는 이 분야의 발전에 주의를 기울여, 미래에 그것을 어떻게 사용해서 더 좋은 사용자 체험을 제공할 것인가를 볼 것이다.
도구책
<a onclick="checkout()">
<p class="button">Checkout</p>
</a>
async function checkout() {
try {
const adyenPaymentMethods = await callServer("/api/getPaymentMethods");
// create a new payment request
const request = new PaymentRequest(buildSupportedPaymentMethodData(adyenPaymentMethods), buildShoppingCartDetails());
// payment logic goes here
} catch (error) {
console.error(error);
alert(`Error occurred: ${error.message}`);
}
return false;
}
function buildShoppingCartDetails() {
// Hardcoded for demo purposes:
return {
id: "order-123",
displayItems: [
{ label: "Sunglasses", amount: { currency: "EUR", value: "5.00" } },
{ label: "Headphones", amount: { currency: "EUR", value: "5.00" } },
],
total: { label: "Total", amount: { currency: "EUR", value: "10.00" } },
};
}
function buildSupportedPaymentMethodData(adyenPaymentMethods) {
return [
{
supportedMethods: "basic-card",
data: {
supportedNetworks: getSupportedNetworksFromAdyen(adyenPaymentMethods),
supportedTypes: ["credit"],
},
},
];
}
// compare supported cards between Adyen and Payment Request API and get the intersection
function getSupportedNetworksFromAdyen(adyenPaymentMethods) {
const supportedByPaymentAPI = ["amex", "cartebancaire", "diners", "discover", "jcb", "mc", "mir", "unionpay", "visa"];
// filter supported credit cards
const supportedByAdyen = adyenPaymentMethods.paymentMethods.filter((v) => v.type === "scheme")[0].brands;
// get only the intersection between supportedByPaymentAPI and supportedByAdyen
return supportedByPaymentAPI.reduce((acc, curr) => (supportedByAdyen.includes(curr) ? [...acc, fixMasterCard(curr)] : acc), []);
}
// Mastercard id is not same for Adyen and Payment Request API
function fixMasterCard(v) {
return v === "mc" ? "mastercard" : v;
}
// Calls your server endpoints
async function callServer(url, data) {
const res = await fetch(url, {
method: "POST",
body: data ? JSON.stringify(data) : "",
headers: {
"Content-Type": "application/json",
},
});
return await res.json();
}
async function checkout() {
try {
const adyenPaymentMethods = await callServer("/api/getPaymentMethods");
// create a new payment request
const request = new PaymentRequest(buildSupportedPaymentMethodData(adyenPaymentMethods), buildShoppingCartDetails());
// show payment sheet
const payment = await request.show();
// Here we would process the payment.
const response = await callServer("/api/initiatePayment", {
// This works only for PCI compliant credit card payments.
// For non PCI compliant payments the data needs to be encrypted with something like https://github.com/Adyen/adyen-cse-web
// But encrypting data here is not secure as a malicious script may be able to access the data in memory here
paymentMethod: {
type: "scheme",
number: payment.details.cardNumber,
expiryMonth: payment.details.expiryMonth,
expiryYear: payment.details.expiryYear,
holderName: payment.details.cardholderName,
cvc: payment.details.cardSecurityCode,
},
});
// Handle the response code
switch (response.resultCode) {
case "Authorised":
await payment.complete("success");
window.location.href = "/result/success";
break;
case "Pending":
case "Received":
await payment.complete("unknown");
window.location.href = "/result/pending";
break;
case "Refused":
await payment.complete("fail");
window.location.href = "/result/failed";
break;
default:
await payment.complete("fail");
window.location.href = "/result/error";
break;
}
} catch (error) {
// ...
}
return false;
}
# Clone this repo
$ git clone https://github.com/deepu105/payment-request-api-example
$ cd payment-request-api-example
# Install dependencies
$ npm install
# create a file named `.env` with values `API_KEY="your_Adyen_API_key"` and `MERCHANT_ACCOUNT="your_Adyen_merchant_account"`
$ vi .env
# start application
$ npm start
Payment Handler API 지불청구 API를 바탕으로 웹 응용 프로그램 사용 서비스 인원이 지불청구 API를 통해 더 많은 지불 방법을 제공할 수 있도록 새로운 지불 공급자를 추가할 수 있도록 허용한다.Here는 서로 다른 가능성을 보여주는 프레젠테이션 목록이다.
이는 현재 W3C 초안 단계이며, 현재는 크롬만 지원하고 있다.
결제 요청 API의 이점
Adyen과 같은 결제 서비스 제공자에게는 더욱 흥미롭다. 왜냐하면 우리는 표준적인 결제 요청 API를 통해 우리의 결제 방법을 제공할 수 있기 때문이다.예를 들어, 우리는 심지어 이런 방식을 통해 자신의 안전 필드를 제공할 수 있다.이는 서로 다른 결제 방식에 길을 열어 사이트 간의 일치된 체험을 제공하고 우리가 지난 절에서 본 장점을 증가시킬 수 있다
예제 응용 프로그램
우리는 상술한 견본의 기초 위에서 쉽게 세울 수 있다.BobPay라는 데모 결제 프로세스를 사용하겠습니다.우선itswebsite로 넘어가'BobPay 웹 결제 앱 설치'를 클릭하여 서비스 직원을 설치한다.현재 방법
buildSupportedPaymentMethodData의 반환 그룹에 다음과 같은 내용을 추가합니다{
supportedMethods: "https://bobpay.xyz/pay",
}
request.show() 중checkout 이후 새로운 지불방법에 다음과 같은 처리를 추가합니다.const payment = await request.show();
// This payment method handles everything and returns a final result
if (payment.details.bobpay_token_id) {
await payment.complete("success");
window.location.href = "/result/success";
return false;
}
이렇게 해서 우리는 현재 지불 청구 API에서 사용할 수 있는 새로운 지불 방식이 생겼다
결론
웹 결제 API는 아직 성숙하지 않아서 PSP가 제공하는 클라이언트 구성 요소를 대체할 수 없지만, 이러한 API가 모든 주요 브라우저에 의해 실현되고, 특히 결제 처리 프로그램인 API를 대체하는 밝은 미래를 보았다.이러한 상황이 발생할 때 이것은 상인, 최종 사용자와 PSP에 모두 유리할 것이다. 왜냐하면 최종 사용자의 사용자 체험이 더욱 일치하고 상인과 PSP의 실시도 더욱 표준화될 것이다.Adyen에서, 우리는 이 분야의 발전에 주의를 기울여, 미래에 그것을 어떻게 사용해서 더 좋은 사용자 체험을 제공할 것인가를 볼 것이다.
도구책
너는 나를 따라가도 된다.
표지 사진 출처: 사진 작성자rupixen.com가 Unsplash
Reference
이 문제에 관하여(온라인 결제를 위해 새로운 네트워크 결제 API 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/adyen/online-payments-using-the-new-web-payment-apis-4bgl텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
