Basic Implementation for 2Pay.js Payments Solution
Overview
Set up the 2Pay.js drop-in payments client to accept payments on your website.
Collecting payments consists of creating a payment form, tokenizing sensitive card information, and using that token to create a charge.
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 payment client JavaScript:
<script type="text/javascript" src="https://2pay-js.2checkout.com/v1/2pay.js"></script>
To maintain reduced PCI scope, it is mandatory to always include the 2pay.js library hosted on 2Checkout’s servers. Do not use bundle libraries that contain 2pay.js or host a copy of the 2pay.js library from your own servers as this increases your PCI requirements.
4. Insert the following configuration JavaScript to add the card component and generate token request:
window.addEventListener('load', function() { // Initialize the JS Payments SDK client. let jsPaymentClient = new TwoPayClient('YOUR_MERCHANT_CODE'); // Create the component that will hold the card fields. let component = jsPaymentClient.components.create('card'); // 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); }); }); });
Demo
After performing the steps above, your implementation should look like this: