Full Example
Complete all prerequisites in the Getting Started before implementing this code example that creates the checkout form using Chargent Custom Checkout.
force-app/main/default/lwc/customCheckoutExample/customCheckoutExample.html
<template>
<lightning-card>
<template if:true={showSpinner}>
<lightning-spinner alternative-text="Loading..." variant="brand"></lightning-spinner>
</template>
<!-- scaComponent implementation -->
<template if:true={loadSCAIframe}>
<chargentbase-sca-component
order-id={orderId}
onresponse={handleSCAResponse}>
</chargentbase-sca-component>
</template>
<!-- Checkout form implementation -->
<div class="slds-grid slds-gutters">
<div class="slds-col">
<p class="slds-text-heading_small slds-text-align_center">Select your Payment Method</p>
</div>
</div>
<div class="slds-grid slds-gutters slds-m-left_small slds-m-right_small">
<div class="slds-col slds-size_1-of-2">
<select class="slds-select slds-m-top_large" name ="optionSelect" onchange={handlePaymentMethodSelectorChange}>
<option value="Credit Card">Credit Card</option>
<option value="Bank Account">Bank Account</option>
</select>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input label="Order" value={orderId} onchange={handleOrderIdChange}></lightning-input>
</div>
</div>
<hr/>
<div class="slds-grid slds-gutters">
<div class="slds-m-around_large">
<p class="slds-text-heading_small slds-text-align_left slds-m-bottom_medium">Enter your Billing Info</p>
<div class="slds-grid slds-gutters">
<div class="slds-col">
<label>Street Addres 1</label>
<div lwc:dom="manual" data-id="billingAddressLine"></div>
</div>
<div class="slds-col">
<label>Street Addres 2</label>
<div lwc:dom="manual" data-id="billingAddressLine2"></div>
</div>
</div>
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-2">
<label>City</label>
<div lwc:dom="manual" data-id="billingCity"></div>
</div>
<div class="slds-col slds-size_1-of-2">
<label>State</label>
<div lwc:dom="manual" data-id="billingState"></div>
</div>
</div>
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-2">
<label>Country</label>
<div lwc:dom="manual" data-id="billingCountry"></div>
</div>
<div class="slds-col slds-size_1-of-2">
<label>Email</label>
<div lwc:dom="manual" data-id="billingEmail"></div>
</div>
</div>
<div class="slds-grid slds-gutters">
<div class="slds-col">
<label>Zip</label>
<div lwc:dom="manual" data-id="billingZip"></div>
</div>
<div class="slds-col">
<label>Phone</label>
<div lwc:dom="manual" data-id="billingPhone"></div>
</div>
</div>
<hr/>
<div data-id="card-form">
<p class="slds-text-heading_small slds-text-align_left slds-m-bottom_medium slds-m-top_medium">Enter your Card Info</p>
<div class="slds-grid">
<div class="slds-col">
<div lwc:dom="manual" data-id="cardTypeImg"></div>
<label>Card Name</label>
<div lwc:dom="manual" data-id="nameOnCard"></div>
</div>
</div>
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-2 slds-m-left_small">
<label>Credit / Debit Card Number</label>
<div lwc:dom="manual" data-id="cardNumber"></div>
</div>
<div class="slds-col slds-m-right_small">
<div class="slds-grid slds-gutters">
<div class="slds-col">
<label>Expiration</label>
<div lwc:dom="manual" data-id="cardExp"></div>
</div>
<div class="slds-col">
<label>CVC</label>
<div lwc:dom="manual" data-id="cardCVC"></div>
</div>
</div>
</div>
</div>
</div>
<div data-id="bank-form">
<p class="slds-text-heading_small slds-text-align_left slds-m-bottom_medium slds-m-top_medium">Enter your Bank Account Info</p>
<div class="slds-grid">
<div class="slds-col">
<label>Name on Account</label>
<div lwc:dom="manual" data-id="nameOnAccount"></div>
</div>
</div>
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-2 slds-m-left_small">
<label>Account Number</label>
<div lwc:dom="manual" data-id="accountNumber"></div>
</div>
<div class="slds-col slds-size_1-of-2 slds-m-right_small">
<label>Routing Number</label>
<div lwc:dom="manual" data-id="routingNumber"></div>
</div>
</div>
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-2 slds-m-left_small">
<label>Bank Name</label>
<div lwc:dom="manual" data-id="bankName"></div>
</div>
<div class="slds-col slds-size_1-of-2 slds-m-right_small">
<label>Bank Type</label>
<div lwc:dom="manual" data-id="bankAccountType"></div>
</div>
</div>
</div>
<hr/>
<div slot="footer">
<div class="slds-grid">
<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-5">
<div lwc:dom="manual" data-id="amount" class="amount-container"></div>
</div>
<!-- Chargent operations buttons -->
<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-5">
<button onclick={handleCustomCheckoutOperation} data-button-type="ChargeButton" class="slds-button slds-button_brand slds-float_right" disabled={isChargeButtonDisabled}>Accept and Charge</button>
</div>
<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-5">
<button onclick={handleCustomCheckoutOperation} data-button-type="SavePMButton" class="slds-button slds-button_brand slds-float_right" disabled={isChargeButtonDisabled}>Save Payment Method</button>
</div>
<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-5">
<button onclick={handleCustomCheckoutOperation} data-button-type="AuthorizationButton" class="slds-button slds-button_brand slds-float_right" disabled={isChargeButtonDisabled}>Authorize</button>
</div>
<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-5">
<button onclick={handleCustomCheckoutOperation} data-button-type="RegisterTokenButton" class="slds-button slds-button_brand slds-float_right" disabled={isChargeButtonDisabled}>Register Token</button>
</div>
</div>
</div>
</div>
</div>
</lightning-card>
</template>
Note: The order input field in the upper right corner, is for testing purposes only, and in real scenarios the Chargent Order Id must be already provided to the scaComponent when implementing it.
force-app/main/default/lwc/customCheckoutExample/customCheckoutExample.js
import appFrontier_AssetsResource from "@salesforce/resourceUrl/ChargentBase__AppFrontier_Assets";
import customCheckOut from "@salesforce/resourceUrl/ChargentBase__ChargentCustomCheckout";
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { LightningElement } from 'lwc';
export default class CustomCheckoutExample extends LightningElement {
orderId;
showSpinner = false;
loadSCAIframe = false;
isChargeButtonDisabled = false;
selectedPaymentMethod = "Credit Card";
connectedCallback() {
Promise.all([
loadStyle(this, customCheckOut + '/v1/css/chargentPayform.css'),
loadScript(this, customCheckOut + '/v1/js/chargentCustomCheckout.js'),
]).then(() => {
chargentFields.createPayform({
/* Configuration Object */
assets: appFrontier_AssetsResource,
cardTypes : ["visa","mastercard"],
paymentMethods : ["Credit Card", "Bank Account"],
cardformFields: {
nameOnCard: {
selector: this.template.querySelector('[data-id="nameOnCard"]'),
placeholder: 'Name as it appears on your card',
value: 'Juan Alcantara',
size: 25,
class: "slds-input",
required: true,
allowPaste: false,
},
cardNumber: {
selector: this.template.querySelector('[data-id="cardNumber"]'),
placeholder: '4111 1111 1111 1111',
class: "slds-input",
required: true,
img: { selector: this.template.querySelector('[data-id="cardTypeImg"]'), default: appFrontier_AssetsResource +"/svg/no_image.png", class:"slds-img"},
style: {success : "slds-success", error: "slds-has-error"}
},
cardExp: {
selector: this.template.querySelector('[data-id="cardExp"]'),
placeholder: 'MM / YY',
class: "slds-input",
required: true,
allowPaste: false,
style: {success : "slds-success", error: "slds-has-error"}
},
cardCVC: {
selector: this.template.querySelector('[data-id="cardCVC"]'),
placeholder: '123',
class: "slds-input",
required: true,
allowPaste: false
},
nameOnAccount: {
selector: this.template.querySelector('[data-id="nameOnAccount"]'),
placeholder: 'Name on Account',
size: 25,
class: "slds-input",
required: true,
allowPaste: false,
},
},
bankFields: {
nameOnAccount: {
selector: this.template.querySelector('[data-id="nameOnAccount"]'),
placeholder: 'Name on Account',
class: "slds-input",
required: true,
style: {success : "slds-success", error: "slds-has-error"}
},
accountNumber: {
selector: this.template.querySelector('[data-id="accountNumber"]'),
placeholder: 'Account Number',
class: "slds-input",
required: true,
style: {success : "slds-success", error: "slds-has-error"}
},
routingNumber: {
selector: this.template.querySelector('[data-id="routingNumber"]'),
placeholder: 'Routing Number',
class: "slds-input",
required: true,
style: {success : "slds-success", error: "slds-has-error"}
},
bankName: {
selector: this.template.querySelector('[data-id="bankName"]'),
placeholder: 'Bank Name',
class: "slds-input",
required: true,
},
bankAccountType: {
selector: this.template.querySelector('[data-id="bankAccountType"]'),
placeholder: 'Bank Type',
class: "slds-input",
required: true,
allowPaste: false
},
currencyField: {
selector: this.template.querySelector('[data-id="amount"]'),
decimal: 2,
placeholder: '$0.00',
class: "slds-input",
currency: "USD",
required: true,
allowPaste: false
}
},
billingFields: {
addressLine: {
selector: this.template.querySelector('[data-id="billingAddressLine"]'),
placeholder: 'Enter Your Address',
size: 50,
value: 'Main Street',
class: "slds-input",
requiredMessage: "Use your home address here.",
required: true
},
addressLine2: {
selector: this.template.querySelector('[data-id="billingAddressLine2"]'),
placeholder: 'Enter Your Address 2',
size: 50,
value: 'Second Street',
class: "slds-input",
},
city: {
selector: this.template.querySelector('[data-id="billingCity"]'),
placeholder: 'Enter Your City',
size: 20,
value: 'Miami',
class: "slds-input",
required: true
},
state: {
selector: this.template.querySelector('[data-id="billingState"]'),
class: "slds-input",
required: true
},
zip: {
selector: this.template.querySelector('[data-id="billingZip"]'),
placeholder: 'Enter Your Zip Code',
size: 5,
class: "slds-input",
value: '12345',
required: true
},
country: {
selector: this.template.querySelector('[data-id="billingCountry"]'),
placeholder: 'Enter Your Country',
size: 5,
value: '',
class: "slds-input",
required: true
},
email: {
selector: this.template.querySelector('[data-id="billingEmail"]'),
placeholder: 'Enter Your Email',
size: 5,
value: '[email protected]',
class: "slds-input",
required: true
},
phone: {
selector: this.template.querySelector('[data-id="billingPhone"]'),
placeholder: 'Enter Your Phone Number',
size: 5,
value: '9955559965',
class: "slds-input",
pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}",
required: true
},
},
currencyField: {
selector: this.template.querySelector('[data-id="amount"]'),
decimal: 2,
value: 33,
placeholder: '$0.00',
class: "slds-input",
currency: "USD",
required: true
}
/* End of Configuration Object */
});
this.hideSection("Bank Account");
});
}
handleCustomCheckoutOperation(event){
if (!this.orderId) {
this.showSpinner = false;
let title = "Error";
let message = "Provide an Order Id";
let variant = "error";
this.showToast(title, message, variant);
} else {
this.showSpinner = true;
const operation = this.getOperationType(event);
let payload = chargentFields.buildPayForm(this.orderId, this.selectedPaymentMethod);
if (payload.status === 200) {
payload.formValues.companyName = 'Appfrontier';
payload.formValues.orderSorce = 'ecommerce';
payload.formValues.chargentOrderId = this.orderId;
setTimeout(() => {
this.template.querySelector("chargentbase-sca-component").handleCustomCheckoutOperation(payload, operation);
}, 2000);
} else {
this.showSpinner = false;
if(payload.missingcardformFields.length + payload.missingBillingFields.length > 0){
this.showToast('Error', 'Required fields are missing', 'error');
}
if(payload.invalidFields.length > 0){
this.showToast('Error', 'Please correct invalid data in fields', 'error');
}
}
}
}
getOperationType(event){
let operation
switch (event.target.dataset.buttonType) {
case 'ChargeButton':
operation = 'Charge';
break;
case 'SavePMButton':
operation = 'CreatePM';
break;
case 'AuthorizationButton':
operation = 'Authorize'
break;
case 'RegisterTokenButton':
operation = 'RegisterToken'
break;
default:
break;
}
return operation;
}
handleSCAResponse(event){
this.showSpinner = false;
this.loadSCAIframe = false;
let eventResponse = JSON.parse(event.detail)
this.isChargeButtonDisabled = (eventResponse.status === 403) ? true : false;
let title = (eventResponse.status === 200) ? "Success" : "Error";
let message = eventResponse.message;
let variant = (eventResponse.status === 200) ? "success": "error";
this.showToast(title, message, variant);
}
hideSection (sectionName) {
switch (sectionName) {
case "Bank Account":
this.template.querySelector('[data-id="bank-form"]').style="display:none";
this.template.querySelector('[data-id="card-form"]').style="display:block";
break;
case "Credit Card":
this.template.querySelector('[data-id="bank-form"]').style="display:block";
this.template.querySelector('[data-id="card-form"]').style="display:none";
break;
}
}
showToast(title,message,variant) {
this.showSpinner = false;
const event = new ShowToastEvent({
title: title,
message: message,
variant: variant,
mode: 'sticky'
});
this.dispatchEvent(event);
}
handleOrderIdChange(event) {
if (event.target.value !== "") {
this.orderId = event.target.value;
this.loadSCAIframe = true;
}
}
handlePaymentMethodSelectorChange(event) {
this.selectedPaymentMethod = event.target.value;
this.hideSection(this.selectedPaymentMethod === "Credit Card" ? "Bank Account" : "Credit Card");
}
}