기본 웹 지불 요청 API 예제

기본 웹 지불 요청 API 데모를 얻으려고합니다.기본 웹 지불 요청 API 예제

<html> 
    <head> 
    </head> 
    <body> 
     <h1>Pay here</h1> 
     <script> 
      if(window.PaymentRequest){ 
       alert("Payment request exists!"); 

       const supportedPaymentMethods = [ { 
         supportedMethods: ["basic-card"] 
        } 
       ]; 

       const paymentDetails = { 
        total: { 
         label: "Total Cost", 
         amount: { 
          currency: "GBP", 
          value: 1 
         } 
        } 
       }; 

       const options = {}; 

       const paymentRequest = new PaymentRequest(
        supportedMethods, paymentDetails, options 
       ); 

       paymentRequest.show(); 
      } 
     </script> 
    </body> 
</html>

을하지만 많이하지 발생 : 지금까지 내가 이해, 팝 업이 코드를 실행하면 내가 사용하고자하는 신용 카드 묻는 표시되어야합니다. 경고 메시지가 표시됩니다. 나는 단지 기초를 작동 시키려고 노력하고있다. 아무런 언급이 없기 때문에이 코드가 누구에게나 돈을 보낼 것이라고 나는 믿지 않는다. 나는 다음 단계를 만들기를 희망한다. 도와주세요! 감사.

출처

2017-12-23 khalidsafir

결제 API는 일반적으로 공급 업체의 개인 키가 필요하기 때문에 클라이언트가 아닌 서버에서 호출해야합니다. – Barmar

Google에서 제작 한 새로운 API가 있습니다. 내가 본 모든 예제는 html과 javascript입니다. 내가 아는 한 모든 클라이언트 코드. – khalidsafir

마침내 작동 데모를 찾았습니다. 신용 카드 세부 사항을 브라우저에 저장하고 사용하기 쉬운 형식 (양식 필드 제외)으로 표시합니다. 그것은 지불 시스템에 신용 카드 정보를 전송하지 않습니다, 그것은 단지 그것을 준비 :

<button id="buyButton">Buy</button> 

<script> 
/** 
* Builds PaymentRequest for credit cards, but does not show any UI yet. 
* 
* @return {PaymentRequest} The PaymentRequest oject. 
*/ 
function initPaymentRequest() { 
    let networks = ['amex', 'diners', 'discover', 'jcb', 'mastercard', 'unionpay', 'visa', 'mir']; 
    let types = ['debit', 'credit', 'prepaid']; 
    let supportedInstruments = [{ 
     supportedMethods: networks, 
    }, { 
     supportedMethods: ['basic-card'], 
     data: {supportedNetworks: networks, supportedTypes: types}, 
    }]; 

    let details = { 
    total: {label: 'Donation', amount: {currency: 'USD', value: '55.00'}}, 
    displayItems: [{ 
     label: 'Original donation amount', 
     amount: {currency: 'USD', value: '65.00'}, 
     },{ 
     label: 'Friends and family discount', 
     amount: {currency: 'USD', value: '-10.00'}, 
     } 
    ] 
    }; 

    return new PaymentRequest(supportedInstruments, details); 
} 

/** 
* Invokes PaymentRequest for credit cards. 
* 
* @param {PaymentRequest} request The PaymentRequest object. 
*/ 
function onBuyClicked(request) { 
    request.show().then(function(instrumentResponse) { 
    sendPaymentToServer(instrumentResponse); 
    }) 
    .catch(function(err) { 
    ChromeSamples.setStatus(err); 
    }); 
} 

/** 
* Simulates processing the payment data on the server. 
* 
* @param {PaymentResponse} instrumentResponse The payment information to 
* process. 
*/ 
function sendPaymentToServer(instrumentResponse) { 
    // There's no server-side component of these samples. No transactions are 
    // processed and no money exchanged hands. Instantaneous transactions are not 
    // realistic. Add a 2 second delay to make it seem more real. 
    window.setTimeout(function() { 
    instrumentResponse.complete('success') 
     .then(function() { 
     document.getElementById('result').innerHTML = instrumentToJsonString(instrumentResponse); 
     }) 
     .catch(function(err) { 
     ChromeSamples.setStatus(err); 
     }); 
    }, 2000); 
    } 

    /** 
    * Converts the payment instrument into a JSON string. 
    * 
    * @private 
    * @param {PaymentResponse} instrument The instrument to convert. 
    * @return {string} The JSON string representation of the instrument. 
    */ 

    function instrumentToJsonString(instrument) { 
    let details = instrument.details; 
    details.cardNumber = 'XXXX-XXXX-XXXX-' + details.cardNumber.substr(12); 
    details.cardSecurityCode = '***'; 

    return JSON.stringify({ 
     methodName: instrument.methodName, 
     details: details, 
    }, undefined, 2); 
    } 

    const payButton = document.getElementById('buyButton'); 
    payButton.setAttribute('style', 'display: none;'); 
    if (window.PaymentRequest) { 
    let request = initPaymentRequest(); 
    payButton.setAttribute('style', 'display: inline;'); 
    payButton.addEventListener('click', function() { 
     onBuyClicked(request); 
     request = initPaymentRequest(); 
    }); 
    } else { 
    ChromeSamples.setStatus('This browser does not support web payments'); 
    } 
</script>

당신은 어떤 공상을 위해 (필요을/복사하지 않습니다 위의 코드를 붙여 HTML로 저장하고 로컬 드라이브에서로드 할 수 있습니다 내가 생각한 것처럼 안전한 https URL에서로드하는 것과 같은 것들).

출처

2017-12-26 10:46:26 khalidsafir

WOW - 신용 카드 처리 컨텍스트에서 보안 https "멋진"항목에서로드 불러 오기) –

기본 웹 지불 요청 API 예제

답변

관련 문제