How to Create a RecurlyJs Token with PHP
Introduction
Recurly is a popular subscription billing platform that allows businesses to handle recurring payments efficiently. To process payments securely, Recurly provides Recurly.js, a JavaScript library that facilitates client-side tokenization of credit card details. In this article, we will walk through how to generate a Recurly token using PHP and Recurly.js with the provided code.
Prerequisites
Before proceeding, ensure you have the following:
- A Recurly account with API credentials.
- A public API key from Recurly.
- Basic knowledge of PHP, HTML, and JavaScript.
Code Implementation
Below is the complete implementation of generating a Recurly token using PHP and Recurly.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Recurly.js Example: 3-D Secure</title>
<script src="https://js.recurly.com/v4/recurly.js"></script>
<link href="https://js.recurly.com/v4/recurly.css" rel="stylesheet" />
<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Noto Sans', sans-serif;
}
.payment-container{
width: 100%;
display: flex;
justify-content: center;
align-items:start;
}
.payment-container-inner{
margin-top: 50px;
width: 450px;
background:whitesmoke ;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#payment-error-message .err-msg{
color: red;
margin-bottom: 10px;
font-size: 14px;
font-weight: 600;
}
#payment-success-message .success-msg{
color: green;
margin-bottom: 10px;
font-size: 14px;
font-weight: 600;
}
#payment-form{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.recurly-element-card{
width: 400px;
}
#subscribe{
cursor: pointer;
padding: 5px 20px;
height: 30px;
border: none;
border-radius: 30px;
margin-top: 15px;
color: rgba(0, 0, 0, 0.9);
font-weight: bold;
background: #ffd19a;
}
</style>
</head>
<body>
<div class="payment-container">
<div class="payment-container-inner">
<div id="payment-error-message"></div>
<div id="payment-success-message"></div>
<form id="payment-form">
<input type="hidden" data-recurly="first_name" value="John" name="first_name">
<input type="hidden" data-recurly="last_name" value="Doe" name="last_name">
<input type="hidden" data-recurly="address1" value="123 Fake Street" name="address1">
<input type="hidden" data-recurly="city" value="Springfield" name="city">
<input type="hidden" data-recurly="country" value="US" name="country">
<input type="hidden" data-recurly="state" value="IL" name="state">
<input type="hidden" data-recurly="postal_code" value="62701" name="postal_code">
<div id="recurly-element-card"></div>
<div class="text-center px-4">
<button type="submit" id="subscribe">Subscribe</button>
</div>
<input type="hidden" name="recurly-token" id="recurly-token" data-recurly="token">
</form>
</div>
</div>
<script>
recurly.configure({
publicKey: 'your-public-key-here'
});
var elements = recurly.Elements();
var cardElement = elements.CardElement({
style: {
fontFamily: 'Noto Sans',
fontSize: '14px',
fontWeight: 'normal',
fontColor: '#2c0730'
}
});
cardElement.attach('#recurly-element-card');
document.getElementById('payment-form').addEventListener('submit', function(event) {
event.preventDefault();
recurly.token(elements, this, function(err, token) {
if (err) {
document.getElementById('payment-error-message').innerHTML = '<p class="err-msg">' + err.message + '</p>';
} else {
document.getElementById('payment-success-message').innerHTML = '<p class="success-msg"> Token : ' + token.id + '</p>';
}
});
});
</script>
</body>
</html>
Example Images
Explanation
HTML & JavaScript:
- The form securely collects credit card details using Recurly.js.
- When the form is submitted, Recurly.token() generates a token.
- The generated token is displayed for demonstration purposes.
Conclusion
Using Recurly.js with PHP allows you to handle credit card payments securely without storing sensitive data. This implementation ensures PCI compliance and enhances security. You can now use the generated token for further subscription management with Recurly’s API.
Next Steps
- Integrate the token into your billing system.
- Handle API requests to create subscriptions or charge customers.
- Enhance error handling for better user experience.
