Praxisbeispiele - Verknüpfung mit dem Zahlungsanbieter

{{ extends "layouts/account_layout.htm" }}

{{ block content_account_main }}

{{ var $ppcData = $wsPayPalCheckout.loadConfigData() }}
{{ var $paymentId = "paypalCheckout"}}
{{ var $paymentVault = $wsAccount.hasPaymentVault($paymentId) }}

{{if not $paymentVault }}
    <script type="text/javascript"
            src="https://www.paypal.com/sdk/js?client-id={{= $ppcData.clientId }}&merchant-id={{= $ppcData.merchantId }}"
            data-client-token="{{= $ppcData.getClientToken() }}"></script>
{{ /if }}

<h3>PayPal Checkout Vaulting verwalten</h3>

{{ var $removeVaultAction = $wsActions.create('PaymentVaultRemove') }}
{{ if $removeVaultAction.globalErrors }}
    <div class="alert alert-danger">
        <ul>
            {{ foreach $err in $removeVaultAction.globalErrors }}
                <li>{{= $err.text | ifNull($err.code) }}</li>
            {{ /foreach }}
        </ul>
    </div>
{{ /if }}

{{ var $paymentVaultSetupAction = $wsActions.create('PaymentVaultSetup') }}
{{ if $paymentVaultSetupAction.globalErrors }}
    <div class="alert alert-danger">
        <ul>
            {{ foreach $err in $paymentVaultSetupAction.globalErrors }}
                <li>{{= $err.text | ifNull($err.code) }}</li>
            {{ /foreach }}
        </ul>
    </div>
{{ /if }}

{{ var $paymentVaultCreateAction = $wsActions.create('PaymentVaultCreate') }}
{{ if $paymentVaultCreateAction.globalErrors }}
    <div class="alert alert-danger">
        <ul>
            {{ foreach $err in $paymentVaultCreateAction.globalErrors }}
                <li>{{= $err.text | ifNull($err.code) }}</li>
            {{ /foreach }}
        </ul>
    </div>
{{ /if }}

{{ if $paymentVault }}
    <div class="panel panel-default">
        <div class="panel-heading">PayPal-Verbindung löschen</div>
        <div class="panel-body">
            <form method="POST" action="{{= $wsViews.current.url() }}" class="form-horizontal">
                <input type="hidden" name="wscsrf" value="{{= $removeVaultAction.csrf }}">
                <input type="hidden" name="wsact" value="{{= $removeVaultAction.id }}">
                <input type="hidden" name="paymentId" value="{{= $paymentId}}">
                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-8">
                        <button type="submit" class="btn btn-primary">Jetzt Verbindung entfernen</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
{{ else }}
    <div class="panel panel-default">
        <div class="panel-heading">PayPal-Verbindung erstellen</div>
        <div id="ppcbtn-div"></div>
    </div>
    <script>
        window.paypal.Buttons({
            createVaultSetupToken: async () => {
                const data = {
                    wscsrf: "{{= $paymentVaultSetupAction.csrf }}",
                    wsact:  "{{= $paymentVaultSetupAction.id }}",
                    paymentId: "{{= $paymentId }}"
                };
                try {
                    const rawResponse = await fetch("{{! $wsViews.current.url() }}", {
                        method: "POST",
                        body: new URLSearchParams(data)
                    });
                    const text = await rawResponse.text();
                    if (!text) {
                        return false;
                    }
                    return JSON.parse(text).token;
                } catch(excp) {
                    console.log(excp)
                }
                return false;
            },
            onApprove: async (data) => {
                const payload = {
                    "wscsrf" : "{{= $paymentVaultCreateAction.csrf }}",
                    "wsact": "{{= $paymentVaultCreateAction.id }}",
                    "paymentId": "{{= $paymentId }}",
                    "token": data.vaultSetupToken
                };
                const rawResponse = fetch("{{! $wsViews.current.url() }}", {
                    method: "POST",
                    body: new URLSearchParams(payload)
                });
                rawResponse.then(() => {
                    window.location.reload()
                });
            },
            onError: (error) => {
                console.log(error);
            }
        }).render("#ppcbtn-div");
    </script>
{{ /if }}

{{ /block }}

...
{{ var $showPPButton = ($wsCheckout.selectedPayment == "paypalCheckout" or $wsCheckout.selectedPayment == "paypalCheckoutSepa" or $wsCheckout.selectedPayment == "paypalCheckoutPayLater") and $wsCheckout.isValid }}
...
{{ var $ppcVault = $wsCheckout.selectedPayment == "paypalCheckout" and $wsCheckout.hasPaymentVault() }}
{{ $showPPButton = $showPPButton and not $ppcVault}}
...
{{ if  $showPPButton }}
    ...
    {{ if not $ppcData }}
        Konnte nicht richtig konfigurieren
    {{ else }}
      <div>
        <input type="checkbox" name="initPaymentVault" value="y"> PayPal Account für zukünftige Zahlungen speichern
      </div>
      <div id="paypal-button-container"></div>
    {{ /if }}
    ...
{{ /if }}