【问题标题】:how to apple pay through stripe in VJs?如何通过 VJ 中的条纹进行苹果支付?
【发布时间】:2021-05-06 14:28:38
【问题描述】:

我正在尝试按照此处的指南 (https://stripe.com/docs/stripe-js/elements/payment-request-button) 设置 Apple Pay for web 和 Stripe。初始步骤(例如验证域和所有预设置)已完成,但我在付款步骤后遇到问题。

Apple Pay 按钮出现在我的 Safari 浏览器中。单击按钮时,我触发了一个名为 Paymentmethode() 的事件,我在实时检查时遇到了此错误。要么您没有将卡保存到您的钱包,要么当前域 (pwafe.devco.pk) 未为 Apple 注册支付。访问https://dashboard.stripe.com/account/apple_pay 注册此域。 main.js:25。和按钮隐藏我在第 3 步后迷路了,不知道该怎么做。我发布到我的后端和后端,创建支付意图并返回 client_secret

 paymentMethod() {
      // STEP 1 FROM GUIDE
      var stripe = Stripe("pk_test_YxSI6F4QeV0XCofSgabilbTu00ChOmJWJ0", {
        apiVersion: "2020-08-27",
        stripeAccount: "CONNECTED_STRIPE_ACCOUNT_ID",
      });
      // STEP 2 FROM GUIDE
      var paymentRequest = stripe.paymentRequest({
        country: "US",
        currency: "usd",
        total: {
          label: "Demo total",
          amount: 1099,
        },
        requestPayerName: true,
        requestPayerEmail: true,
      });

      // STEP 3 FROM GUIDE
      var elements = stripe.elements();
      var prButton = elements.create("paymentRequestButton", {
        paymentRequest: paymentRequest,
      });
      // console.log("before api call", paymentRequest);
      paymentRequest.canMakePayment().then(function (result) {
        // console.log("after api called" + result);
        if (result) {
          prButton.mount("#payment-request-button");
        } else {
          //prButton.mount('#payment-request-button');
          document.getElementById("payment-request-button").style.display =
            "none";
        }
      });
      // STEP 4 FROM GUIDE -- THIS RETURNS A CLIENT SECRET
      let clientSecret;
      axios
        .post("https://pwa.devco.pk/api/Create_PaymentIntent", {})
        .then((resp) => {
          // Assign this previously defined variable
          clientSecret = resp.client_secret;
        });
      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);
                    // The payment failed -- ask your customer for a new payment method.
                  } else {
                    this.handleShowOrderConfirmModal();
                    // The payment has succeeded.
                  }
                });
              } else {
                // The payment has succeeded.
              }
            }
          });
      });
      var paymentRequest = stripe.paymentRequest({
        country: "US",
        currency: "usd",
        total: {
          label: "Demo total",
          amount: 1099,
        },
        requestShipping: true,
        // `shippingOptions` is optional at this point:
        shippingOptions: [
          // The first shipping option in this list appears as the default
          // option in the browser payment interface.
          {
            id: "free-shipping",
            label: "Free shipping",
            detail: "Arrives in 5 to 7 days",
            amount: 0,
          },
        ],
      });
      paymentRequest.on("shippingaddresschange", function (ev) {
        if (ev.shippingAddress.country !== "US") {
          ev.updateWith({
            status: "invalid_shipping_address",
          });
        } else {
          // Perform server-side request to fetch shipping options
          fetch("/calculateShipping", {
            data: JSON.stringify({
              shippingAddress: ev.shippingAddress,
            }),
          })
            .then(function (response) {
              return response.json();
            })
            .then(function (result) {
              ev.updateWith({
                status: "success",
                shippingOptions: result.supportedShippingOptions,
              });
            });
        }
      });

      var stripe = Stripe("pk_test_YxSI6F4QeV0XCofSgabilbTu00ChOmJWJ0", {
        apiVersion: "2020-08-27",
        stripeAccount: "CONNECTED_STRIPE_ACCOUNT_ID",
      });
    },

【问题讨论】:

  • "访问 dashboard.stripe.com/account/apple_pay 注册此域。"这是你做的吗?
  • 我在这里看到的主要问题之一是条带对象和支付请求实例有 2 个定义。此外,我会考虑更改代码,以便不会触发任何事件的按钮单击。相反,应该使用 canMakePayment() 来确定您是否应该安装按钮,然后在单个 paymentRequest 实例上更改付款方式和送货地址等事件句柄。
  • 然后我还会通过 API 或仪表板检查该域是否以实时模式注册:stripe.com/docs/stripe-js/elements/…

标签: vue.js stripe-payments applepay applepayjs payment-request-api


【解决方案1】:

您应该验证域名注册并将卡添加到 wallet.tha

【讨论】:

    猜你喜欢
    • 2016-07-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-13
    • 2017-09-14
    • 2014-12-15
    • 2021-04-02
    相关资源
    最近更新 更多