Intégrer Stripe Payment Element dans Bubble.io : Guide complet

Bubble.io ne propose pas d'alternative à leur plugin Stripe de base. Lorsque vous souhaitez intégrer le paiement directement sur votre page, cela peut devenir compliqué. Voici comment procéder :

La solution est simple mais bien cachée : il suffit de coder ! Ne vous inquiétez pas, c'est très simple et direct.

Étapes pour afficher un Stripe Payment Element sur une page Bubble :

1. Avoir un compte Stripe et Bubble (surprenant, n'est-ce pas ?)

2. Créer un Payment Intent via l'API Connector de Bubble

3. Afficher le Payment Element

Rentrons dans le détail, en commençant par le Payment Intent :

Création du Payment Intent

Un Payment Intent représente la volonté de paiement du client pour vos produits ou services. Voici comment le créer sur Bubble :

1. Ajoutez un appel API dans l'API Connector de Bubble.

2. Pour l'appel API, vous aurez besoin de vos clés secrètes Stripe. Consultez la documentation Stripe pour savoir comment les trouver

3. Configurez l'appel API comme suit :

• Type de requête : POST

• URL : `https://api.stripe.com/v1/payment_intents`

• Mode : Action (pas Data)

• Header : `Authorization: Bearer votre_clé_api_secrète`

• Paramètres minimum :

  - `amount` : montant du paiement en centimes (multipliez le montant en euros par 100)

  - `currency` : code de la devise (ex : "eur", "usd", etc.)

4. Ajoutez l'action dans un workflow

Affichage du Payment Element

1. Installez le plugin Toolbox sur Bubble.

2. Ajoutez un élément HTML à votre page. C'est cet élément qui affichera le Payment Element.

3. Dans l'élément HTML, ajoutez le code suivant :

html

<script src="https://js.stripe.com/v3/"></script>
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Payer</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

4. Ajoutez une action "Run JavaScript" dans votre workflow, après l'appel API pour créer le Payment Intent.

Voici le script JavaScript complet à utiliser :

javascript

const stripe = Stripe('votrepublishablekey');
const appearance = {
  theme: 'minimal',
  variables: {
    colorPrimary: '#EEF167',
    colorBackground: '#212F3F',
    colorText: '#ffffff',
    colorDanger: '#df1b41',
    fontFamily: 'Inter, system-ui, sans-serif',
    spacingUnit: '2px',
    borderRadius: '8px',
    // Voir toutes les variables possibles dans la documentation Stripe
  }
};
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};
const clientSecret = 'Result of step 1 client secret';
const elements = stripe.elements({ clientSecret, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const {error} = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: 'Website home url'
    },
  });
  if (error) {
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Le client sera redirigé vers votre `return_url`.
    // Pour certaines méthodes de paiement comme iDEAL, le client sera d'abord
    // redirigé vers un site intermédiaire pour autoriser le paiement,
    // puis redirigé vers le `return_url`.
  }
});

N'oubliez pas de remplacer :

• `votrepublishablekey` par votre clé publique Stripe (format pk_test_... ou pk_live_...)

• `Result of step 1 client secret` par le résultat du call API précédent

• `Website home url` par l'URL de redirection après paiement

Personnalisation

Vous pouvez personnaliser l'apparence du Payment Element en modifiant les variables dans l'objet `appearance`. Ajustez les couleurs, la police et autres propriétés selon vos besoins.

Conclusion

Vous avez maintenant ajouté votre Stripe Payment Element avec une interface personnalisée ! Pour plus de détails sur la personnalisation et les options avancées, consultez la documentation officielle de Stripe

N'hésitez pas à expérimenter avec le moment où vous effectuez l'appel API (par exemple, au chargement de la page ou avec un bouton) !