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:
