Dies ist ein Beispiel dafür, wie eine Vorlage für das Hinzufügen von CC aussehen kann. Verwenden Sie sie, um das Formular an der gewünschten Stelle hinzuzufügen.
view/frontend/templates/newcard.phtml
<?php
/** @var \Comwrap\RecurringPayone\Block\Newcard $block */
/** @var \Magento\Customer\ViewModel\Address $viewModel */
/** @var \Magento\Framework\Escaper $escaper */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
$viewModel = $block->getViewModel();
?>
<?php $_country_id = $block->getAttributeData()->getFrontendLabel('country_id'); ?>
<?php $_street = $block->getAttributeData()->getFrontendLabel('street'); ?>
<?php $_city = $block->getAttributeData()->getFrontendLabel('city'); ?>
<?php $_region = $block->getAttributeData()->getFrontendLabel('region'); ?>
<?php $_selectRegion = 'Please select a region, state or province.'; ?>
<?php $_displayAll = $block->getConfig('general/region/display_all'); ?>
<?php $_vatidValidationClass = $viewModel->addressGetAttributeValidationClass('vat_id'); ?>
<?php $_cityValidationClass = $viewModel->addressGetAttributeValidationClass('city'); ?>
<?php $_postcodeValidationClass_value = $viewModel->addressGetAttributeValidationClass('postcode'); ?>
<?php $_postcodeValidationClass = $_postcodeValidationClass_value; ?>
<?php $_streetValidationClass = $viewModel->addressGetAttributeValidationClass('street'); ?>
<?php $_streetValidationClassNotRequired = trim(str_replace('required-entry', '', $_streetValidationClass)); ?>
<?php $_regionValidationClass = $viewModel->addressGetAttributeValidationClass('region'); ?>
<form class="form-address-edit"
action="<?= $escaper->escapeUrl($block->getSaveUrl()) ?>"
method="post"
id="payoneCcAddForm"
name="payoneCcAddForm"
enctype="multipart/form-data"
data-hasrequired="<?= $escaper->escapeHtmlAttr(__('* Required Fields')) ?>">
<fieldset class="fieldset">
<legend class="legend"><span><?= $escaper->escapeHtml(__('Contact Information')) ?></span></legend><br>
<?= $block->getBlockHtml('formkey') ?>
<input type="hidden" name="success_url" value="<?= $escaper->escapeUrl($block->getSuccessUrl()) ?>">
<input type="hidden" name="error_url" value="<?= $escaper->escapeUrl($block->getErrorUrl()) ?>">
<input type="hidden" name="back_url" value="<?= $escaper->escapeUrl($block->getBackUrl()) ?>">
<?= $block->getNameBlockHtml() ?>
<div class="field company required">
<label class="label" for="company">
<span><?= $escaper->escapeHtmlAttr(__('Company')) ?></span>
</label>
<div class="control">
<input type="text"
name="company"
value=""
title="<?= $escaper->escapeHtmlAttr(__('Company')) ?>"
class="input-text"
data-validate="{required:true}"
id="company">
</div>
</div>
<div class="field telephonenumber required">
<label class="label" for="telephone">
<span><?= $escaper->escapeHtmlAttr(__('Phone Number')) ?></span>
</label>
<div class="control">
<input type="text"
name="telephone"
value=""
title="<?= $escaper->escapeHtmlAttr(__('Phone Number')) ?>"
class="input-text"
data-validate="{required:true}"
id="telephone">
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<legend class="legend"><span><?= $escaper->escapeHtml(__('Address')) ?></span></legend><br>
<div class="field street required">
<label for="street_1" class="label"><span><?= /* @noEscape */ $_street ?></span></label>
<div class="control">
<div class="field primary">
<label for="street_1" class="label">
<span>
<?= $escaper->escapeHtml(__('Street Address: Line %1', 1)) ?>
</span>
</label>
</div>
<input type="text"
name="street[]"
value="<?= $escaper->escapeHtmlAttr($block->getStreetLine(1)) ?>"
title="<?= /* @noEscape */ $_street ?>"
id="street_1"
class="input-text <?= $escaper->escapeHtmlAttr($_streetValidationClass) ?>"/>
<div class="nested">
<?php for ($_i = 1, $_n = $viewModel->addressGetStreetLines(); $_i < $_n; $_i++): ?>
<div class="field additional">
<label class="label" for="street_<?= /* @noEscape */ $_i + 1 ?>">
<span><?= $escaper->escapeHtml(__('Street Address: Line %1', $_i + 1)) ?></span>
</label>
<div class="control">
<input type="text" name="street[]"
value="<?= $escaper->escapeHtmlAttr($block->getStreetLine($_i + 1)) ?>"
title="<?= $escaper->escapeHtmlAttr(__('Street Address %1', $_i + 1)) ?>"
id="street_<?= /* @noEscape */ $_i + 1 ?>"
class="input-text
<?= $escaper->escapeHtmlAttr($_streetValidationClassNotRequired) ?>">
</div>
</div>
<?php endfor; ?>
</div>
</div>
</div>
<div class="field zip required">
<label class="label" for="zip">
<span><?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('postcode') ?></span>
</label>
<div class="control">
<input type="text"
name="postcode"
value="<?= $escaper->escapeHtmlAttr($block->getAddress()->getPostcode()) ?>"
title="<?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('postcode') ?>"
id="zip"
class="input-text validate-zip-international
<?= $escaper->escapeHtmlAttr($_postcodeValidationClass) ?>">
<div role="alert" class="message warning">
<span></span>
</div>
<?= /* @noEscape */ $secureRenderer->renderStyleAsTag("display: none;", 'div.message.warning') ?>
</div>
</div>
<div class="field city required">
<label class="label" for="city">
<span><?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('city') ?></span>
</label>
<div class="control">
<input type="text"
name="city"
value="<?= $escaper->escapeHtmlAttr($block->getAddress()->getCity()) ?>"
title="<?= $escaper->escapeHtmlAttr(__('City')) ?>"
class="input-text <?= $escaper->escapeHtmlAttr($_cityValidationClass) ?>"
id="city">
</div>
</div>
<?php if ($viewModel->addressIsVatAttributeVisible()): ?>
<div class="field taxvat">
<label class="label" for="vat_id">
<span><?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('vat_id') ?></span>
</label>
<div class="control">
<input type="text"
name="vat_id"
value="<?= $escaper->escapeHtmlAttr($block->getAddress()->getVatId()) ?>"
title="<?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('vat_id') ?>"
class="input-text <?= $escaper->escapeHtmlAttr($_vatidValidationClass) ?>"
id="vat_id">
</div>
</div>
<?php endif; ?>
<div class="field country required">
<label class="label" for="country">
<span><?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('country_id') ?></span>
</label>
<div class="control">
<?= $block->getCountryHtmlSelect() ?>
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<input type="hidden" name="pseudocardpan" id="pseudocardpan">
<input type="hidden" name="truncatedcardpan" id="truncatedcardpan">
<input type="hidden" name="cardexpiredate" id="cardexpiredate">
<legend class="legend"><span><?= $escaper->escapeHtml(__('Credit Card')) ?></span></legend><br>
<div class="control">
<div style="display: none" class="mage-error" generated="true" id="payone_creditcard-error">
<?= $escaper->escapeHtmlAttr(__('Please enter complete credit card data.')) ?>
</div>
</div>
<div class="field payone_creditcard_credit_card_type required">
<label class="label" for="payone_creditcard_credit_card_type">
<span><?= /* @noEscape */ __('Credit Card Type') ?></span>
</label>
<div class="control">
<select id="payone_creditcard_credit_card_type" name="payment[cc_type]"
title="<?= /* @noEscape */ __('Credit Card Type') ?>"
class="validate-select"
data-validate="{required:true}">
<?php foreach ($block->getCardTypes() as $option): ?>
<option value="<?= $escaper->escapeHtmlAttr($option['id']) ?>">
<?= $block->escapeHtml($option['title']) ?>
</option>
<?php endforeach;?>
</select>
</div>
</div>
<div class="field firstname required">
<label class="label" for="payone_creditcard_firstname">
<span><?= $escaper->escapeHtmlAttr(__('Firstname')) ?></span>
</label>
<div class="control">
<input type="text"
name="payment[cc_firstname]"
value=""
title="<?= $escaper->escapeHtmlAttr(__('Firstname')) ?>"
class="input-text"
data-validate="{required:true}"
id="payone_creditcard_firstname">
</div>
</div>
<div class="field lastname required">
<label class="label" for="payone_creditcard_lastname">
<span><?= $escaper->escapeHtmlAttr(__('Lastname')) ?></span>
</label>
<div class="control">
<input type="text"
name="payment[cc_lastname]"
value=""
title="<?= $escaper->escapeHtmlAttr(__('Lastname')) ?>"
class="input-text"
data-validate="{required:true}"
id="payone_creditcard_lastname">
</div>
</div>
<div class="field payone_creditcard_cc_number required">
<label class="label" for="payone_creditcard_cc_number">
<span><?= $escaper->escapeHtmlAttr(__('Credit Card Number')) ?></span>
</label>
<div class="control">
<span id="cardpan" class="inputIframe"></span>
</div>
</div>
<div class="field expiration_date required">
<label class="label" for="payone_creditcard_expiration">
<span><?= $escaper->escapeHtmlAttr(__('Expiration Date')) ?></span>
</label>
<div class="control">
<div class="fields group group-2">
<div class="field no-label month">
<div class="control">
<span id="cardexpiremonth"></span>
</div>
</div>
<div class="field no-label year">
<div class="control">
<span id="cardexpireyear"></span>
</div>
</div>
</div>
</div>
</div>
<div class="field payone_creditcard_cc_cid required">
<label class="label" for="payone_creditcard_cc_cid">
<span><?= $escaper->escapeHtmlAttr(__('Card Verification Number')) ?></span>
</label>
<div class="control">
<span id="cardcvc2" class="inputIframe"></span>
</div>
</div>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<input type="hidden" name="hideit" id="hideit" value="" />
<button id="savecc"
type="button"
class="action save primary"
title="<?= $escaper->escapeHtmlAttr(__('Save Card')) ?>"
>
<span><?= $escaper->escapeHtml(__('Save Card')) ?></span>
</button>
</div>
<div class="secondary">
<a class="action back" href="<?= $escaper->escapeUrl($block->getBackUrl()) ?>">
<span><?= $escaper->escapeHtml(__('Go back')) ?></span>
</a>
</div>
</div>
</form>
<?php $serializedPayoneConfig = /* @noEscape */ $block->getPayoneConfig();
$scriptString = <<<script
window.payoneConfig = {$serializedPayoneConfig};
script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
<?php $scriptString = <<<script
require(["jquery","mage/mage"],function($){
var dataForm = $('#payoneCcAddForm');
$('button#savecc').click( function() {
if (dataForm.validation('isValid')) {
if (iframes.isComplete()) {
iframes.creditCardCheck('checkCallback');
return true;
} else {
$('#payone_creditcard-error').show();
return false;
}
}
});
});
script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false); ?>
<script>
var iframes = new Payone.ClientApi.HostedIFrames(
window.payoneConfig.payment.payone.fieldConfig,
window.payoneConfig.payment.payone.hostedRequest
);
iframes.setCardType("V");
document.getElementById('payone_creditcard_credit_card_type').onchange = function () {
iframes.setCardType(this.value); // on change: set new type of credit card to process
};
function checkCallback(response) {
if (response.status === "VALID") {
document.getElementById("pseudocardpan").value = response.pseudocardpan;
document.getElementById("truncatedcardpan").value = response.truncatedcardpan;
document.getElementById("cardexpiredate").value = response.cardexpiredate;
document.payoneCcAddForm.submit();
}
}
</script>
<script type="text/x-magento-init">
{
"#payoneCcAddForm": {
"addressValidation": {
"postCodes": <?= /* @noEscape */ $block->getPostCodeConfig()->getSerializedPostCodes() ?>
}
},
"#country": {
"regionUpdater": {
"optionalRegionAllowed": <?= /* @noEscape */ $_displayAll ? 'true' : 'false' ?>,
"regionListId": "#region_id",
"regionInputId": "#region",
"postcodeId": "#zip",
"form": "#form-validate",
"regionJson": <?= /* @noEscape */ $viewModel->dataGetRegionJson() ?>,
"defaultRegion": "<?= (int) $block->getRegionId() ?>",
"countriesWithOptionalZip": <?= /* @noEscape */ $viewModel->dataGetCountriesWithOptionalZip(true) ?>
}
}
}
</script>
Sobald alle erforderlichen Felder ausgefüllt sind und der Benutzer auf die Schaltfläche "Karte speichern" klickt, müssen wir die Kartendaten an Payone senden und die Informationen in Magento speichern.
