Embedded Payment
Load JS library script
Overview
{ProviderUrl}/payment/embedded/credit-card.js Initializing the form
this.embeddedPaymentForm.init(embeddedFormConfig);Config params:
| Property | Type | Description |
|---|---|---|
| publishableApiKey | Merchant public key | |
| cardViewId | string | Element which the provider form will be appended to |
| supportedNetworks | string | Networks to be displayed Example: "visa,mada,amex" |
| style | Object | Styling object for the form Sample Code |
Style Sample Code
{
hideCardIcons: true,
direction: "ltr",
cardHeight: 225,
input: {
color: "rgb(66, 67, 71)",
fontSize: "13px",
fontFamily: "inherit",
inputHeight: "32px",
inputMargin: "10px",
borderColor: "c7c7c7",
borderWidth: "1px",
borderRadius: "0px",
boxShadow: "",
placeHolder: {
holderName: " ",
cardNumber: " ",
expiryDate: "شهر / سنة",
securityCode: " ",
}
},
label: {
display: true,
color: formStyle && formStyle.fontColor ? formStyle.fontColor : "rgb(66, 67, 71)",
fontSize: formStyle && formStyle.fontSize ? formStyle.fontSize : "14px",
fontFamily: formStyle && formStyle.fontFamily ? formStyle.fontFamily : "inherit",
fontWeight: formStyle && formStyle.fontWeight ? formStyle.fontWeight : "500",
text: {
holderName: "الاسم على البطاقة:",
cardNumber: "رقم البطاقة:",
expiryDate: "تاريخ انتهاء البطاقة:",
securityCode: "الرمز الأمني (CVV):",
},
},
error: {
borderColor: "red",
borderRadius: "8px",
boxShadow: "0px",
},
}