Как интегрировать worldpay с angular2

Question

Я пытаюсь интегрировать 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> 

Почему?
угловой2 удаляет все теги <script из шаблонов.
Предположив с обходным можно было бы внедрить некоторые скрипты на странице в ngAfterViewInit() методе (как я сделал для 1-я ступени)

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 является ViewChild из DIV от шаблона: <div #worldPayScriptElement hidden></div>

Но, в результате их правил обработки, WorldPay будет заменять конфиденциальные данные от моей формы с полем под названием CreditCardToken

от источника: Наконец, в Worldpay.formBuilder() все конфиденциальные данные карты удаляются из формы, заменяются токеном, и только тогда форма возвращается на ваш сервер. источник: https://developer.worldpay.com/jsonapi/docs/own-form

Как продолжить интеграцию этого ... Не могу понять.
Если они будут иметь API, возвращая CreditCardToken на основе GET/POST запроса было бы идеально, но из документации я не нашел еще правильный метод для этого ...

Я действительно оценит любые предложения ,

Answer 1

я решил, что с учетом другого подхода :)

я использовал 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, Поступил)

Как я применит Worldpay API в angular2?

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

Для любых других деталей, не стесняйтесь комментировать/спросить :)

Answer 2

Принятый ответ является большим, если вы можете использовать API, но если вы не PCI -DSS, вы не должны использовать API.

Для использования формы шаблона или собственная формы в угловом 2+ шагов, которые я использовал следующий:

1. Включите Worldpay.js как-либо:

   • локальной копия, как сценарий в .angular-cli.json
   • Локальная копия через импорт в вашем компоненте, напримерimport '../../libs/worldpay';
   • Включить тег сценария в главном index.html загрузив ее из КДС:
     <script src="https://cdn.worldpay.com/v1/worldpay.js"></script>

2. Удовлетворить машинопись, что она доступна в компоненте:

   declare var Worldpay: any; 
   

3. используйте устройство ViewChild для получите ссылку на форму:

   @ViewChild('paymentForm') form; 
   

   и в HTML:

   <form #paymentForm> 
   

4. Реализовать функцию обратного вызова, например:

   worldpayCallback(status, response) {   
       if (response.error) { 
       this.handleError(response.error.object); 
       } else { 
       this.token = response.token; 
       } 
   } 
   

5. Initialise Worldpay в подходящем крючке, как:

   ngOnInit(): void { 
       Worldpay.useTemplateForm({ 
       'clientKey': this.worldpayKey, 
       'form': this.form.nativeElement, 
       'callback': (status, response) => this.worldpayCallback(status, response) 
       }); 
   }  
   

Вы должны теперь есть токен, доступный вам после отправки формы.

Обратите внимание, что если вы используете свою собственную форму, вам необходимо стать совместимым с PCI SAQ A-EP, который включает в себя процесс самооценки (длинные документы).

Answer 3

Это рабочий пример в угловом 4/5. Пожалуйста, добавьте ваш клиент ключ API для Worldpay.component.ts

https://plnkr.co/edit/vz6YX68ykyBuHGiwGBVx

Шаблон:

<form #paymentForm *ngIf="!token"> 
    <div id="paymentSection"></div> 
</form> 
<h2 *ngIf="token">Token from WorldPay {{ token }}</h2> 

компонент:

import { Component, OnInit, ViewChild } from '@angular/core'; 
declare var Worldpay: any; 

@Component({ 
    selector: 'app-worldpay', 
    templateUrl: './worldpay.component.html' 
}) 

export class WorldpayComponent implements OnInit { 

    @ViewChild('paymentForm') form; 
    readonly worldpayClientKey = 'ADD_YOUR_KEY_HERE'; 
    token: string = null; 

    constructor() { } 

    ngOnInit() { 
    this.loadScript('https://cdn.worldpay.com/v1/worldpay.js', this.init); 
    } 

    init =(): void => { 
    Worldpay.useTemplateForm({ 
     'clientKey': this.worldpayClientKey, 
     'form': this.form.nativeElement, 
     'paymentSection': 'paymentSection', 
     'display': 'inline', 
     'type': 'card', 
     'callback': this.worldpayCallback 
    }); 
    } 

    worldpayCallback = (status): void => { 
    this.token = status.token; 
    } 

    private loadScript(url: string, callbackFunction: (any) = undefined) { 
    const node = document.createElement('script'); 
    node.src = url; 
    node.type = 'text/javascript'; 
    node.onload = callbackFunction; 
    document.getElementsByTagName('body')[0].appendChild(node); 
    } 
}