Learn how to embed a custom WooshPay payment form in your website or application. The client- and server-side code builds a checkout form with Elements to complete a payment using various payment methods.Payment Flow#
There are few steps of using WooshPay SDK:1. Create a PaymentIntent#
Add an endpoint on your server that creates a PaymentIntent. A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s client secret(PaymentIntent number in this case) in the response to finish the payment on the client. We enable cards for you by default.2. Load wooshpay.js#
Use wooshpay.js to remain PCI compliant by ensuring that payment details are sent directly to WooshPay without hitting your server. Always load wooshpay.js from js.wooshpay.com to remain compliant. Don’t include the script in a bundle or host it yourself.3. Initialize WooshPay Elements#
Initialize the WooshPay Elements UI library with the client secret. Elements manages the UI components you need to collect payment details.4. Complete the payment on the client#
Complete the payment
Call confirmPayment(), passing along the PaymentElement and a return_url to indicate where WooshPay should redirect the user after they complete the payment. For payments that require authentication, WooshPay displays a modal for 3D Secure authentication or redirects the customer to an authentication page depending on the payment method. After the customer completes the authentication process, they’re redirected to the return_url.Handle errors#
If there are any immediate errors (for example, your customer’s card is declined), wooshpay.js returns an error. Show that error message to your customer so they can try again.Show a payment status message#
When WooshPay redirects the customer to the return_url, the payment_intent_client_secret query parameter is appended by wooshpay.js. Use this to retrieve the PaymentIntent to determine what to show to your customer.Get a Demo#
Modified at 2024-08-02 07:34:25
