How to embed a Pay with CardX button

CardX Lightbox

“Sections” can be added to every Wix site to build it out. Lightbox’s script tags can be placed in an “HTML Embed” section to display the “Pay with credit card” button wherever you specify on the webpage. We can use the “nested” Lightbox script to get Lightbox to render on the page itself.

Follow the instructions below to see how to get the embedded CardX Lightbox set up on your own page.

Add custom code

In the Wix Dashboard, navigate to settings, then Custom Code
In the Custom Code page, select Add Custom Code and paste the code snippet into the window that comes up:
Rename it to Lightbox
Under Add Code to Pages select “Load code on each new page”
Under Place Code in select “Body – start”
Click Apply

</script>

Which Wix website editor are you using?

USING ADI: Place the button in the desired space

Navigate to the Wix site editor.
Add a new section to your site
Select HTML Embed
Add the Lightbox script code, ensuring to include the data-nested="true" parameter is included in the script tags:
1. Example Lightbox script to use - make sure to change out the data-account with your username
Publish the new webpage in the top right-hand corner.
Visit your Wix webpage to see the Lightbox pop up on the whole page!

</div>

<script

id="cardx_lightbox_script"

src="https://lightbox.cardx.com/v1/lightbox.min.js"

data-account="USERNAME_HERE"

data-button="#pay_with_cardx"

data-callback="callback"

data-mode="payment"

data-nested="true">

</script>

function callback(err, message) {

if (err) {

console.error(err);

}

console.log(message);

}

</script>

USING Wix Editor: Place the button in the desired space

Navigate to the Wix Site Editor
In the left menu bar click the + icon, select the Embed menu and select Embed a Widget under Custom Embeds
Double click on the gray box that comes up to open up the HTML settings.
Select Code under What do you want to add? and paste in the code below. Make sure to edit the "USERNAME_HERE" spot with your company's username
Once you click Update it will change to the CardX button. You can resize the box around it.
Place the button as desired and publish the new webpage in the top right-hand corner.
Visit your Wix webpage to see the Lightbox pop up on the whole page!