Accept Dynamic Stripe Payments with HTML iFrame
Learn how to integrate dynamic Stripe payments using Corvid (a.k.a. Wix Code) and an HTML iFrame. Stripe is a leading alternative to PayPal and features a more streamlined payments process for end users.
This example allows you to choose between membership options and then pay via Stripe. When a paid membership option is chosen, a Stripe credit card form will appear to facilitate the payment. This example is set to 'test mode' and therefore does not accept real credit card numbers. Try the example below with this dummy credit card number 4000005540000008 for a successful payment or 4000000000009995 for a declined payment.
The following HTML code sets up the Stripe payment form, and is placed in an HTML iFrame within your Wix website. The HTML iFrame in this example is called #htmlStripe. You need to create a developer account with Stripe at www.Stripe.com and follow the steps to get your public key for use in the code below. You can also get a public test key for testing your form while you are building it, but will need to use your public live key to take real payments.
The following code is added to the Page Code and Backend Code respectively. The Page Code handles the dropdown options to select the membership and price. The getCart function handles the price, currency and transaction description on your account. Note that the price which Stripe uses is in cents, and therefore may need to be multiplied by 100 as in this example, depending on how you've set up your pricing. Add an onMessage event listener to the HTML iFrame, called htmlStripe_message in this example. The htmlStripe_message function checks to see if the payment was successful or not - and returns a success or failure text to the user.
The Backend Code houses your actual charge function which has your secret key from Stripe. The secret key must not be shared with anyone and therefore is in the Backend Code so that it is not visible in your page code. The Backend code is named 'stripeProxy.jsw' and the charge function is imported from the Page Code.