4

Worldpay を angular2 アプリに統合しようとしています。

ページにスクリプトを含める必要がある 独自のフォーム( own-form ) アプローチを使用しています:<script src="https://cdn.worldpay.com/v1/worldpay.js"></script> いくつかの入力に特定の属性を追加:data-worldpayそしてWorldpay.jsロジックをフォームに添付します...

1. Worldpay.js
をページに含める
2. 関連する属性を使用して支払いフォームを作成する

どうすれば次のステップに進むことができますか...私はその問題で立ち往生しています:

5. Worldpay.js をフォームに添付します。

<script type="text/javascript">
var form = document.getElementById('paymentForm');

Worldpay.useOwnForm({
  'clientKey': 'your-test-client-key',
  'form': form,
  'reusable': false,
  'callback': function(status, response) {
    document.getElementById('paymentErrors').innerHTML = '';
    if (response.error) {             
      Worldpay.handleError(form, document.getElementById('paymentErrors'), response.error); 
    } else {
      var token = response.token;
      Worldpay.formBuilder(form, 'input', 'hidden', 'token', token);
      form.submit();
    }
  }
});
</script>

なんで？
angular2 は<scriptテンプレートからすべてのタグを削除します。
回避策があれば、ngAfterViewInit()メソッドのページにいくつかのスクリプトを挿入できると仮定します（最初のステップで行ったように）

ngAfterViewInit(): void {        
  let s = document.createElement("script");
  s.type = "text/javascript";
  s.src = "https://cdn.worldpay.com/v1/worldpay.js";
  this.worldPayScriptElement.nativeElement.appendChild(s);        
}

this.worldPayScriptElementテンプレートの div の ViewChild は次のとおりです。<div #worldPayScriptElement hidden></div>

しかし、処理ルールの結果として、worldpay は私のフォームの機密データをCreditCardTokenというフィールドに置き換えます。

ソースから:最後に、 Worldpay.formBuilder() ですべての機密カード データがフォームから削除され、トークンに置き換えられてから、フォームがサーバーに送信されます。 ソース: https://developer.worldpay.com/jsonapi/docs/own-form

これを統合し続ける方法...理解できません。
リクエストに基づいて CreditCardToken を返す API があればGET/POST完璧ですが、ドキュメントからは、そのための適切な方法がまだ見つかりませんでした...

どんな種類の提案でも本当に感謝します。

4

3 に答える 3

3

別のアプローチを検討することを解決しました:)

Worldpay API を使用してトークンを取得しました。
API URL:https://api.worldpay.com/v1/tokens

POSTエンドポイントは、次の形式のリクエストを待機します。

'{
    "reusable": true/false,
    "paymentMethod": {
        "name": "name",
        "expiryMonth": 2,
        "expiryYear": 2015,
        "issueNumber": 1,
        "startMonth": 2,
        "startYear": 2013,
        "cardNumber": "4444 3333 2222 1111",
        "type": "Card",
        "cvc": "123"
    },
    "clientKey": "T_C_client_key"
}'

にHeaderは次のオプションを含める必要があります。 "Content-type: application/json"

worldpay.jsこれで、ページに含める必要がなくなりました。また、支払いフォームに worldpay 固有の属性 ( など)
を含める必要がなくなりました。data-worldpay=""

API を呼び出すだけで、次の形式の応答を待つ必要があります。

{
    "token": "UUID of token",
    "reusable": true/false,
    "paymentMethod": {
        "type" : "ObfuscatedCard",     
        "name": "name",
        "expiryMonth": 2,
        "expiryYear": 2015,
        "issueNumber": 1,
        "startMonth": 2,
        "startYear": 2013,
        "cardType": "VISA_CREDIT",
        "maskedCardNumber": "xxxx xxxx xxxx 1111",
        "cardSchemeType": "consumer",
        "cardSchemeName": "VISA CREDIT",
        "cardProductTypeDescNonContactless": "Visa Credit Personal",
        "cardProductTypeDescContactless": "CL Visa Credit Pers",
        "cardIssuer": "LLOYDS BANK PLC",
        "countryCode": "GBR",
        "cardClass": "credit",
        "prepaid": "false"
    }
}

応答からresponse.token、次のステップである支払いに進むために を使用する準備が整いました。

特定の WorldPay 属性が送信されることを確認する必要があります (CreditCardToken、登録済み)。

angular2 で worldpay API を呼び出す方法を教えてください。

public getWorldpayToken(request: any): Observable<any>{
    let worldPayApiUrl = `https://api.worldpay.com/v1/tokens`;
    let body = JSON.stringify(request);
    let headers = new Headers({ 'Content-Type':'application/json;charset=UTF-8'});
    let options = new RequestOptions({ headers: headers });

    return this.http.post(worldPayApiUrl, body, options)
      .map(response => response.json())
      .catch(this.handleError);
}

ドキュメント: https://developer.worldpay.com/jsonapi/api#tokens

その他の詳細については、遠慮なくコメント/質問してください:)

于 2016-12-14T09:15:30.003 に答える