Set custom CSS styles when generating the card component
Overview
Set up the 2Pay.js payments client to accept payments on your website. To collect payments you need to create a payment form, tokenize sensitive card information, and use that token to create a charge.
See the steps below on how to set a custom CSS when generating the card component.
Use case
1. Create a form with id="payment-form":
<form type="post" id="payment-form"> <div class="form-group"> <label for="name" class="label control-label">Name</label> <input type="text" id="name" class="field form-control"> </div> <button class="btn btn-primary" type="submit">Generate token</button> </form>
2. Inside the form, add an element with id="card-element". The form should now look like this:
<form type="post" id="payment-form"> <div class="form-group"> <label for="name" class="label control-label">Name</label> <input type="text" id="name" class="field form-control"> </div> <div id="card-element"> <!-- A TCO IFRAME will be inserted here. --> </div> <button class="btn btn-primary" type="submit">Generate token</button> </form>
3. Include the 2Pay.js drop-in payments client JavaScript:
<script type="text/javascript" src="https://2pay-js.2checkout.com/v1/2pay.js"></script>
4. Insert the following configuration JavaScript to set the custom CSS when adding the card component, and generate the token request:
window.addEventListener('load', function() { // Initialize the JS Payments SDK client. let jsPaymentClient = new TwoPayClient('AVLRNG'); // Define a custom JSON Style let style = { margin : 0, fontFamily : '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"', fontSize : '1rem', fontWeight : '400', lineHeight : '1.5', color : '#212529', textAlign : 'left', backgroundColor : 'pink', '*' : { 'boxSizing': 'border-box' }, '.no-gutters' : { marginRight: 0, marginLeft : 0 }, '.row' : { display : 'flex', flexWrap: 'wrap' }, '.col' : { flexBasis: '0', flexGrow : '1', maxWidth : '100%', padding : '.5rem 0 .5rem 0', position : 'relative', width : '100%' }, 'div' : { display: 'block' }, label : { display : 'inline-block', marginBottom: '.5rem', color : 'green', fontWeight : '900' }, 'input' : { overflow : 'visible', margin : 0, fontFamily : 'inherit', display : 'block', width : '100%', height : 'calc(1.5em + .75rem + 2px)', padding : '.375rem .75rem', fontSize : '1rem', fontWeight : '400', lineHeight : '1.5', color : 'red', backgroundColor: '#eee', backgroundClip : 'padding-box', border : '1px solid #ced4da', borderRadius : '.25rem', transition : 'border-color .15s ease-in-out,box-shadow .15s ease-in-out' }, '.card-expiration-date': { paddingRight: '.5rem' } }; // Create the component that will hold the card fields. let component = jsPaymentClient.components.create('card', style); // Mount the card fields component in the desired HTML tag. This is where the iframe will be located. component.mount('#card-element'); // Handle form submission. document.getElementById('payment-form').addEventListener('submit', (event) => { event.preventDefault(); // Extract the Name field value const billingDetails = { name: document.querySelector('#name').value }; // Call the generate method using the component as the first parameter // and the billing details as the second one jsPaymentClient.tokens.generate(component, billingDetails).then((response) => { console.log(response.token); }).catch((error) => { console.error(error); }); }); });
5. Place the order using the generated token.
Demo
After performing the steps above, your implementation should look like this: