Usage
Recharge has added a new function to our SDK initFrictionlessPaymentV1 which works similar to other SDK functions, it requires a session and an optional Recharge payment method ID (if updating an existing payment method)
const paymentFormController = await;
recharge.paymentMethod.initFrictionlessPaymentV1(session, existingPaymentMethodId);
initFrictionlessPaymentV1 returns a controller object which can be used to initialize frictionless payments with your existing form. mount can be used to initialize your form with frictionless payments. Note: that mount will have frictionless payments take control of your number and cvv fields.
paymentFormController.mount({
numberElementId: 'card-number',
cvvElementId: 'cvv',
numberPlaceholder: '1234 5678 9012 3456',
cvvPlaceholder: '123',
numberFormat: 'maskedFormat',
});
Once you call mount and your form is initialized it can be filled out by the user and the submit function can be called to submit your form data to Recharge. This will tokenize your card details and submit all the data to Recharge.
const result = await paymentFormController.submit({
card_details: {
full_name,
month,
year,
},
billing_address: {
address1,
address2,
city,
province,
zip,
country_code,
},
default_payment_method,
address_ids,
apply_to_all_subscription_addresses,
});
When you are done you should call unmount to free up all the event listeners on the page.
paymentFormController.unmount();
Example form implementation
<!DOCTYPE html>
<html>
<head>
<script src="https://static.rechargecdn.com/assets/storefront/recharge-client-1.80.0.min.js"></script>
</head>
<body>
<div>
<form id="payment-method-form" onsubmit="event.preventDefault()">
<fieldset>
<label for="name">Name</label>
<input type="text" id="name" />
</fieldset>
<fieldset>
<label for="card-number">Card Number</label>
<div id="card-number"></div>
</fieldset>
<fieldset>
<label for="expiration-date">Expiration Date</label>
<input type="text" id="expiration-date" />
</fieldset>
<fieldset>
<label for="cvv">CVV</label>
<div id="cvv"></div>
</fieldset>
<fieldset>
<fieldset>
<label for="address1">Address 1</label>
<input type="text" id="address1" />
</fieldset>
<fieldset>
<label for="address2">Address 2</label>
<input type="text" id="address2" />
</fieldset>
<fieldset>
<label for="city">City</label>
<input type="text" id="city" />
</fieldset>
<fieldset>
<label for="state">State</label>
<input type="text" id="state" />
</fieldset>
<fieldset>
<label for="zip">Zip</label>
<input type="text" id="zip" />
</fieldset>
<fieldset>
<label for="country-code">Country Code</label>
<input type="text" id="country-code" />
</fieldset>
<fieldset>
<label for="phone">Phone</label>
<input type="text" id="phone" />
</fieldset>
</fieldset>
<fieldset>
<label for="default-payment-method">Set as default payment method</label>
<input type="checkbox" id="default-payment-method" />
</fieldset>
<fieldset>
<label for="address-ids">Address IDs(comma separated)</label>
<input type="text" id="address-ids" placeholder="1,2,3" />
</fieldset>
<fieldset>
<label for="apply-to-all-subscription-addresses">Apply to all subscription addresses</label>
<input type="checkbox" id="apply-to-all-subscription-addresses" />
</fieldset>
<button type="submit" id="submit">Submit</button>
</form>
<button type="button" id="unmount">Unmount</button>
<button type="button" id="recreate">Recreate</button>
</div>
<script>
recharge.init({
storeIdentifier: '<YOUR_STORE_IDENTIFIER>',
storefrontAccessToken: '<YOUR_STOREFRONT_ACCESS_TOKEN>',
appName: 'payment-method-form',
appVersion: '1.0.0',
});
// this would normally be fetched via an auth function in the SDK
const session = {
apiToken: '<YOUR_API_TOKEN>',
customerId: '<YOUR_CUSTOMER_ID>',
};
async function paymentTest() {
const existingPaymentMethodId = undefined; // if updating an existing payment method, set the recharge payment method id here
const paymentFormController = await recharge.paymentMethod.initFrictionlessPaymentV1(
session,
existingPaymentMethodId
);
paymentFormController.mount(
{
numberElementId: 'card-number',
cvvElementId: 'cvv',
},
{
onReady: () => {
console.log('ready');
},
onFieldEvent: (name, eventType, activeElement, inputProperties) => {
console.log('fieldEvent', name, eventType, activeElement, inputProperties);
},
onPaymentMethod: (token, paymentMethod) => {
console.log('paymentMethod', token, paymentMethod);
},
onErrors: errors => {
console.log('errors', errors);
},
}
);
async function submitHandler() {
const name = document.getElementById('name').value;
const cardNumber = document.getElementById('card-number').value;
const expirationDate = document.getElementById('expiration-date').value;
const cvv = document.getElementById('cvv').value;
const address1 = document.getElementById('address1').value;
const address2 = document.getElementById('address2').value;
const city = document.getElementById('city').value;
const state = document.getElementById('state').value;
const zip = document.getElementById('zip').value;
const countryCode = document.getElementById('country-code').value;
const phone = document.getElementById('phone').value;
const defaultPaymentMethod = document.getElementById('default-payment-method').checked;
const addressIds = document.getElementById('address-ids').value;
const applyToAllSubscriptionAddresses = document.getElementById(
'apply-to-all-subscription-addresses'
).checked;
const result = await paymentFormController.submit({
card_details: {
full_name: name,
month: expirationDate.split('/')[0],
year: expirationDate.split('/')[1],
},
billing_address: {
address1,
address2,
city,
province: state,
zip,
country_code: countryCode,
},
default_payment_method: defaultPaymentMethod,
address_ids: addressIds ? addressIds.split(',').map(Number) : undefined,
apply_to_all_subscription_addresses: applyToAllSubscriptionAddresses,
});
console.log(result);
}
function unmountHandler() {
paymentFormController.unmount();
}
function recreateHandler() {
submitButton.removeEventListener('click', submitHandler);
unmountButton.removeEventListener('click', unmountHandler);
recreateButton.removeEventListener('click', recreateHandler);
paymentTest();
}
const submitButton = document.getElementById('submit');
submitButton.addEventListener('click', submitHandler);
const unmountButton = document.getElementById('unmount');
unmountButton.addEventListener('click', unmountHandler);
const recreateButton = document.getElementById('recreate');
recreateButton.addEventListener('click', recreateHandler);
}
paymentTest();
</script>
</body>
</html>