Common Problem
1. Apple Pay
1.1 After clicking the payment button and calling the applePay.emit('canMakePayment') method, what may be the reason why the ApplePay pop-up window automatically disappears after it appears?
It may be that the current payment environment is not secure or cannot pass Apple verification. You need to test on an https domain name configured with an ApplePay certificate.
1.2 How to customize the margin size of the ApplePay button's parent container?
You can add inline styles on the DOM where ApplePay is mounted, changing the --padding-frame variable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PayerMax Dropin</title>
<script src="https://cdn.payermax,com/dropin/js/pmdropin.min.js"></script>
</head>
<body>
<div id="applepay" style="--padding-frame: 0;"></div>
</body>
</html>2. Card
2.1 When calling the orderAndPay interface, do I need to handle the status=PENDING situation?
Yes. For card payments, 3ds scenarios may occur. In this case, status=PENDING requires the merchant to open the redirectUrl in the response to redirect to the challenge page.
2.2 How to adjust the font style of the card input box?
Special styles can be added in customTheme's style.
PMdropin.create('card', {
clientKey: '',
sessionKey: '',
customTheme: [
{
// Theme Name [Required]
name: 'red',
// The style used to fill the background color [optional]
base: 'light',
style: `:root {
/* --- common --- */
--bg-primary: #ffffff;
--color-primary: #3782ff;
--border-color-primary: #eaeaea;
--border-color-hover-primary: #dcdcdc;
--font-size-primary: 13px;
--border-radius-primary: 6px;
/* --- ... --- */
/* --- others --- */
--divider-color: #f4f4f4;
}
/* --- special --- */
input {
font-family: Times New Roman !important;
}`
}
]
});2.3 When using the default browser fill function, the font and background color style of the input box will automatically change. Can it be adjusted?
You can add css in the style of customTheme.
PMdropin.create('card', {
clientKey: '',
sessionKey: '',
customTheme: [
{
// Theme Name [Required]
name: 'red',
// The style used to fill the background color [optional]
base: 'light',
style: `:root {
/* --- common --- */
--bg-primary: #ffffff;
--color-primary: #3782ff;
--border-color-primary: #eaeaea;
--border-color-hover-primary: #dcdcdc;
--font-size-primary: 13px;
--border-radius-primary: 6px;
/* --- ... --- */
/* --- others --- */
--divider-color: #f4f4f4;
}
/* --- special --- */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--bg-color-input) inset !important;
-webkit-text-fill-color: var(--color-input) !important;
}`
}
]
});2.4 How to monitor the dynamic height of the internal iframe to dynamically change the position of the button?
Listen to the size-change event and get the width and height of the iframe in the callback.
card.on('size-change', (res) => console.log('[merchant][size-change]:', res))
// Expected output: { width: xxx, height: xxx }2.5 When layout is from right to left, why are the card number and expiration date input boxes still laid out from left to right? Can this be adjusted?
By default, the browser will set the input box of type=tel to layout from left to right. This is the default behavior of the browser. You can add special styles in the style of customTheme.
PMdropin.create('card', {
clientKey: '',
sessionKey: '',
customTheme: [
{
// Theme Name [Required]
name: 'red',
// The style used to fill the background color [optional]
base: 'light',
style: `:root {
/* --- common --- */
--bg-primary: #ffffff;
--color-primary: #3782ff;
--border-color-primary: #eaeaea;
--border-color-hover-primary: #dcdcdc;
--font-size-primary: 13px;
--border-radius-primary: 6px;
/* --- ... --- */
/* --- others --- */
--divider-color: #f4f4f4;
}
/* --- special --- */
[dir="rtl"] input[type="tel"]{
direction: rtl !important;
}`
}
]
});