javascript - Stripe 3D 安全和定期付款设置

Question

我有一个 Stripe 3D 安全支付设置，我以前在多个网站上都使用过它。但是，当通常使用它时，我将其限制为仅 3D 安全卡，仅此而已。现在我希望能够接受不支持 3D 安全的信用卡。在我在下面的代码中完全附加的当前设置中，我正在创建一个 3D 安全源并将完成的源提交到我的 chargeCard.php 文件以对卡进行收费。

我正在 main.js 和 api.js 文件中创建 3D 安全源。在 api.js 文件中，它检查卡是否支持 3D Secure。特别是在第 24 到 28 行是它会检查的地方，以防卡不支持 3D 安全设置。这是我尝试将卡源直接提交到表单然后提交收费的地方，就像没有 3D 安全的常规收费一样。然而什么也没发生，它只是一直说“正在加载......请稍候......”它在 main.js 中设置，直到发生某些事情，这意味着在这种情况下什么都没有发生。

我的问题是，我将如何对其进行更改，以便整个 3D 安全系统正常工作。但是如果提交的卡不支持3D Secure，并且仍然可以收费，那么如果没有3D Secure，它只会进行常规收费吗？

请注意，使用支持 3D 安全的卡运行脚本时，它可以完美运行。一切都按预期运行并收费，当使用不支持 3D Secure 的卡时，它根本不工作。

下面是附加的HTML表单，main.js，api.js和chargeCard.php

HTML 表单

<form action="chargeCard.php" method="POST" id="payment-form" name="payment-form">

                    <input type="text" name="firstName" id="fName" placeholder="Firstname"><br>
                    <input type="text" name="lastName" id="lName" placeholder="Lastname"><br>
                    <input type="text" name="country" id="countryFr" placeholder="Country"><br>
                    <input type="text" name="emailPer" id="emailPer" placeholder="Email"><br>

                    <input type="text" name="cardNum" id="cardNumId" placeholder="Card number"><br>

                    <select name="expMonth"  id="expMonthId"  class="card-expiry-month">
                    <option value="">Exp: Month</option>
                    <option value="1">01</option>
                    <option value="2">02</option>
                    <option value="3">03</option>
                    <option value="4">04</option>
                    <option value="5">05</option>
                    <option value="6">06</option>
                    <option value="7">07</option>
                    <option value="8">08</option>
                    <option value="9">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>

                <select name="expYear"  id="expYearId" class="card-expiry-year">
                    <option value="">Exp: Year</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                    <option value="2022">2022</option>
                    <option value="2023">2023</option>
                    <option value="2024">2024</option>
                    <option value="2025">2025</option>
                    <option value="2026">2026</option>
                    <option value="2027">2027</option>
                    <option value="2028">2028</option>
                    <option value="2029">2029</option>
                    <option value="2030">2030</option>
                    <option value="2031">2031</option>
                    <option value="2032">2032</option>
                    <option value="2033">2033</option>
                    <option value="2034">2034</option>
                    <option value="2035">2035</option>
                    <option value="2036">2036</option>
                    <option value="2037">2037</option>
                    <option value="2038">2038</option>
                    <option value="2039">2039</option>
                     <option value="2040">2040</option>
                </select>
                    <br>
                    <input type="text" name="cvcCard" id="cvcID" placeholder="CVC"><br>

                    <br>

                    <input type="button" id="customButton" value="Finish" form="chargeForm" onClick="startAuthFunc();">


                    </form>

<div class="row">

          <div class="col-lg-3">
          </div>
          <div class="col-lg-6" id="iframe-payment">
          </div><!-- iframe for the 3D secure checking-->
          <div class="col-lg-3">
          </div>

          </div>

          </div>

main.js

function startAuthFunc() {
  const paymentRequest = {
    cardNumber: document.getElementById('cardNumId').value, 
    expYear: document.getElementById('expYearId').value, 
    expMonth: document.getElementById('expMonthId').value, 
    cvc: document.getElementById('cvcID').value, 
    currency: 'USD', 
    amount: 1000, 
    nativeElement: document.querySelector('#iframe-payment')
  };


  paymentRequest.nativeElement.innerHTML = 'Loading... Please wait...';

  doPayment(paymentRequest).then((result) => {
    console.log('result --> ', result);
    paymentRequest.nativeElement.innerHTML = 'Success! Your details are correct!';
  }).catch((error) => {
    console.error(error);
    paymentRequest.nativeElement.innerHTML = 'We are unable to validate your details...';
    alert('Something went wrong, sorry!' + error);
  });

}

api.js

function doPayment(paymentRequest) {
  return new Promise((resolve, reject) => {
    const onCreateCardCallback = create3DSecure(paymentRequest, resolve, reject);
    return Stripe.source.create({
      type: 'card',
      card: {
        number: paymentRequest.cardNumber,
        cvc: paymentRequest.cvc,
        exp_month: paymentRequest.expMonth,
        exp_year: paymentRequest.expYear
      }
    }, onCreateCardCallback);
  });
}

function create3DSecure(paymentRequest, resolve, reject) {
  return (status, cardResponse) => {
    console.log('create3DSecure --> paymentRequest', paymentRequest);
    console.log('create3DSecure --> status', status);
    console.log('create3DSecure --> createSourceResponse', cardResponse);

    if (status !== 200 || cardResponse.error) {  // problem  //Check if the 3D secure card status
      reject(cardResponse.error);
    }else if (cardResponse.card.three_d_secure === 'not_supported' && cardResponse.status === 'chargeable') {
  //my attempt...
  var $form = $('#payment-form');
  $form.append($('<input type="hidden" name="stripeSource" />').val(source.id));
  $form.get(0).submit();

    } else if(cardResponse.card.three_d_secure === 'optional' || cardResponse.card.three_d_secure === 'required') {
      const onCreate3DSecureCallback = createIframe(paymentRequest, resolve, reject);

      Stripe.source.create({ //Create the 3D Secure source for 3D secure check and charge
        type: 'three_d_secure',
        amount: paymentRequest.amount, //Amount of payment 
        currency: paymentRequest.currency, //The currency of which the payment is done in
        three_d_secure: { card: cardResponse.id }, //Source ID 
        redirect: { return_url: window.location.href } //Redirect to the location the checking started
      }, onCreate3DSecureCallback);
    }
    else {
      reject(cardResponse);
    }
  };
}

function createIframe(paymentRequest, resolve, reject) {
  return (status, stripe3dsResponse) => {
    console.log('Create the Iframe --> paymentRequest', paymentRequest);
    console.log('Create the Iframe --> status', status);
    console.log('Create the Iframe --> stripe3dsResponse', stripe3dsResponse);

    if (status !== 200 || stripe3dsResponse.error) {  // problem
      reject(stripe3dsResponse.error);
    } else {
      paymentRequest.nativeElement.innerHTML =
        '<iframe style="width:100%; height: 320px;" frameborder="0" src="' + stripe3dsResponse.redirect.url + '"></iframe>';

      const onPollCallbackReal = onPollCallback(paymentRequest, resolve, reject);
      Stripe.source.poll(stripe3dsResponse.id, stripe3dsResponse.client_secret, onPollCallbackReal);
    }
  };
}

function onPollCallback(paymentRequest, resolve, reject) {
  return (status, source) => {
    console.log('onPoolCallback --> ', source);

    if (status !== 200 || source.error) {
      console.log('onPoolCallback --> REJECT --> not 200 or error --> ', source);
      reject(source.error);
    } else if (source.status === 'canceled' || source.status === 'consumed' || source.status === 'failed') {
      console.log('onPoolCallback --> REJECT --> canceled/consumed/fail --> ', source);
      reject(source.status);
    } else if (/* source.three_d_secure.authenticated && */ source.status === 'chargeable') {
      /* some cards do not need to be authenticated, like the 4242 4242 4242 4242 */
      // get the payment form
      var $form = $('#payment-form');
      console.log('onPoolCallback --> SUCCESS --> ', source);
      resolve(source);
      $form.append($('<input type="hidden" name="stripeSource" />').val(source.id));
      $form.get(0).submit();
    }
  };
}

收费卡.php

<?php

require_once('./stripe-php-4.4.0/init.php');

// Set your secret key: find on https://dashboard.stripe.com/account/apikeys
\Stripe\Stripe::setApiKey("sk_test_12345678910");

// Get the payment source submitted by the form:
$sourceGet = $_POST['stripeSource'];
$paymentAmount = 1000;

try {

        $charge = \Stripe\Charge::create(array(
        "amount" => $paymentAmount,
        "currency" => "usd",
        "source" => $sourceGet,
        ));

        if (charge.succeeded) {



        } else if (charge.failed) {
            $message = "Something went wrong and the payment failed";
            echo "<script type='text/javascript'>alert('$message');</script>";
        }

} catch(\Stripe\Error\Card $e) {
        $message2 = "The card was declined, when trying to make payment";
        echo "<script type='text/javascript'>alert('$message2');</script>";
}

?>