Get started in 2 mins
Interactive demo of common platform operations.
Credit Card Tokenization
Include Jupiter's javascript (VGS collect UI components) in your application to safely capture credit card information. This script will validate and send the sensitive data directly to Jupiter Platform, ensuring it never touches your servers and freeing you up from PCI compliance.
// VGS Collect form initialization
const tokenForm = VGSCollect.create('tntne5koztu', function(state) {
// Function to check the tokenForm state
});
// Create VGS Collect field for credit card name
tokenForm.field('#cc-name', {
type: 'text',
name: 'CardHolderName',
validations: ['required'],
});
// Create VGS Collect field for credit card number
tokenForm.field('#cc-number', {
type: 'card-number',
name: 'CreditCardNumber',
successColor: '#4F8A10',
errorColor: '#D8000C',
validations: ['required', 'validCardNumber'],
});
// Create VGS Collect field for CVC
tokenForm.field('#cc-cvc', {
type: 'card-security-code',
name: 'Cvv',
validations: ['required', 'validCardSecurityCode'],
});
// Create VGS Collect field for credit card expiration date
tokenForm.field('#cc-expiration-date', {
type: 'card-expiration-date',
name: 'ExpirationDate',
serializers: [tokenForm.SERIALIZERS.separate({monthName: 'ExpirationMonth', yearName: 'ExpirationYear'})],
validations: ['required', 'validCardExpirationDate']
});
// submit tokenForm
tokenForm.submit(
`/api/v1/tokenization/<-subaccount-api-key->`,
{}, tokenizationComplete);
// Tokenization complete callback
function tokenizationComplete(status, tokenizationData) {
//check response status
if(status === 200) {
//perform any operation that you need
alert(JSON.stringify(tokenizationData));
}
}
<div id="cc-container-wrap">
<div class="form-group">
<label for="cc-name">Name</label>
<span id="cc-name" class="form-field">
<!--VGS Collect iframe for card name field will be here!-->
</span>
</div>
<div class="form-group">
<label for="cc-number">Card number</label>
<span id="cc-number" class="form-field">
<!--VGS Collect iframe for card number field will be here!-->
</span>
</div>
<div class="form-group">
<label for="cc-cvc">CVC</label>
<span id="cc-cvc" class="form-field">
<!--VGS Collect iframe for CVC field will be here!-->
</span>
</div>
<div class="form-group">
<label for="cc-expiration-date">Expiration date</label>
<span id="cc-expiration-date" class="form-field">
<!--VGS Collect iframe for expiration date field will be here!-->
</span>
</div>
</div>
#cc-container-wrap body {
padding: 25px;
}
#cc-container-wrap span[id*="cc-"] {
display: block;
height: 40px;
margin-bottom: 15px;
}
#cc-container-wrap span[id*="cc-"] iframe {
height: 100%;
width: 100%;
}
#cc-container-wrap pre {
font-size: 12px;
}
#cc-container-wrap .form-field {
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#cc-container-wrap .form-field iframe {
border: 0 none transparent;
height: 100%;
vertical-align: middle;
width: 100%;
}
#cc-container-wrap p {
margin-bottom: 10px;
}
Open the full sample code from the repository or run online.
Tokenization form
How to customize the form
Modern framework integrations
Browser Compatibility
Mobile Support
How does it work?
1. Include Jupiter's javascript in your page, which will generate a secure form to capture the
credit card information.
2. On submit event, the sensitive data is sent directly to Jupiter's secure vault.
3. A json token is returned to you in order to be saved for future references.
Sale operation
How does it work?
1. The application's backend (server-side) sends an API request to the authorization endpoint
(referencing the payment token, amount, etc). The authorization id is returned.
2. If authorization status is successfull, we can now send the request to the Capture endpoint to
complete the operation.
3. The operation is persisted in the application database.
A sale operations requires two steps. First Authorization confirms that the Buyer has
provided valid payment information and reserves sufficient funding to perform the transaction. And
then Capture is initiated by the Merchant and is based on a successful Authorization
transaction.
How does it work?
1. The application's backend (server-side) sends an API request to the authorization endpoint
(referencing the payment token, amount, etc). The authorization id is returned.
2. If authorization status is successfull, we can now send the request to the Capture endpoint to
complete the operation.
3. The operation is persisted in the application database.
Other related operations
Refund
Refund transaction returns funds from the Merchant to the Buyer upon the Buyer’s request.
Void
This will cancel the Refund operation.
Timeline
This will retrieve the group of related transactions along with the balance
Now that you've seen the basic operations in action, let's use Postman to explore the rest of the workflows and endpoints.
Transactions Processing
Traditional payment methodsAlternative payment methods
Multi Currency
API/SDK integration
Echo transactions
Tokenization
Tokenization
Internal tokenization engineExternal token support
PCI DSS LEVEL 1 compliance
Unique tokens per trx/card
Recurring Billing
Recurring Billing engineDecline recycle management
Subscription plans console
Billing activities monitoring
Reports
Real-time DashboardsPermission based views
Entity driven reporting
Card Association Reports
Knowledge Base
Ticket