Last active
September 18, 2023 19:50
-
-
Save nicolasblanco/0b954cbcdbc98d98fa3d93522241bb83 to your computer and use it in GitHub Desktop.
Stripe.js elements integration inside a Elixir LiveView (Bootstrap styles)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Code handling the card payment | |
const payWithCard = function (stripe, card, clientSecret, liveView) { | |
stripe | |
.confirmCardPayment(clientSecret, { | |
payment_method: { | |
card: card, | |
}, | |
}) | |
.then(function (result) { | |
if (result.error) { | |
// TODO : Show error to your customer | |
console.log(result.error); | |
} else { | |
// The payment succeeded! | |
console.log(result.paymentIntent); | |
// Push the event to the LiveView and pass the paymentIntent | |
liveView.pushEvent("payment_success", result.paymentIntent); | |
} | |
}); | |
}; | |
// PaymentForm LiveView hook | |
Hooks.PaymentForm = { | |
mounted() { | |
console.log("Mounting payment form..."); | |
const form = this.el; | |
const stripePublishableKey = form.dataset.publishableKey; | |
const stripeClientSecret = form.dataset.clientSecret; | |
const style = { | |
base: { | |
lineHeight: "1.35", | |
fontSize: "1.11rem", | |
color: "#495057", | |
fontFamily: | |
'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif', | |
}, | |
}; | |
const stripe = Stripe(stripePublishableKey); | |
const elements = stripe.elements(); | |
// Card number | |
const card = elements.create("cardNumber", { | |
placeholder: "", | |
style: style, | |
}); | |
card.mount("#card-number"); | |
// CVC | |
const cvc = elements.create("cardCvc", { | |
placeholder: "", | |
style: style, | |
}); | |
cvc.mount("#card-cvc"); | |
// Card expiry | |
const exp = elements.create("cardExpiry", { | |
placeholder: "", | |
style: style, | |
}); | |
exp.mount("#card-exp"); | |
var validatePaymentLink = document.getElementById("validate-payment"); | |
validatePaymentLink.addEventListener( | |
"click", | |
function (event) { | |
event.preventDefault(); | |
event.target.disabled = true; | |
// Complete payment when the submit button is clicked | |
payWithCard(stripe, card, stripeClientSecret, this); | |
}.bind(this) | |
); | |
}, | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- This is the LiveView form code. The @payment_intent variable is the Stripe PaymentIntent returned by the | |
Stripe API and created on the server side before displaying the payment form --> | |
<form phx-hook="PaymentForm" | |
data-client-secret="<%= Map.fetch!(@payment_intent, "client_secret") %>" | |
data-publishable-key="<%= @stripe_publishable_key %>" | |
> | |
<div class="d-flex justify-content-between align-items-end mb-4"> | |
<h5 class="mb-0">Pay with your card</h5> | |
<div class="text-muted"><i class="fab fa-cc-amex fa-2x mr-2"> </i><i class="fab fa-cc-visa fa-2x mr-2"> </i><i class="fab fa-cc-mastercard fa-2x"></i></div> | |
</div> | |
<div class="row" id="addNewCard"> | |
<div class="form-group col-md-6"> | |
<label class="form-label" for="card-name">Name on Card</label> | |
<input class="form-control" type="text" name="card-name" placeholder="Name on card" id="card-name"> | |
</div> | |
<div class="form-group col-md-6"> | |
<label class="form-label" for="card-number">Card Number</label> | |
<span id="card-number" class="form-control"> | |
<!-- Stripe Card Element --> | |
</span> | |
</div> | |
<div class="form-group col-md-4"> | |
<label class="form-label" for="expiry-date">Expiry Date</label> | |
<span id="card-exp" class="form-control"> | |
<!-- Stripe Card Expiry Element --> | |
</span> | |
</div> | |
<div class="form-group col-md-4"> | |
<label class="form-label" for="cvv">CVC/CVV</label> | |
<span id="card-cvc" class="form-control"> | |
<!-- Stripe CVC Element --> | |
</span> | |
</div> | |
<div class="form-group col-md-4"> | |
<label class="form-label" for="zip">ZIP</label> | |
<input class="form-control" type="text" name="zip" placeholder="123" id="zip"> | |
</div> | |
</div> | |
</form> | |
<button class="btn btn-primary px-3" href="#" id="validate-payment"> | |
Next step<i class="fa-chevron-right fa ml-2"></i> | |
</a> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment