- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I'm using the JavaScript SDK to display my own hosted fields for the payment by card form. It works fine if I specify the following for the fields:
fields: {
number: {
selector: '#card-number',
placeholder: '4111 1111 1111 1111'
},
expirationDate: {
selector: '#expiration-date',
placeholder: 'MM/YY'
},
cvv: {
selector: '#cvv',
}
}
With the following HTML:
<div>
<label for="card-number">Card Number</label>
<div id="card-number" class="card_field"></div>
</div>
<div>
<label for="expiration-date">Expiration Date</label>
<div id="expiration-date" class="card_field"></div>
</div>
<div>
<label for="cvv">Security Code</label>
<input id="cvv" type="text" />
</div>
Notice how the "cvv" field is a form input element. If I try changing the card number to a form input element then it doesn't work. Also I have the same problem changing the expiry date to month/year select elements and then changing the fields as mentioned here.
I'd really appreciate it if somone could help as I've been trying many different combinations without success. Thanks
Solved! Go to Solution.
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I managed to fix this by changing the fields via JavaScript. For example:
const cardNumber = document.createElement('div');
cardNumber.setAttribute('id', 'card-number');
cardNumber.setAttribute('class', 'card-field');
document.getElementById('card-number').replaceWith(cardNumber);
Then all I had to do was style the fields to look like mine.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I managed to fix this by changing the fields via JavaScript. For example:
const cardNumber = document.createElement('div');
cardNumber.setAttribute('id', 'card-number');
cardNumber.setAttribute('class', 'card-field');
document.getElementById('card-number').replaceWith(cardNumber);
Then all I had to do was style the fields to look like mine.
Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.
- Advanced Checkout Error Trigger is not triggering an error but still going through onApprove in Sandbox Environment
- API: Update subscription payment source in REST APIs
- Button not sending customer input to my email in PayPal Payments Standard
- VERSACE | PayPal Express Checkout | Retrieve shopper phone number in Sandbox Environment
- 3D Secure not work with advanced card integration on sandbox in Sandbox Environment