Javascript：Stripe 和 Apple Pay 網絡設置

Question

我正在嘗試按照此處的指南 ( https://stripe.com/docs/stripe-js/elements/payment-request-button ) 為 web 和 Stripe 設置 Apple Pay。 域驗證和所有預設置等初始步驟已完成，但我在執行付款步驟時遇到問題。

Apple Pay 按鈕顯示在我的 Safari 瀏覽器中。 單擊按鈕時，我會觸發一個名為checkoutWithApplePay()的事件。 我在第 3 步之后迷路了，不知道該怎么辦。 我發布到我的后端和后端，創建付款意圖並返回client_secret

checkoutWithApplePay() {
    // STEP 1 FROM GUIDE
    const stripe = Stripe("_____");
    
    // STEP 2 FROM GUIDE
    const paymentRequest = stripe.paymentRequest({
        country: 'US',
        currency: 'usd',
        total: {
            label: 'Store Total',
            amount: cartTotal() ,
        },
        requestPayerName: true,
        requestPayerEmail: true,
    });
    
    
    // STEP 3 FROM GUIDE
    const elements = stripe.elements();
    const prButton = elements.create('paymentRequestButton', {
        paymentRequest: paymentRequest,
    });
    
    paymentRequest.canMakePayment().then(function(result) {
        if (result) {
            prButton.mount('#payment-request-button');
        } else {
            document.getElementById('payment-request-button').style.display = 'none';
        }
    });
    
    // STEP 4 FROM GUIDE -- THIS RETURNS A CLIENT SECRET
    axios.post('/api/checkout/checkout-with-apple-pay-web', {
        total: this.formattedCartTotal()
    })
    .then((resp) => {
          myClientSecrent = resp.clientSecret;
    });

    // THIS IS WHERE I GET CONFUSED AND NOT SURE HOW TO HANDLE AND BELOW IS 
    JUST TEMPLATE CODE FROM THE GUIDE
    
    paymentRequest.on('paymentmethod', function(ev) {
        // Confirm the PaymentIntent without handling potential next actions (yet).
        stripe.confirmCardPayment(
        clientSecret,
        {payment_method: ev.paymentMethod.id},
        {handleActions: false}
        ).then(function(confirmResult) {
        if (confirmResult.error) {
            // Report to the browser that the payment failed, prompting it to
            // re-show the payment interface, or show an error message and close
            // the payment interface.
            ev.complete('fail');
        } else {
            // Report to the browser that the confirmation was successful, prompting
            // it to close the browser payment method collection interface.
            ev.complete('success');
            // Check if the PaymentIntent requires any actions and if so let Stripe.js
            // handle the flow. If using an API version older than "2019-02-11" instead
            // instead check for: `paymentIntent.status === "requires_source_action"`.
            if (confirmResult.paymentIntent.status === "requires_action") {
            // Let Stripe.js handle the rest of the payment flow.
            stripe.confirmCardPayment(clientSecret).then(function(result) {
                if (result.error) {
                    let data = {
                        msg: "An error occurred. Please try again."
                    }
                    this.handleShowFlashMsg(data);
                } else {
                    this.handleShowOrderConfirmModal();
                }
            });
            } else {
            // The payment has succeeded.
            }
        }
    });
}

Answer 1

您快到了。 當您收到 'paymentmethod' 事件時，您將使用之前檢索到的 PaymentIntent 客戶端密鑰來確認 PaymentIntent 並完成付款：

    let clientSecret;

    axios.post('/api/checkout/checkout-with-apple-pay-web', {
        total: this.formattedCartTotal()
    }).then((resp) => {
      // Assign this previously defined variable
      clientSecret = resp.clientSecret;
    });

    paymentRequest.on('paymentmethod', function(ev) {
        // Confirm the PaymentIntent without handling potential next actions (yet).
        stripe.confirmCardPayment(
        clientSecret,
        {payment_method: ev.paymentMethod.id},
        {handleActions: false}
        ).then(function(confirmResult) {
        if (confirmResult.error) {
            // Report to the browser that the payment failed, prompting it to
            // re-show the payment interface, or show an error message and close
            // the payment interface.
            ev.complete('fail');
        } else {
            // Report to the browser that the confirmation was successful, prompting
            // it to close the browser payment method collection interface.
            ev.complete('success');
            // Check if the PaymentIntent requires any actions and if so let Stripe.js
            // handle the flow. If using an API version older than "2019-02-11" instead
            // instead check for: `paymentIntent.status === "requires_source_action"`.
            if (confirmResult.paymentIntent.status === "requires_action") {
            // Let Stripe.js handle the rest of the payment flow.
            stripe.confirmCardPayment(clientSecret).then(function(result) {
                if (result.error) {
                    let data = {
                        msg: "An error occurred. Please try again."
                    }
                    this.handleShowFlashMsg(data);
                } else {
                    this.handleShowOrderConfirmModal();
                }
            });
            } else {
            // The payment has succeeded.
            }
        }
    });