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 configure an ApplePay certificate?
(1) Merchants provide their test environment and production environment domain names to PayerMax;
(2) PayerMax will generate certificates corresponding to each domain name for merchants;
(3) The merchant adds the certificate file apple-developer-merchantid-domain-association.txt to the ./well-known path;
Note:
Please note the certificate configuration path.
(4) After the merchant configures the certificate, it notifies PayerMax to verify the domain name certificate, and PayerMax will perform domain name certificate verification in the Apple developer backend.
1. The certificate path may be configured incorrectly 【please check again whether the path is correct】
2. Maybe the domain name firewall blocks the Apple check service【Please configure the domain name of the link page to the server whitelist, please refer to the screenshot below】
3. You may have configured certificates for other MerchantIDs 【You can use a new domain name, or delete the corresponding domain name certificate on the original developer account】
If verification fails:
- The certificate path may be configured incorrectly [please check again whether the path is correct]
- Maybe the domain name firewall blocks the Apple check service[Please configure the domain name of the link page to the server whitelist, please refer to the screenshot below]
- You may have configured certificates for other MerchantIDs [You can use a new domain name, or delete the corresponding domain name certificate on the original developer account]
1.3 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;
}`
}
]
});