Configure your payment options:
Any pay service (Google Pay™, Apple Pay™, etc...) will appear under the Credit Card section of the iframe when activated
triple.generatePaymentForm({
amount: 10.00,
paymentOptions: ['credit_card', 'bank', 'crypto']
newWindow: true,
// Handle error response here
onError: (errorData) => {
console.log('Payment was rejected');
console.log(errorData);
},
// Handle success response here
onSuccess: (data) => {
console.log('Payment was successful');
console.log(data);
},
});
Button to trigger the payment process:
<button id="btn">Pay now</button>
const button = document.querySelector('#btn');
button.addEventListener('click', () => {
// This will open payment form in a new window
triple.processPayment();
});
Clear irrelevant data:
triple.clear();
Generate form again with new parameters:
triple.generatePaymentForm(...)
Creating Payment Tokens
Create a token during a charge event
triple.generatePaymentForm({
// Container for our payment form
containerSelector: '#example',
// Amount
amount: 100,
// will process payment and save user token
tokenMode: 'charge',
//Handle error response
onError: (errorData) => {
console.log('This is error');
console.log(errorData);
},
// Handle success response
onSuccess: (data) => {
console.log('This is success');
console.log(data);
},
});
Simply create a token
triple.generatePaymentForm({
// Container for our payment form
containerSelector: '#example',
// will just save user token without payment
// 'amount' is not required for this action
tokenMode: 'save',
//Handle error response
onError: (errorData) => {
console.log('This is error');
console.log(errorData);
},
// Handle success response
onSuccess: (data) => {
console.log('This is success');
console.log(data);
},
});
Create a token but delay a charge, so you can send the token in later to finalize payment
triple.generatePaymentForm({
// Container for our payment form
containerSelector: '#example',
amount: 1.00,
//turn off email field requirement, or supply an email instead example: 'test@test.com'
email: false,
// will just save user token without payment
// 'amount' is required for this action
tokenMode: 'save',
//Handle error response
onError: (errorData) => {
console.log('This is error');
console.log(errorData);
},
// Handle success response
onSuccess: (data) => {
console.log('This is success');
console.log(data);
},
});
Disable Tokenization
triple.generatePaymentForm({
// Container for our payment form
containerSelector: '#example',
amount: 1,
// Disable token feature(no saving/no payments with token)
tokenMode: false,
//Handle error response
onError: (errorData) => {
console.log('This is error');
console.log(errorData);
},
// Handle success response
onSuccess: (data) => {
console.log('This is success');
console.log(data);
},
});