Capturing payment sources
After registering and signing in Limepay customers, Merchants can integrate the Limepay payment source UI to capture payment sources and process card payments.
Registering and signing in a Limepay customer
IMPORTANT
These instructions are for consumer (B2C) merchants only. Business to business (B2B) merchants should follow the B2B customer onboarding documentation.
Steps
-
Register a new Limepay customer by calling
Consumer Customer [Upsert]
to retrieve a
customerId. -
Sign in a customer by calling
Customer With Customer Id [Signin]
with a
customerIdto retrieve acustomToken.
Integrating the Limepay payment source UI
Initialise the Limepay payment source UI with a signed in customer customToken and register a submitCallbackFunction to retrieve a cardPaymentSourceId.
Load the Limepay checkout script
<script src="https://checkout-v3.limepay.com.au/v3/checkout-v3.0.0.min.js"></script>Initialise and render the Limepay payment source UI
const paymentSourceUI = window.LimepayCheckout.createPaymentSource();
paymentSourceUI.init({
publicKey: 'live_pk_xxxxxxxxxxxxxxxxxxxxx', // required, merchant public key
customerToken: customToken, // signed in customer token
submitCallbackFunction: (paymentSource) => {
if(paymentSource.cardPaymentSource) {
// retrieve cardPaymentSourceId
const cardPaymentSourceId = paymentSource.cardPaymentSource.cardPaymentSourceId;
}
},
errorCallbackFunction: (error) => {
// handle errors
}
});
paymentSourceUI.render({
elementId: 'payment-source-container', // required, parent HTML element ID
showSubmit: true, // hide the Submit button
hideSavedCards: false, // hide previously saved cards
primaryColor: '#b29572' // theme primary color (HEX)
});WARNING
If a valid customerToken is not provided the payment source UI will create a temporary cardPaymentSourceId which will expire in 10 minutes.
Optional: submit a payment source programmatically
paymentSourceUI.render({
...options,
showSubmit: false // hide the Submit button
});
paymentSourceUI.submit((paymentSource) => {
if(paymentSource.cardPaymentSource) {
// retrieve cardPaymentSourceId
const cardPaymentSourceId = paymentSource.cardPaymentSource.cardPaymentSourceId;
}
});The paymentSource object
type CardPaymentSource = {
cardPaymentSourceId: string;
last4: string;
cardBin: string;
brand: '' | 'American Express' | 'MasterCard' | 'Visa';
funding: 'credit' | 'debit' | 'chargecard' | 'prepaid' | 'deferreddebit' | 'unknown';
expMonth: number;
expYear: number;
country: string;
}
type PaymentSource = {
cardPaymentSource?: CardPaymentSource;
}info
Merchants can also retrieve a signed in customer paymentSource from the Limepay checkout paymentData object, as described here.
Processing payments using a card payment source
Steps
-
Create a new order by calling
Order [Create]
to retrieve a
merchantOrderId. -
Request a card payment by calling
Saved Pay Card [Create]
with a
cardPaymentSourceIdto retrieve apaymentTokenId. -
Pay for an order by calling
Order [Pay]
with a
merchantOrderIdandpaymentTokenId.