I'm trying to use Adyen's Secured Fields to encrypt shopper's sensitive data
The inputs are supposed to render as iframes on the page, but I'm getting the following error.
iframe error
Libray embed in the <head>
<script type="text/javascript" src=".1.3.3.min.js"></script>
Form
<form class="flex-center position-ref h-100" action="{{ route('pay.credit') }}" method="post" id="adyen-encrypted-form">
@csrf()
@method('POST')
<div class="cards-div">
<div class="js-chckt-pm__pm-holder">
<input type="hidden" name="txvariant" value="card" />
{{--<div class="form-group">--}}
{{--<div class="form-control">--}}
<label>
<span class="input-field" data-cse="encryptedCardNumber"></span>
</label>
{{--</div>--}}
{{--</div>--}}
<div class="form-group">
<div class="form-control">
<label>
<span class="input-field" data-cse="encryptedExpiryMonth"></span>
</label>
</div>
</div>
<div class="form-group">
<div class="form-control">
<label>
<span class="input-field" data-cse="encryptedExpiryYear"></span>
</label>
</div>
</div>
<div class="form-group">
<div class="form-control">
<label>
<span class="input-field" data-cse="encryptedSecurityCode"></span>
</label>
</div>
</div>
<div id="pmHolder" class="js-chckt-pm__pm-holder">
<input type="hidden" name="txvariant" value="card">
<input type="hidden" name="encryptedCardNumber" id="card-encrypted-card" value="">
<input type="hidden" name="encryptedExpiryMonth" id="card-encrypted-month" value="">
<input type="hidden" name="encryptedExpiryYear" id="card-encrypted-year" value="">
<input type="hidden" name="encryptedSecurityCode" id="card-encrypted-code" value="">
</div>
<button type="submit" class="btn btn-success btn-lg btn-block">Pagar</button>
</div>
</div>
</form>
Origin key at the bottom of <body>
<script type="text/javascript">
var csfSetupObj = {
rootNode: '.cards-div',
configObject : {
originKey : "pub.v2.8015418815230181.aHR0cDovL2FkeWVuLmJldGE.KfETYJbalDv9FEZ04R8azVjBqUreC611yhD-ZFMwZKI0"
}
};
var securedFields = csf(csfSetupObj);
</script>
I'm trying to use Adyen's Secured Fields to encrypt shopper's sensitive data https://docs.adyen./developers/checkout/api-integration
The inputs are supposed to render as iframes on the page, but I'm getting the following error.
iframe error
Libray embed in the <head>
<script type="text/javascript" src="https://checkoutshopper-test.adyen./checkoutshopper/assets/js/sdk/checkoutSecuredFields.1.3.3.min.js"></script>
Form
<form class="flex-center position-ref h-100" action="{{ route('pay.credit') }}" method="post" id="adyen-encrypted-form">
@csrf()
@method('POST')
<div class="cards-div">
<div class="js-chckt-pm__pm-holder">
<input type="hidden" name="txvariant" value="card" />
{{--<div class="form-group">--}}
{{--<div class="form-control">--}}
<label>
<span class="input-field" data-cse="encryptedCardNumber"></span>
</label>
{{--</div>--}}
{{--</div>--}}
<div class="form-group">
<div class="form-control">
<label>
<span class="input-field" data-cse="encryptedExpiryMonth"></span>
</label>
</div>
</div>
<div class="form-group">
<div class="form-control">
<label>
<span class="input-field" data-cse="encryptedExpiryYear"></span>
</label>
</div>
</div>
<div class="form-group">
<div class="form-control">
<label>
<span class="input-field" data-cse="encryptedSecurityCode"></span>
</label>
</div>
</div>
<div id="pmHolder" class="js-chckt-pm__pm-holder">
<input type="hidden" name="txvariant" value="card">
<input type="hidden" name="encryptedCardNumber" id="card-encrypted-card" value="">
<input type="hidden" name="encryptedExpiryMonth" id="card-encrypted-month" value="">
<input type="hidden" name="encryptedExpiryYear" id="card-encrypted-year" value="">
<input type="hidden" name="encryptedSecurityCode" id="card-encrypted-code" value="">
</div>
<button type="submit" class="btn btn-success btn-lg btn-block">Pagar</button>
</div>
</div>
</form>
Origin key at the bottom of <body>
<script type="text/javascript">
var csfSetupObj = {
rootNode: '.cards-div',
configObject : {
originKey : "pub.v2.8015418815230181.aHR0cDovL2FkeWVuLmJldGE.KfETYJbalDv9FEZ04R8azVjBqUreC611yhD-ZFMwZKI0"
}
};
var securedFields = csf(csfSetupObj);
</script>
-
I wasn't able to replicate this using my own details. But often the problem can be incorrect domain when creating the originKey. e.g. for my local testing, I created an originKey with domain of
http://localhost:8080– luke_b Commented Dec 10, 2018 at 21:23
3 Answers
Reset to default 4just because we've been hitting this issue too,
make sure you're testing the adyens script on the domain which you have entered when you have generated originKey.
those MUST match for the script to work correctly. If you want to test this locally first, generate second originKey in Adyen Panel just for the localhost:8080 just like luke_b suggested.
If domain and domain won't match, iframes WILL render, but they won't appear (will have disply:none styles on them)
Well guys, it turns out that it wasn't related to the code actually.
In my account panel I had this CSE library disabled
The best way to solve it, is to make contact with Adyen's support or trying the classic integration in which you can host this library in locally.
For me I just added my local dev domain http://127.0.0.1:5000 to Allowed origins in Customer Area