Payment Widget
Introduction
Le script Payment Widget (Widget de paiement) - c'est un script low code qui permet de placer les boutons Apple Pay et Google Pay sur la page de la boutique du vendeur - sur les pages de produits et/ou dans le panier de l'acheteur. Cela permet ainsi au client de passer commande en un clic sur les appareils pris en charge sans quitter votre domaine.
Problème que nous proposons de résoudre
Les longs processus de commande en plusieurs étapes et les formulaires de saisie de données de carte à faible conversion affectent négativement les revenus. La réduction des étapes et le maintien des acheteurs sur la page augmentent le taux de finalisation et la confiance.
À propos de notre solution
Intégrez le widget de paiement là où l'intention d'achat est la plus élevée (par exemple, sur la page produit) pour contourner le panier et finaliser le paiement avec un portefeuille intégré sécurisé. Aucune redirection externe. La configuration typique prend moins d'une journée.
Avantages principaux
- Paiement sur page : les acheteurs effectuent le paiement sans quitter votre site
- Portefeuilles intégrés : Apple Pay et Google Pay "prêts à l'emploi"
- Prêt pour SCA/PSD2 : 3DS2 est traité automatiquement pour les transactions par carte lorsque requis par votre acquéreur
- Intégration Low-code : script drop-in (script rapidement connecté), configuration minimale
- Portée PCI réduite : les données de cartes n'atteignent jamais vos serveurs
- Paramètres et éléments d'interface utilisateur flexibles : placement, montant, devise, notifications de rappel, styles et autres
- Validation de domaine Apple simple : téléchargement pas à pas d'un seul fichier
- Processus d'intégration rapide : moins d'1 jour
Connexion du script
Ajout du fichier
Sur la page du vendeur à l'intérieur de la balise <head> il faut ajouter le lien vers le fichier pay-buttons.js.
Le script pay-buttons.js doit se trouver dans le dossier pay-buttons, au même niveau que le dossier merchants (avec les pages de paiement).
La déclaration du script doit obligatoirement avoir spécifié id="pay-buttons".
<head>
...
<script
src="https://dev.bpcbt.com/payment/pay-buttons/pay-buttons.js"
id="pay-buttons">
</script>
...
</head>Initialisation
<script>
document.addEventListener("DOMContentLoaded", function () {
var widget = payButtonsWidget("containerId"); // où `containerId` — id de l'élément DOM où seront ajoutés les boutons
widget.init({
gatewayInfo: { // Informations pour la passerelle
token: "i29v9o5hkmuv2590l7661p9vcu", // Token du vendeur dans MP2
amount: 852300, // Montant de la commande en centimes (ou en unités mineures)
returnUrl: "http\:\/\/yourwebsite.com\/success.html", // Adresse cible après paiement
merchantLogin: "buttonApple",
},
applePay: { // Informations pour la session ApplePay
merchantId: "yourwebsite.com", // identifiant du marchand chez Apple
},
googlePay: {
environment: "TEST",
},
});
});
</script>Paramètres d'initialisation
Ci-dessous la liste complète des paramètres pour l'initialisation du script.
| Obligatoire | Paramètre | Type | Description |
|---|---|---|---|
| Facultatif | cartItems |
Array of objects | Tableau d'objets pour décrire les produits dans le panier. Voir la description des éléments imbriqués ci-dessous. |
| Facultatif | appleButtonClass |
String | Nom de classe qui sera attribué au bouton applePay pour pouvoir le styliser séparément ou s'y référer. Valeur par défaut : pay-button_applepay. |
| Obligatoire | applePay |
Object | Objet contenant les informations sur la session Apple. Voir la description des éléments imbriqués ci-dessous. |
| Facultatif | debug |
Boolean | Si true - active le mode débogage, dans ce cas toutes les informations de service seront affichées sous le bouton. Par défaut false. |
| Obligatoire | gatewayInfo |
Object | Objet contenant les informations pour la commande dans la Passerelle de paiement. Voir la description des éléments imbriqués ci-dessous. |
| Obligatoire | googlePay |
Object | Objet contenant les informations sur la session Google Pay. Voir la description des éléments imbriqués ci-dessous. |
| Obligation | Nom | Type | Description |
|---|---|---|---|
| Obligatoire | name |
String [1..255] | Désignation ou description de la position tarifaire sous forme libre. |
| Facultatif | itemDetails |
Object | Objet avec les paramètres de description de la position de marchandise. La description des éléments imbriqués est donnée ci-dessous. |
| Obligatoire | quantity |
Object | Élément décrivant la quantité totale des positions de marchandises d'un même positionId et ses unités de mesure. La description des éléments imbriqués est donnée ci-dessous. |
| Facultatif | itemAmount |
Integer [1..12] | Montant du coût de toutes les positions de marchandises d'un positionId dans les unités minimales de la devise. itemAmount est obligatoire à transmettre, seulement si le paramètre itemPrice n'a pas été transmis. Dans le cas contraire, la transmission d'itemAmount n'est pas requise. Si dans la requête les deux paramètres sont transmis : itemPrice et itemAmount, alors itemAmount doit être égal à itemPrice * quantity, dans le cas contraire la requête se terminera avec une erreur. |
| Facultatif | itemPrice |
Integer [1..18] | Montant du coût de la position de marchandise d'un positionId en argent dans les unités minimales de devise. |
| Facultatif | itemCurrency |
Integer [3] | Code de devise ISO 4217. Si non spécifié, considéré comme égal à la devise de la commande. |
| Obligatoire | itemCode |
String [1..100] | Numéro (identifiant) de la position de marchandise dans le système du magasin. |
Exemple du bloc cartItems:
[
{
name: 'Pen',
quantity: {
value: 1,
measure: "pcs"
},
itemAmount: (totalAmount * 100) / 2,
itemCurrency: "643",
itemCode: 'no_1'
},
{
name: 'Cheese',
quantity: {
value: 1.4,
measure: "kg"
},
itemAmount: (totalAmount * 100) / 2,
itemCurrency: "643",
itemCode: 'no_2'
}
]Paramètres de l'objet gatewayInfo
| Obligation | Paramètre | Type | Description |
|---|---|---|---|
| Obligatoire | token |
String | Token du vendeur, qui peut être obtenu dans la console administrateur. Nécessaire pour l'identification du vendeur. |
| Facultatif | registerPreAuth |
Boolean | Enregistrement du paiement à deux étapes. Par défaut false. |
| Condition | orderNumber |
String [1..36] | Numéro de commande dans le système de la boutique. Facultatif, si le paramètre "Générer le numéro de commande" est activé. |
| Facultatif | amount |
Integer [0..12] | Montant du paiement dans les unités minimales de la devise (par exemple, en kopecks). |
| Facultatif | currency |
String [3] | Code de devise du paiement ISO 4217. Si non spécifié, alors la valeur par défaut est utilisée. Seuls les chiffres sont autorisés. |
| Obligatoire | returnUrl |
String [1..512] | Adresse vers laquelle l'utilisateur doit être redirigé en cas de paiement réussi. L'adresse doit être spécifiée complètement, y compris le protocole utilisé (par exemple, https://mybestmerchantreturnurl.com au lieu de mybestmerchantreturnurl.com). Sinon, l'utilisateur sera redirigé vers une adresse du type suivant : https://dev.bpcbt.com/payment/<merchant_address>. |
| Facultatif | failUrl |
String [1..512] | Adresse vers laquelle il faut rediriger l'utilisateur en cas de paiement échoué. L'adresse doit être spécifiée entièrement, y compris le protocole utilisé (par exemple, https://mybestmerchantreturnurl.com au lieu de mybestmerchantreturnurl.com). Sinon, l'utilisateur sera redirigé vers une adresse du type suivant : https://dev.bpcbt.com/payment/<merchant_address>. |
| Facultatif | description |
String [1..598] | Description de la commande dans n'importe quel format. Pour activer l'envoi de ce champ vers le système de traitement, contactez le support technique. Il est interdit de transmettre des données personnelles ou des données de paiement (numéros de cartes, etc.) dans ce champ. Cette exigence est liée au fait que la description de la commande n'est masquée nulle part. |
| Facultatif | clientId |
String [0..255] | Numéro du client (ID) dans le système du marchand — jusqu'à 255 caractères. Utilisé pour la mise en œuvre de la fonctionnalité de liaisons. Peut être retourné dans la réponse, si le marchand est autorisé à créer des liaisons. L'indication de ce paramètre lors du traitement des paiements par liaison est obligatoire. Dans le cas contraire, le paiement sera impossible. |
| Facultatif | sessionTimeoutSecs |
Integer [1..9] | Durée de vie de la commande en secondes. Si le paramètre n'est pas défini, la valeur spécifiée dans les paramètres du marchand sera utilisée, ou le temps par défaut (1200 secondes = 20 minutes). Si le paramètre expirationDate est présent dans la requête, alors la valeur du paramètre sessionTimeoutSecs n'est pas prise en compte. |
| Facultatif | jsonParams |
Object | Ensemble d'attributs supplémentaires de forme arbitraire, structure:jsonParams={"param_1_name":"param_1_value",...,"param_n_name":"param_n_value"}Peuvent être transmis au Centre de Traitement, pour traitement ultérieur (configuration supplémentaire requise - contactez le support). Certains attributs prédéfinis jsonParams:
|
| Facultatif | orderBundle |
Object | Objet contenant le panier de produits. La description des éléments imbriqués est donnée ci-dessous. |
| Facultatif | merchantLogin |
String [1..255] | Pour enregistrer une commande au nom d'un autre marchand, spécifiez son login (pour le compte API) dans ce paramètre. Ne peut être utilisé que si vous avez l'autorisation de consulter les transactions d'autres vendeurs ou si le vendeur spécifié est votre vendeur filial. |
| Facultatif | merchantName |
String | merchantFullName dans la passerelle de paiement. Nécessaire pour afficher le nom du vendeur dans la fenêtre payment request api. |
| Facultatif | dynamicCallbackUrl |
String [1..512] | Paramètre pour transmettre l'adresse dynamique pour recevoir les notifications callback "de paiement" pour la commande, activées pour le marchand (autorisation réussie, débit réussi, remboursement, annulation, rejet du paiement par timeout, rejet du paiement card present). Les notifications callback "non liées au paiement" (activation/désactivation de liaison, création de liaison), seront envoyées à l'adresse callback statique. |
| Facultatif | ip |
String [1..39] | Adresse IP du payeur. IPv6 est supporté dans toutes les requêtes (jusqu'à 39 caractères). |
| Facultatif | expirationDate |
String [19] | Date et heure d'expiration de la commande. Format : yyyy-MM-ddTHH:mm:ss.Si ce paramètre n'est pas transmis dans la requête, alors le paramètre sessionTimeoutSecs est utilisé pour déterminer le temps d'expiration de la commande. |
| Facultatif | postAddress |
String [1..255] | Adresse de livraison. |
| Facultatif | feeInput |
Integer [0..8] | Taille de la commission en unités minimales de la devise. La fonctionnalité doit être activée au niveau du vendeur dans la passerelle. |
| Condition | email |
String [1..40] | Courrier électronique pour affichage sur la page de paiement. Si les notifications client sont configurées pour le vendeur, le courrier électronique doit être spécifié. Exemple : client_mail@email.com. L'adresse de courrier électronique n'est pas vérifiée lors de l'enregistrement, elle sera vérifiée plus tard lors du paiement. |
| Facultatif | billingPayerData |
Object | Bloc avec les données d'enregistrement du client (adresse, code postal), nécessaire pour passer la vérification d'adresse dans le cadre des services AVS/AVV. Obligatoire, si la fonction est activée pour le vendeur du côté de la Passerelle de paiement. Voir paramètres imbriqués. |
| Facultatif | shippingPayerData |
Object | Objet contenant les données de livraison au client. Ce paramètre est utilisé pour l'authentification 3DS ultérieure du client. Voir paramètres imbriqués. |
| Facultatif | preOrderPayerData |
Object | Objet contenant les données de précommande. Ce paramètre est utilisé pour l'authentification 3DS ultérieure du client. Voir paramètres imbriqués. |
| Facultatif | orderPayerData |
Object | Objet contenant les données sur le payeur de la commande. Ce paramètre est utilisé pour l'authentification 3DS ultérieure du client. Voir paramètres imbriqués. |
| Facultatif | billingAndShippingAddressMatchIndicator |
String [1] | Indicateur de correspondance entre l'adresse de facturation du porteur de carte et l'adresse de livraison. Ce paramètre est utilisé pour l'authentification 3DS ultérieure du client. Valeurs possibles :
|
Ci-dessous sont présentés les paramètres du bloc billingPayerData (données sur l'adresse d'enregistrement du client).
| Obligatoire | Nom | Type | Description |
|---|---|---|---|
| Conditionnel | billingCity |
String [0..50] | Ville enregistrée pour une carte spécifique auprès de la Banque Émettrice. Obligatoire pour Visa. |
| Conditionnel | billingCountry |
String [0..50] | Pays enregistré pour la carte spécifique de la banque émettrice. Format : ISO 3166-1 (Alpha 2 / Alpha 3 / Number-3) ou nom du pays. Nous recommandons de transmettre le code ISO à deux/trois lettres du pays. Obligatoire pour Visa. |
| Conditionnel | billingAddressLine1 |
String [0..50] | Adresse enregistrée pour la carte spécifique auprès de la Banque Émettrice (adresse du payeur). Ligne 1. Obligatoire à transmettre pour la vérification AVS. Obligatoire pour Visa. |
| Facultatif | billingAddressLine2 |
String [0..50] | Adresse enregistrée pour la carte spécifique auprès de la Banque Émettrice. Ligne 2. |
| Facultatif | billingAddressLine3 |
String [0..50] | Adresse enregistrée pour une carte spécifique auprès de la Banque Émettrice. Ligne 3. |
| Facultatif | billingPostalCode |
String [0..9] | Code postal enregistré pour la carte spécifique auprès de la Banque Émettrice. Obligatoire à transmettre pour la vérification AVS. |
| Facultatif | billingState |
String [0..50] | État enregistré pour la carte spécifique auprès de la Banque Émettrice. Format : valeur complète du code ISO 3166-2, sa partie ou nom de l'état/région. Peut contenir uniquement des lettres de l'alphabet latin. Nous recommandons de transmettre le code ISO à deux lettres de l'état/région. |
| Obligatoire | payerAccount |
String [1..32] | Numéro de compte de l'expéditeur. |
| Conditionnel | payerLastName |
String [1..64] | Nom de famille de l'expéditeur. Obligatoire pour Visa. |
| Conditionnel | payerFirstName |
String [1..35] | Prénom de l'expéditeur. Obligatoire pour Visa. |
| Facultatif | payerMiddleName |
String [1..35] | Nom patronymique de l'expéditeur. |
| Facultatif | payerCombinedName |
String [1..99] | Nom complet de l'expéditeur. |
| Facultatif | payerIdType |
String [1..8] | Type du document d'identification fourni de l'expéditeur. Valeurs possibles :
|
| Facultatif | payerIdNumber |
String [1..99] | Numéro du document d'identification fourni de l'expéditeur. |
| Conditionnel | payerBirthday |
String [1..20] | Date de naissance de l'expéditeur au format YYYYMMDD. Obligatoire pour Visa. |
Description des paramètres de l'objet shippingPayerData :
| Caractère obligatoire | Nom | Type | Description |
|---|---|---|---|
| Facultatif | shippingCity |
String [1..50] | Ville du client (à partir de l'adresse de livraison) |
| Facultatif | shippingCountry |
String [1..50] | Pays du client |
| Facultatif | shippingAddressLine1 |
String [1..50] | Adresse principale du client (à partir de l'adresse de livraison) |
| Facultatif | shippingAddressLine2 |
String [1..50] | Adresse principale du client (à partir de l'adresse de livraison) |
| Facultatif | shippingAddressLine3 |
String [1..50] | Adresse principale du client (à partir de l'adresse de livraison) |
| Facultatif | shippingPostalCode |
String [1..16] | Code postal du client pour la livraison |
| Facultatif | shippingState |
String [1..50] | État/région de l'acheteur (à partir de l'adresse de livraison) |
| Facultatif | shippingMethodIndicator |
Integer [2] | Indicateur du mode de livraison. Valeurs possibles :
|
| Facultatif | deliveryTimeframe |
Integer [2] | Délai de livraison de la marchandise. Valeurs possibles :
|
| Facultatif | deliveryEmail |
String [1..254] | Adresse e-mail cible pour la livraison de la distribution numérique. Il est préférable de transmettre l'e-mail dans le paramètre de requête indépendant email (mais si vous le transmettez dans ce bloc, les mêmes règles s'appliqueront). |
Description des paramètres de l'objet preOrderPayerData :
| Obligatoire | Nom | Type | Description |
|---|---|---|---|
| Facultatif | preOrderDate |
String [10] | Date de livraison attendue (pour les achats en précommande) au format AAAAMMJJ. |
| Facultatif | preOrderPurchaseInd |
Integer [2] | Indicateur de placement par le client d'une commande pour une livraison disponible ou future. Valeurs possibles :
|
| Facultatif | reorderItemsInd |
Integer [2] | Indicateur que le client repasse une commande d'une livraison précédemment payée dans le cadre d'une nouvelle commande. Valeurs possibles :
|
Description des paramètres de l'objet orderPayerData.
| Obligatoire | Nom | Type | Description |
|---|---|---|---|
| Facultatif | homePhone |
String [7..15] | Téléphone fixe du titulaire de la carte. Il est nécessaire de toujours indiquer le code du pays, mais le signe + ou 00 au début peut être indiqué ou omis. Le numéro doit avoir une longueur de 7 à 15 chiffres. Ainsi, les valeurs suivantes sont possibles :
|
| Facultatif | workPhone |
String [7..15] | Téléphone professionnel du titulaire de la carte. Il est nécessaire de toujours indiquer le code du pays, mais le signe + ou 00 au début peut être indiqué ou omis. Le numéro doit avoir une longueur de 7 à 15 chiffres. Ainsi, les valeurs suivantes sont possibles :
|
| Facultatif | mobilePhone |
String [7..15] | Numéro de téléphone portable du titulaire de la carte. Il est nécessaire de toujours indiquer le code du pays, mais le signe + ou 00 au début peut être indiqué ou omis. Le numéro doit avoir une longueur de 7 à 15 chiffres. Ainsi, les valeurs suivantes sont possibles :
Pour les paiements par VISA avec autorisation 3DS, il est nécessaire d'indiquer soit l'adresse électronique, soit le numéro de téléphone du titulaire de la carte. Si vous avez configuré l'affichage du numéro de téléphone sur la page de paiement et que vous avez indiqué un numéro de téléphone incorrect, le client pourra le corriger sur la page de paiement. |
Description des paramètres dans l'objet orderBundle :
| Obligatoire | Nom | Type | Description |
|---|---|---|---|
| Facultatif | orderCreationDate |
String [19] | Date de création de la commande au format YYYY-MM-DDTHH:MM:SS. |
| Facultatif | customerDetails |
Object | Bloc contenant les attributs du client. La description des attributs de la balise est donnée ci-dessous. |
| Obligatoire | cartItems |
Object | Objet contenant les attributs des produits dans le panier. La description des éléments imbriqués est fournie ci-dessous. |
Description des paramètres dans l'objet customerDetails :
| Obligatoire | Nom | Type | Description |
|---|---|---|---|
| Facultatif | contact |
String [0..40] | Méthode de contact préférée par le client. |
| Facultatif | fullName |
String [1..100] | Nom complet du payeur. |
| Facultatif | passport |
String [1..100] | Série et numéro du passeport du payeur au format suivant : 2222888888
|
| Facultatif | deliveryInfo |
Object | Objet contenant les attributs de l'adresse de livraison. La description des éléments imbriqués est donnée ci-dessous. |
Description des paramètres dans l'objet deliveryInfo :
| Caractère obligatoire | Nom | Type | Description |
|---|---|---|---|
| Facultatif | deliveryType |
String [1..20] | Mode de livraison. |
| Obligatoire | country |
String [2] | Code de pays de livraison à deux lettres. |
| Obligatoire | city |
String [0..40] | Ville de destination. |
| Obligatoire | postAddress |
String [1..255] | Adresse de livraison. |
Description des paramètres dans l'objet cartItems :
| Obligatoire | Nom | Type | Description |
|---|---|---|---|
| Obligatoire | items |
Object | Élément du tableau avec les attributs de la position de marchandise. La description des éléments imbriqués est donnée ci-dessous. |
Description des paramètres dans l'objet items :
| Obligatoire | Nom | Type | Description |
|---|---|---|---|
| Obligatoire | positionId |
Integer [1..12] | Identifiant unique de la position de marchandise dans le panier. |
| Obligatoire | name |
String [1..255] | Désignation ou description de la position tarifaire sous forme libre. |
| Facultatif | itemDetails |
Object | Objet avec les paramètres de description de la position de marchandise. La description des éléments imbriqués est donnée ci-dessous. |
| Obligatoire | quantity |
Object | Élément décrivant la quantité totale des positions de marchandises d'un même positionId et ses unités de mesure. La description des éléments imbriqués est donnée ci-dessous. |
| Facultatif | itemAmount |
Integer [1..12] | Montant du coût de toutes les positions de marchandises d'un positionId dans les unités minimales de la devise. itemAmount est obligatoire à transmettre, seulement si le paramètre itemPrice n'a pas été transmis. Dans le cas contraire, la transmission d'itemAmount n'est pas requise. Si dans la requête les deux paramètres sont transmis : itemPrice et itemAmount, alors itemAmount doit être égal à itemPrice * quantity, dans le cas contraire la requête se terminera avec une erreur. |
| Facultatif | itemPrice |
Integer [1..18] | Montant du coût de la position de marchandise d'un positionId en argent dans les unités minimales de devise. |
| Facultatif | depositedItemAmount |
String [1..18] | Montant de débit pour un positionId en unités minimales de devise (par exemple, en centimes). |
| Facultatif | itemCurrency |
Integer [3] | Code de devise ISO 4217. Si non spécifié, considéré comme égal à la devise de la commande. |
| Obligatoire | itemCode |
String [1..100] | Numéro (identifiant) de la position de marchandise dans le système du magasin. |
Description des paramètres dans l'objet quantity :
| Obligatoire | Nom | Type | Description |
|---|---|---|---|
| Obligatoire | value |
Number [1..18] | Quantité de positions de marchandises de ce positionId. Pour indiquer les nombres fractionnaires, utilisez le point décimal. Maximum 3 chiffres après le point sont autorisés. |
| Obligatoire | measure |
String [1..20] | Unité de mesure de la quantité par position. |
Description des paramètres dans l'objet itemDetails :
| Obligatoire | Nom | Type | Description |
|---|---|---|---|
| Facultatif | itemDetailsParams |
Object | Paramètre décrivant les informations supplémentaires sur la position de marchandise. La description des éléments imbriqués est donnée ci-dessous. |
Description des paramètres dans l'objet itemDetailsParams :
| Obligatoire | Nom | Type | Description |
|---|---|---|---|
| Obligatoire | value |
String [1..2000] | Informations supplémentaires sur la position de marchandise. |
| Obligatoire | name |
String [1..255] | Dénomination du paramètre de description de la détaillisation de la position de marchandise |
Paramètres de l'objet applePay
Plus de détails peuvent être consultés dans le constructeur de boutons https://applepaydemo.apple.com/
| Obligatoire | Paramètre | Type | Description |
|---|---|---|---|
| Facultatif | buttonStyle |
String | Style d'affichage du bouton. Valeurs autorisées : 'black', 'white', 'white-outline'. Valeur par défaut : 'black'. |
| Facultatif | paymentRequest |
String | Description de la session de paiement Apple Pay. Plus de détails peuvent être lus dans la documentation officielle. Voir l'exemple ci-dessous. |
| Facultatif | paymentType |
String | Type d'apparence du bouton de paiement. Valeurs autorisées : plain, buy, donate, set-up, book, subscribe. Valeur par défaut : buy. Pour les types donate, book, subscribe la largeur du bouton doit être d'au moins 200 px. |
| Obligatoire | merchantId |
String |
merchantId dans Apple, par exemple 'website.com'. Ce site sera également utilisé comme label dans la fenêtre Apple Pay. Comme elle est limitée en longueur, le plus simple est d'afficher le domaine du site. |
| Obligatoire | language |
String [2] | Langue du bouton au format ISO 639-1. |
Exemple paymentRequest :
{
countryCode: 'BG',
currencyCode: 'BGN',
supportedNetworks: [
'masterCard',
'visa',
'electron',
'maestro'
],
merchantCapabilities: [
'supports3DS',
'supportsCredit',
'supportsDebit'
],
total: {
label: '',
amount: 1.00 // major units
},
requiredShippingContactFields: [
'postalAddress',
'name',
'phone',
'email'
]
}Paramètres de l'objet googlePay
| Obligatoire | Paramètre | Type | Description |
|---|---|---|---|
| Obligatoire | environment |
String | Environnement. S'il n'est pas spécifié, alors le bouton GPay ne s'affichera pas. Valeurs autorisées :
|
| Facultatif | emailRequired |
Boolean | Demander l'email lors du paiement via PaymentRequest API. Valeur par défaut : true. |
| Facultatif | phoneNumberRequired |
Boolean | Demander le téléphone lors du paiement via PaymentRequest API. Valeur par défaut : true. |
| Facultatif | billingAddressRequired |
Boolean | Demander l'adresse du payeur lors du paiement via PaymentRequest API. Valeur par défaut : true. |
| Facultatif | shippingAddressRequired |
Boolean | Demander l'adresse de livraison lors du paiement via PaymentRequest API. Valeur par défaut : false. |
| Facultatif | payerNameRequired |
Boolean | Demander le nom du payeur lors du paiement via PaymentRequest API. Valeur par défaut : false. |
| Condition | allowedCountryCodes |
Array of String | Liste des codes pays au format ISO 3166-1 alpha-2, où la livraison est disponible. Obligatoire, si shippingAddressRequired = true. |
| Facultatif | buttonColor |
String | Couleur du bouton Google Pay. Valeurs autorisées :
default. |
| Facultatif | buttonType |
String | Type d'inscription sur le bouton. Valeurs autorisées :
short. |
Générateur de code
Vous pouvez également générer rapidement du code pour l'initialisation du script Payment Widget dans l'Espace personnel. Pour cela, allez dans l'onglet Boutons rapides -> Générateur de code dans votre Espace personnel.
Cette page dispose d'un constructeur, qui ressemble à ceci :
L'onglet comprend les sections suivantes pour définir les paramètres d'initialisation du script :
-
Paramètres généraux - spécifiez les informations générales pour l'enregistrement de la commande dans la Passerelle de paiement :
- Activer le paiement via Apple Pay et/ou Google Pay,
- Numéro de commande,
- Montant (obligatoire),
- Devise (sélectionnez dans la liste),
- Langue (sélectionnez dans la liste),
- Environnement (test ou production)
- Page de paiement réussi et Page de paiement échoué (spécifiez l'URL ou sélectionnez l'URL standard).
- Demande de données utilisateur - spécifiez les données qui seront obligatoires lors du paiement via PaymentRequest API pour Google Pay. Cochez les cases correspondantes : Nom, E-mail, Numéro de téléphone, Adresse postale.
- Paramètres des boutons de paiement - spécifiez le type d'apparence et le style des boutons Apple Pay et Google Pay. Un aperçu du bouton est disponible sur l'onglet.
- Code à insérer sur votre page - cette section contient un aperçu du code d'initialisation du script selon les paramètres spécifiés. Ce code doit être inséré sur votre page.
Support par les navigateurs
| Environnement logiciel / Navigateurs | Apple Pay | Google Pay |
|---|---|---|
| iOS / iPadOS — Safari | Oui | Oui (checkout web) |
| iOS / iPadOS — Chrome / Edge / Firefox | Oui | Oui (checkout web) |
| macOS — Safari | Oui | Oui |
| macOS — Chrome / Edge / Firefox | Oui, via QR (iOS 18+) | Oui |
| Windows / Linux / ChromeOS — Chrome / Edge / Firefox | Oui, via QR (iOS 18+) | Oui |
| Android — Chrome / Edge / Firefox | Oui, via QR (iOS 18+) | Oui |
Test et déploiement
Environnement de test (UAT)
Connecter le script avec l'adresse https://dev.bpcbt.com/payment/.
<script
src="https://dev.bpcbt.com/payment/pay-buttons/pay-buttons.js"
id="pay-buttons">
</script>Environnement de production (PROD)
Connecter le script avec l'adresse https://dev.bpcbt.com/payment/.
<script
src="https://dev.bpcbt.com/payment/pay-buttons/pay-buttons.js"
id="pay-buttons">
</script>