[LIBSDK-11] add direct-debit frontend examples

ratepay · Apr 5, 2017 · 1d1c859 · 1d1c859
1 parent d9761b3
commit 1d1c859
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 0 deletions.
diff --git a/example.frontend/directDebit/example.directDebitByTemplate.php b/example.frontend/directDebit/example.directDebitByTemplate.php
@@ -0,0 +1,8 @@
+<?php
+
+require __DIR__ . '/../../vendor/autoload.php';
+
+$htmlStringOrTemplate = file_get_contents("template.directDebit.html");
+
+$ib = new RatePAY\Frontend\DirectDebitBuilder();
+echo $ib->getSepaFormByTemplate($htmlStringOrTemplate);
diff --git a/example.frontend/directDebit/resources/ratepay-bootstrap.min.css b/example.frontend/directDebit/resources/ratepay-bootstrap.min.css
diff --git a/example.frontend/directDebit/resources/ratepay-directdebit.js b/example.frontend/directDebit/resources/ratepay-directdebit.js
@@ -0,0 +1,29 @@
+$rp(function() {
+    // initialize visibility
+    //switchBankCodeInput($rp('#rp-iban-account-number'));
+    $rp('#rp-sepa-agreement').hide();
+
+    // show sepa agreement
+    $rp('#rp-show-sepa-agreement').click(function() {
+        $rp(this).hide();
+        $rp('#rp-sepa-agreement').show();
+    });
+
+    // show bank code if account number is entered
+    /*$rp('#rp-iban-account-number').keyup(function() {
+        switchBankCodeInput($rp(this));
+    });*/
+
+});
+
+// show bank code if account number is entered
+function switchBankCodeInput(element) {
+    if (!jQuery.isNumeric(element.val()) || element.val() == "") {
+        $rp('#rp-form-bank-code').hide();
+        $rp('#rp-bank-code').prop('disabled', true);
+    } else {
+        $rp('#rp-form-bank-code').show();
+        $rp('#rp-bank-code').prop('disabled', false);
+    }
+}
+
diff --git a/example.frontend/directDebit/resources/ratepay-jquery-3.2.0.min.js b/example.frontend/directDebit/resources/ratepay-jquery-3.2.0.min.js
diff --git a/example.frontend/directDebit/resources/ratepay-style.css b/example.frontend/directDebit/resources/ratepay-style.css
@@ -0,0 +1,7 @@
+.rp-row-space {
+    margin-bottom: 10px;
+}
+
+.rp-link {
+    cursor: pointer;
+}
diff --git a/example.frontend/directDebit/template.directDebit.html b/example.frontend/directDebit/template.directDebit.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <title>SEPA Formular</title>
+
+    <link href="resources\style.css" media="all" rel="stylesheet" type="text/css" />
+    <!--<link href="https://www.ratepay.com/wp-content/themes/ratepay/build/css/common.css" media="all" rel="stylesheet" type="text/css" />-->
+    <link href="resources/ratepay-bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
+    <link href="resources/ratepay-style.css" media="all" rel="stylesheet" type="text/css" />
+
+    <script language="JavaScript" src="resources/ratepay-jquery-3.2.0.min.js"></script>
+    <script>
+        var $rp = jQuery.noConflict(); // Prevent conflicts by creating an alias $rp to the jQuery function
+    </script>
+    <script language="JavaScript" src="resources/ratepay-directdebit.js"></script>
+
+</head>
+<body>
+
+<div class="container">
+    <div class="row rp-row-space rp-sepa-form">
+        <table class="rp-sepa-table small">
+            <tr>
+                <td colspan="2">
+                    {{ rp_address }}
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    {{ rp_creditor }}
+                </td>
+                <td>
+                    {{ rp_creditor_id }}
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    {{ rp_mandate }}&nbsp;
+                </td>
+                <td>
+                    {{ rp_mandate_ref }}
+                </td>
+            </tr>
+        </table>
+    </div>
+
+    <div class="row rp-sepa-form">
+        <form>
+            <input type="hidden" name="rp-payment-type" id="rp-payment-type" />
+
+            <div class="form-group">
+                <label class="small">{{ rp_account_holder }}</label>
+                <input type="text" class="form-control disabled" value="Alice Nobodyknows" disabled /><!-- Show account holder name = billing address firstname and lastname -->
+            </div>
+            <!-- Account number is only allowed for customers with german billing address. IBAN must be used for all others -->
+            <div class="form-group">
+                <label class="small">{{ rp_iban }}</label>
+                <input type="text" class="form-control" id="rp-iban-account-number" name="rp-iban-account-number" />
+            </div>
+            <!-- Bank code is only necesarry if account number (no iban) is set -->
+            <!--<div class="form-group" id="rp-form-bank-code">
+                <label class="small">{{ rp_bank_code }}</label>
+                <input type="text" class="form-control" id="rp-bank-code" name="rp-bank-code" />
+            </div>-->
+        </form>
+    </div>
+
+    <div class="row rp-row-space small rp-sepa-form" id="rp-show-sepa-agreement">
+        <a class="rp-link">{{ rp_sepa_link }}</a>
+    </div>
+    <div class="row rp-row-space small rp-sepa-form" id="rp-sepa-agreement">
+        {{ rp_sepa_terms_block_1 }}
+        {{ rp_address }}
+        {{ rp_sepa_terms_block_2 }}
+        <a target="_blank" href="{{ rp_data_privacy_policy_url }}">{{ rp_data_privacy_policy }}</a>
+        {{ rp_sepa_terms_block_3 }}
+        <br/><br/>
+        <strong>{{ rp_sepa_notice_block_1 }}</strong>
+        <br/>
+        {{ rp_sepa_notice_block_2 }}
+        <br/>
+        {{ rp_sepa_notice_block_3 }}
+    </div>
+</div>
+
+</body>
+</html>