Square Connect - フォームのカスタマイズ

チャイルドケアセンターで番号を入力して顧客が指定した支払いを受け入れることができる支払いフォームを作成しようとしています。 Githubにある基本設定で作業するための基本的なフォームが用意されているため、セットアップが正しく実行されています。私の問題は、私がフロントエンドのデザイナーであり、他のフィールドにカード情報を押し入れる方法を見つけることができないということです。 Square Connect APIを実行するために必要なすべてのファイルがあります。Square Connect - フォームのカスタマイズ

<script> 
    var sqPaymentForm = new SqPaymentForm({ 
     // Replace this value with your application's ID (available from the merchant dashboard). 
     // If you're just testing things out, replace this with your _Sandbox_ application ID, 
     // which is also available there. 
     applicationId: 'MY-APPLICATION-ID', 
     inputClass: 'sq-input', 
     cardNumber: { 
     elementId: 'sq-card-number', 
     placeholder: "0000 0000 0000 0000" 
     }, 
     cvv: { 
     elementId: 'sq-cvv', 
     placeholder: 'CVV' 
     }, 
     expirationDate: { 
     elementId: 'sq-expiration-date', 
     placeholder: 'MM/YY' 
     }, 
     postalCode: { 
     elementId: 'sq-postal-code', 
     placeholder: 'Postal Code' 
     }, 
     // inputStyles: [ 
     // // Because this object provides no value for mediaMaxWidth or mediaMinWidth, 
     // // these styles apply for screens of all sizes, unless overridden by another 
     // // input style below. 
     // { 
     //  fontSize: '14px', 
     //  padding: '3px' 
     // }, 
     // // These styles are applied to inputs ONLY when the screen width is 400px 
     // // or smaller. Note that because it doesn't specify a value for padding, 
     // // the padding value in the previous object is preserved. 
     // { 
     //  mediaMaxWidth: '400px', 
     //  fontSize: '18px', 
     // } 
     // ], 
     callbacks: { 
     cardNonceResponseReceived: function(errors, nonce, cardData) { 
      if (errors) { 
      var errorDiv = document.getElementById('errors'); 
      errorDiv.innerHTML = ""; 
      errors.forEach(function(error) { 
       var p = document.createElement('p'); 
       p.innerHTML = error.message; 
       errorDiv.appendChild(p); 
      }); 
      } else { 
      // This alert is for debugging purposes only. 
      alert('Nonce received! ' + nonce + ' ' + JSON.stringify(cardData)); 
      // Assign the value of the nonce to a hidden form element 
      var nonceField = document.getElementById('card-nonce'); 
      nonceField.value = nonce; 
      // Submit the form 
      document.getElementById('form').submit(); 
      } 
     }, 
     unsupportedBrowserDetected: function() { 
      // Alert the buyer that their browser is not supported 
     } 
     } 
    }); 
    function submitButtonClick(event) { 
     event.preventDefault(); 
     sqPaymentForm.requestCardNonce(); 
    } 
</script> 
<form class="uk-form billing-form uk-flex uk-flex-wrap" id="form" novalidate action="/payment-portal/process-card.php" method="post"> 
    <div class="personal-info uk-flex uk-flex-column"> 
      <div class="billing-form-group uk-flex uk-flex-space-between"> 
      <input type="text" placeholder="First Name" id="given_name" class="uk-form-large" style="margin-bottom: 1rem;"> 
      <input type="text" placeholder="Last Name" id="family_name" class="uk-form-large"> 
     </div> 
     <input type="text" placeholder="Billing Address" class="uk-form-large"> 
     <input type="text" placeholder="City" class="uk-form-large"> 
     <select class="uk-form-large"> 
      <option value="AL">Alabama</option> 
      <option value="AK">Alaska</option> 
      <option value="AZ">Arizona</option> 
      <option value="AR">Arkansas</option> 
      <option value="CA">California</option> 
      <option value="CO">Colorado</option> 
      <option value="CT">Connecticut</option> 
      <option value="DE">Delaware</option> 
      <option value="DC">District Of Columbia</option> 
      <option value="FL">Florida</option> 
      <option value="GA">Georgia</option> 
      <option value="HI">Hawaii</option> 
      <option value="ID">Idaho</option> 
      <option value="IL">Illinois</option> 
      <option value="IN">Indiana</option> 
      <option value="IA">Iowa</option> 
      <option value="KS">Kansas</option> 
      <option value="KY">Kentucky</option> 
      <option value="LA">Louisiana</option> 
      <option value="ME">Maine</option> 
      <option value="MD">Maryland</option> 
      <option value="MA">Massachusetts</option> 
      <option value="MI">Michigan</option> 
      <option value="MN">Minnesota</option> 
      <option value="MS">Mississippi</option> 
      <option value="MO">Missouri</option> 
      <option value="MT">Montana</option> 
      <option value="NE">Nebraska</option> 
      <option value="NV">Nevada</option> 
      <option value="NH">New Hampshire</option> 
      <option value="NJ">New Jersey</option> 
      <option value="NM">New Mexico</option> 
      <option value="NY">New York</option> 
      <option value="NC">North Carolina</option> 
      <option value="ND">North Dakota</option> 
      <option value="OH">Ohio</option> 
      <option value="OK">Oklahoma</option> 
      <option value="OR">Oregon</option> 
      <option value="PA">Pennsylvania</option> 
      <option value="RI">Rhode Island</option> 
      <option value="SC">South Carolina</option> 
      <option value="SD">South Dakota</option> 
      <option value="TN">Tennessee</option> 
      <option value="TX">Texas</option> 
      <option value="UT">Utah</option> 
      <option value="VT">Vermont</option> 
      <option value="VA">Virginia</option> 
      <option value="WA">Washington</option> 
      <option value="WV">West Virginia</option> 
      <option value="WI">Wisconsin</option> 
      <option value="WY">Wyoming</option> 
     </select> 
     <input type="text" placeholder="Zip Code" id="sq-postal-code" class="uk-form-large"> 
    </div> 
    <div class="card-info uk-flex uk-flex-column"> 
     <input type="text" placeholder="Phone Number" class="uk-form-large"> 
     <input type="email" placeholder="Email" class="uk-form-large"> 
     <div class="billing-form-group uk-flex uk-flex-space-between"> 
      <input type="text" placeholder="Amount" class="uk-form-large"> 
      <select class="uk-form-large"> 
       <option>Visa</option> 
       <option>Mastercard</option> 
       <option>Discover</option> 
       <option>American Express</option> 
      </select> 
     </div> 
     <input type="text" placeholder="Card Number" id="sq-card-number" class="uk-form-large"> 
     <div class="exp-cvv-group uk-flex uk-flex-space-between"> 
      <input type="text" placeholder="MM/YY" id="sq-expiration-date" class="uk-form-large"> 
      <input type="text" placeholder="CVV" id="sq-cvv" class="uk-form-large uk-form-width-mini"> 
     </div> 
    </div> 
    <input type="hidden" id="card-nonce" name="nonce"> 
    <div class="billing-button-container"> 
     <input type="submit" onclick="submitButtonClick(event)" id="card-nonce-submit" class="button mid-blue-button billing-button"></div> 
    </div> 
</form> 
<div id="errors"></div>

マイプロセッサ（プロセスcard.php中）：

<?php 
require 'vendor/autoload.php'; 
# Replace these values. You probably want to start with your Sandbox credentials 
# to start: https://docs.connect.squareup.com/articles/using-sandbox/ 
# The ID of the business location to associate processed payments with. 
# If you're testing things out, use a sandbox location ID. 
# 
# See [Retrieve your business's locations](https://docs.connect.squareup.com/articles/getting-started/#retrievemerchantprofile) 
# for an easy way to get your business's location IDs. If the php page is not rendering, make sure 
# that error reporting is turned on. If you get an error that says, "Fatal error: Uncaught 
# exception 'SquareConnect\ApiException' with message 'API call to 
# https://connect.squareup.com/v2/locations failed, but for an unknown reason." This is most likely 
# caused by blocked outgoing ports in the web server. Contact host provider for resolution. 
$location_id = 'MY-LOCATION-ID'; 
# The access token to use in all Connect API requests. Use your *sandbox* access 
# token if you're just testing things out. 
$access_token = 'MY-ACCESS-TOKEN'; 
# Helps ensure this code has been reached via form submission 
if ($_SERVER['REQUEST_METHOD'] != 'POST') { 
    error_log("Received a non-POST request"); 
    echo "Request not allowed"; 
    http_response_code(405); 
    return; 
} 
# Fail if the card form didn't send a value for `nonce` to the server 
$nonce = $_POST['nonce']; 
if (is_null($nonce)) { 
    echo "Invalid card data"; 
    http_response_code(422); 
    return; 
} 
$transaction_api = new \SquareConnect\Api\TransactionApi(); 
$request_body = array (
    "card_nonce" => $nonce, 
    # Monetary amounts are specified in the smallest unit of the applicable currency. 
    # This amount is in cents. It's also hard-coded for $1.00, which isn't very useful. 
    "amount_money" => array (
    "amount" => 100, 
    "currency" => "USD" 
), 
    # Every payment you process with the SDK must have a unique idempotency key. 
    # If you're unsure whether a particular payment succeeded, you can reattempt 
    # it with the same idempotency key without worrying about double charging 
    # the buyer. 
    "idempotency_key" => uniqid() 
); 
# The SDK throws an exception if a Connect endpoint responds with anything besides 
# a 200-level HTTP code. This block catches any exceptions that occur from the request. 
try { 
    $result = $transaction_api->charge($access_token, $location_id, $request_body); 
    echo "<pre>"; 
    print_r($result); 
    echo "</pre>"; 
} catch (\SquareConnect\ApiException $e) { 
    echo "Caught exception!<br/>"; 
    print_r("<strong>Response body:</strong><br/>"); 
    echo "<pre>"; var_dump($e->getResponseBody()); echo "</pre>"; 
    echo "<br/><strong>Response headers:</strong><br/>"; 
    echo "<pre>"; var_dump($e->getResponseHeaders()); echo "</pre>"; 
}

ここで私はこれまで...

マイフォーム（payment.phpで）を持って、関連するコードがありますMY-anythingへの参照はすべて、自分のアプリケーションの正しい値に置き換えました。（私が言ったように、私は基本的なフォームが働いています）

私は誰もがコード自体を書くことを望んでいませんが、誰かが始める方法の方向に私を指すことができます。私は多分、子供を列記するためにメモをつけて支払いを押し進めるために顧客情報を得る必要があります。ノートを取り込むためにフォームフィールドを追加する必要があることは知っていますが、名前をどうやって作っているのか分からないので、最初にそれを取り除く必要があります。私のもう一つのことは、親が支払う金額をどのくらい入れたいかを入力するための金額項目を追加する方法を知る必要があることです。私はここで、プロセスcard.phpで一部を見ることができます：

"amount_money" => array (
    "amount" => 100, 
    "currency" => "USD" 
),

私はわからないことは、単に充電する最小量が何であるか言っているが、それはたったの$ 1.00充電されるように、それは関係なく、すべての時間を見えない場合何。私はそれがフォームフィールドに接続されていないが、私はそれを接続する方法がわからないことを知っている。

私は文書hereとhereを読みましたが、そのほとんどはギリシャ語です。誰かが私がカスタム金額を稼ぐのを助けることができたら、私は残りを理解することができると思う。追加情報を提供する必要があるかどうかを教えてください。

出典

2016-09-11 codeartistgirl

誰もがクライアント側ですべてを行う方法を見つけましたか？私はそれがアクセストークンを表示するので、潜在的に安全ではないと思う。しかし、それでもなお、AJAXのノンスをお金のオブジェクトで提出する方法はありますか？すべてのPHP、Java、Node APIがREST APIを使用していると仮定しています。 –

カップルの事

で

あなたprocess-card.php APIから毎回あなたの場所を取得する代わりに
```
$location_api = new \SquareConnect\Api\LocationApi(); 
$location_id = $location_api->listLocations($access_token)->getLocations()[0]->getId(); 
```
を（あなたが一箇所だけを持つことを計画している場合）でそれらをハードコーディングする方が簡単かもしれません
高いレベルでは、クレジットカードナンスはフォーム内の他のすべての名前付き変数と共にフォームに渡されます。私はあなたのコードを編集して、より多くの情報を渡し、反対側に表示するようにしました。

<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script> 
<script> 
    var sqPaymentForm = new SqPaymentForm({ 
     // Replace this value with your application's ID (available from the merchant dashboard). 
     // If you're just testing things out, replace this with your _Sandbox_ application ID, 
     // which is also available there. 
     applicationId: 'XXXXX', 
     inputClass: 'sq-input', 
     cardNumber: { 
     elementId: 'sq-card-number', 
     placeholder: "0000 0000 0000 0000" 
     }, 
     cvv: { 
     elementId: 'sq-cvv', 
     placeholder: 'CVV' 
     }, 
     expirationDate: { 
     elementId: 'sq-expiration-date', 
     placeholder: 'MM/YY' 
     }, 
     postalCode: { 
     elementId: 'sq-postal-code', 
     placeholder: 'Postal Code' 
     }, 
     // inputStyles: [ 
     // // Because this object provides no value for mediaMaxWidth or mediaMinWidth, 
     // // these styles apply for screens of all sizes, unless overridden by another 
     // // input style below. 
     // { 
     //  fontSize: '14px', 
     //  padding: '3px' 
     // }, 
     // // These styles are applied to inputs ONLY when the screen width is 400px 
     // // or smaller. Note that because it doesn't specify a value for padding, 
     // // the padding value in the previous object is preserved. 
     // { 
     //  mediaMaxWidth: '400px', 
     //  fontSize: '18px', 
     // } 
     // ], 
     callbacks: { 
     cardNonceResponseReceived: function(errors, nonce, cardData) { 
      if (errors) { 
       var errorDiv = document.getElementById('errors'); 
       errorDiv.innerHTML = ""; 
       errors.forEach(function(error) { 
        var p = document.createElement('p'); 
        p.innerHTML = error.message; 
        errorDiv.appendChild(p); 
       }); 
      } else { 
      // This alert is for debugging purposes only. 
      alert('Nonce received! ' + nonce + ' ' + JSON.stringify(cardData)); 
      // Assign the value of the nonce to a hidden form element 
      var nonceField = document.getElementById('card-nonce'); 
      nonceField.value = nonce; 
      // Submit the form 
      document.getElementById('form').submit(); 
     } 
    }, 
    unsupportedBrowserDetected: function() { 
      // Alert the buyer that their browser is not supported 
     } 
    } 
}); 
    function submitButtonClick(event) { 
     event.preventDefault(); 
     sqPaymentForm.requestCardNonce(); 
    } 
</script> 
<form class="uk-form billing-form uk-flex uk-flex-wrap" id="form" novalidate action="/payment-portal/process-card.php" method="post"> 
    <div class="personal-info uk-flex uk-flex-column"> 
     <div class="billing-form-group uk-flex uk-flex-space-between"> 
      <input type="text" placeholder="First Name" id="given_name" class="uk-form-large" style="margin-bottom: 1rem;"> 
      <input type="text" placeholder="Last Name" id="family_name" class="uk-form-large"> 
     </div> 
     <input type="text" placeholder="Billing Address" class="uk-form-large"> 
     <input type="text" placeholder="City" class="uk-form-large"> 
     <select class="uk-form-large"> 
      <option value="AL">Alabama</option> 
      <option value="AK">Alaska</option> 
      <option value="AZ">Arizona</option> 
      <option value="AR">Arkansas</option> 
      <option value="CA">California</option> 
      <option value="CO">Colorado</option> 
      <option value="CT">Connecticut</option> 
      <option value="DE">Delaware</option> 
      <option value="DC">District Of Columbia</option> 
      <option value="FL">Florida</option> 
      <option value="GA">Georgia</option> 
      <option value="HI">Hawaii</option> 
      <option value="ID">Idaho</option> 
      <option value="IL">Illinois</option> 
      <option value="IN">Indiana</option> 
      <option value="IA">Iowa</option> 
      <option value="KS">Kansas</option> 
      <option value="KY">Kentucky</option> 
      <option value="LA">Louisiana</option> 
      <option value="ME">Maine</option> 
      <option value="MD">Maryland</option> 
      <option value="MA">Massachusetts</option> 
      <option value="MI">Michigan</option> 
      <option value="MN">Minnesota</option> 
      <option value="MS">Mississippi</option> 
      <option value="MO">Missouri</option> 
      <option value="MT">Montana</option> 
      <option value="NE">Nebraska</option> 
      <option value="NV">Nevada</option> 
      <option value="NH">New Hampshire</option> 
      <option value="NJ">New Jersey</option> 
      <option value="NM">New Mexico</option> 
      <option value="NY">New York</option> 
      <option value="NC">North Carolina</option> 
      <option value="ND">North Dakota</option> 
      <option value="OH">Ohio</option> 
      <option value="OK">Oklahoma</option> 
      <option value="OR">Oregon</option> 
      <option value="PA">Pennsylvania</option> 
      <option value="RI">Rhode Island</option> 
      <option value="SC">South Carolina</option> 
      <option value="SD">South Dakota</option> 
      <option value="TN">Tennessee</option> 
      <option value="TX">Texas</option> 
      <option value="UT">Utah</option> 
      <option value="VT">Vermont</option> 
      <option value="VA">Virginia</option> 
      <option value="WA">Washington</option> 
      <option value="WV">West Virginia</option> 
      <option value="WI">Wisconsin</option> 
      <option value="WY">Wyoming</option> 
     </select> 
     <input type="text" placeholder="Zip Code" id="sq-postal-code" class="uk-form-large"> 
    </div> 
    <div class="card-info uk-flex uk-flex-column"> 
    <input name="phone" type="text" placeholder="Phone Number" class="uk-form-large"> 
     <input name="email" type="email" placeholder="Email" class="uk-form-large"> 
     <div class="billing-form-group uk-flex uk-flex-space-between"> 
      <input name="amount" type="text" placeholder="Amount" class="uk-form-large"> 
      <select class="uk-form-large"> 
       <option>Visa</option> 
       <option>Mastercard</option> 
       <option>Discover</option> 
       <option>American Express</option> 
      </select> 
     </div> 
     <input type="text" placeholder="Card Number" id="sq-card-number" value="4111111111111111" class="uk-form-large"> 
     <div class="exp-cvv-group uk-flex uk-flex-space-between"> 
      <input type="text" placeholder="MM/YY" value="0121" id="sq-expiration-date" class="uk-form-large"> 
      <input type="text" placeholder="CVV" id="sq-cvv" class="uk-form-large uk-form-width-mini"> 
     </div> 
    </div> 
    <input type="hidden" id="card-nonce" name="nonce"> 
    <div class="billing-button-container"> 
     <input type="submit" onclick="submitButtonClick(event)" id="card-nonce-submit" class="button mid-blue-button billing-button"> 
    </div> 
</div> 
</form> 
<div id="errors"></div>

<?php 
include 'vendor/autoload.php'; 

$access_token = 'XXXXXX'; 

echo'<pre>'; 
var_dump($_POST); 
echo '</pre>'; 

$location_api = new \SquareConnect\Api\LocationApi(); 

$location_id = $location_api->listLocations($access_token)->getLocations()[0]->getId(); 
# Helps ensure this code has been reached via form submission 
if ($_SERVER['REQUEST_METHOD'] != 'POST') { 
    error_log("Received a non-POST request"); 
    echo "Request not allowed"; 
    http_response_code(405); 
    return; 
} 
# Fail if the card form didn't send a value for `nonce` to the server 
$nonce = $_POST['nonce']; 
if (is_null($nonce)) { 
    echo "Invalid card data"; 
    http_response_code(422); 
    return; 
} 

$transaction_api = new \SquareConnect\Api\TransactionApi(); 
$request_body = array (
    "card_nonce" => $nonce, 
    # Monetary amounts are specified in the smallest unit of the applicable currency. 
    # This amount is in cents. It's also hard-coded for $1.00, which isn't very useful. 
    "amount_money" => array (
    "amount" => $_POST['amount']*100, 
    "currency" => "USD" 
), 
    # Every payment you process with the SDK must have a unique idempotency key. 
    # If you're unsure whether a particular payment succeeded, you can reattempt 
    # it with the same idempotency key without worrying about double charging 
    # the buyer. 
    "idempotency_key" => uniqid() 
); 
# The SDK throws an exception if a Connect endpoint responds with anything besides 
# a 200-level HTTP code. This block catches any exceptions that occur from the request. 
try { 
    $result = $transaction_api->charge($access_token, $location_id, $request_body); 
    echo "<pre>"; 
    print_r($result); 
    echo "</pre>"; 
} catch (\SquareConnect\ApiException $e) { 
    echo "Caught exception!<br/>"; 
    print_r("<strong>Response body:</strong><br/>"); 
    echo "<pre>"; var_dump($e->getResponseBody()); echo "</pre>"; 
    echo "<br/><strong>Response headers:</strong><br/>"; 
    echo "<pre>"; var_dump($e->getResponseHeaders()); echo "</pre>"; 
}

出典

2016-09-11 19:21:10 tristansokol

OK。私はそのコードを実装しましたが、レスポンスページにこれが一番上に表示されます： – codeartistgirl

array（6）{ ["given_name"] => string（4） "Jane" ["family_name"] => string（3）） "ドウ" [ "電話"] => ストリング（10） "5559995485" [ "電子メール"] => ストリング（11） "[email protected]" [ "量"] => ストリング（5） "90.00" ["nonce"] => 文字列（27） "CBASEIvZRCH2c91VDWlFoNAtDeo" – codeartistgirl

本当の資格情報を使用すれば、それはすべて正方形で表示されますか？ – codeartistgirl

Square Connect - フォームのカスタマイズ

答えて

関連する問題