HTML & CSS writing code

Hi everyone

I’m building a web page that contains a payment form ‘js card’

The payment provider has a guide to place the form in the external web page

But I have zero knowledge in web development

would anyone guide me where to start

I know about using HTML and JS and Classify but, its greek for me because the code part


You can use Bubble’s HTML element to paste in the code in the HTML tab. If you go to your editor’s Settings → SEO/metatags section you can paste in the CSS and Javascript code in the section labeled “script in the body”. If it isn’t acting right after doing that then maybe the " tags in the HTML portion should go in the “script in the body” section instead of on the HTML element itself.

1 Like

Thank you @williamtisdale

I will try this out

Hi @williamtisdale
I just tried putting the HTML code in the" script header "and the CSS in“script in the body”

But unfortunately didn’t work


The HTML code will go in the HTML element like below.
Screen Shot 2022-05-20 at 9.36.01 AM
Screen Shot 2022-05-20 at 9.39.05 AM
Then the JS and CSS needs to be like below.

@williamtisdale
appreciate your help , but here is the result
Uploading: ‏‏لقطة الشاشة (282).png…


Uploading: ‏‏لقطة الشاشة (284).png…


And you added the HTML element to the page?

please check the gifs , it illustrated the steps that I took
Part 1
Part 1

Part 2
Part 2

Is it possible to paste the code here?

Yes , sure

HTML

CSS

form-row {
width: 70%;
float: left;
background-color: #ededed;
}
#card-element {
background-color: transparent;
height: 40px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}

#card-element–focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}

#card-element–invalid {
border-color: #fa755a;
}

#card-element–webkit-autofill {
background-color: #fefde5 !important;
}

#submitbutton,#tap-btn{
align-items:flex-start;
background-attachment:scroll;background-clip:border-box;
background-color:rgb(50, 50, 93);background-image:none;
background-origin:padding-box;
background-position-x:0%;
background-position-y:0%;
background-size:auto;
border-bottom-color:rgb(255, 255, 255);
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;border-bottom-style:none;
border-bottom-width:0px;border-image-outset:0px;
border-image-repeat:stretch;border-image-slice:100%;
border-image-source:none;border-image-width:1;
border-left-color:rgb(255, 255, 255);
border-left-style:none;
border-left-width:0px;
border-right-color:rgb(255, 255, 255);
border-right-style:none;
border-right-width:0px;
border-top-color:rgb(255, 255, 255);
border-top-left-radius:4px;
border-top-right-radius:4px;
border-top-style:none;
border-top-width:0px;
box-shadow:rgba(50, 50, 93, 0.11) 0px 4px 6px 0px, rgba(0, 0, 0, 0.08) 0px 1px 3px 0px;
box-sizing:border-box;color:rgb(255, 255, 255);
cursor:pointer;
display:block;
float:left;
font-family:“Helvetica Neue”, Helvetica, sans-serif;
font-size:15px;
font-stretch:100%;
font-style:normal;
font-variant-caps:normal;
font-variant-east-asian:normal;
font-variant-ligatures:normal;
font-variant-numeric:normal;
font-weight:600;
height:35px;
letter-spacing:0.375px;
line-height:35px;
margin-bottom:0px;
margin-left:12px;
margin-right:0px;
margin-top:28px;
outline-color:rgb(255, 255, 255);
outline-style:none;
outline-width:0px;
overflow-x:visible;
overflow-y:visible;
padding-bottom:0px;
padding-left:14px;
padding-right:14px;
padding-top:0px;
text-align:center;
text-decoration-color:rgb(255, 255, 255);
text-decoration-line:none;
text-decoration-style:solid;
text-indent:0px;
text-rendering:auto;
text-shadow:none;
text-size-adjust:100%;
text-transform:none;
transition-delay:0s;
transition-duration:0.15s;
transition-property:all;
transition-timing-function:ease;
white-space:nowrap;
width:150.781px;
word-spacing:0px;
writing-mode:horizontal-tb;
-webkit-appearance:none;
-webkit-font-smoothing:antialiased;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-webkit-border-image:none;

}

Java

//pass your public key from tap’s dashboard
var tap = Tapjsli(‘pk_test_EtHFV4BuPQokJT6jiROls87Y’);

var elements = tap.elements({});
var style = {
base: {
color: ‘#535353’,
lineHeight: ‘18px’,
fontFamily: ‘sans-serif’,
fontSmoothing: ‘antialiased’,
fontSize: ‘16px’,
‘::placeholder’: {
color: ‘rgba(0, 0, 0, 0.26)’,
fontSize:‘15px’
}
},
invalid: {
color: ‘red’
}
};
// input labels/placeholders
var labels = {
cardNumber:“Card Number”,
expirationDate:“MM/YY”,
cvv:“CVV”,
cardHolder:“Card Holder Name”
};
//payment options
var paymentOptions = {
currencyCode:[“KWD”,“USD”,“SAR”],
labels : labels,
TextDirection:‘ltr’
}
//create element, pass style and payment options
var card = elements.create(‘card’, {style: style},paymentOptions);
//mount element
card.mount(‘#element-container’);
//card change event listener
card.addEventListener(‘change’, function(event) {
if(event.BIN){
console.log(event.BIN)
}
if(event.loaded){
console.log(“UI loaded :”+event.loaded);
console.log(“current currency is :”+card.getCurrency())
}
var displayError = document.getElementById(‘error-handler’);
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = ‘’;
}
});

// Handle form submission
var form = document.getElementById(‘form-container’);
form.addEventListener(‘submit’, function(event) {
event.preventDefault();

tap.createToken(card).then(function(result) {
console.log(result);
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById(‘error-handler’);
errorElement.textContent = result.error.message;
} else {
// Send the token to your server
var errorElement = document.getElementById(‘success’);
errorElement.style.display = “block”;
var tokenElement = document.getElementById(‘token’);
tokenElement.textContent = result.id;
console.log(result.id);
}
});
}

Can you share HTML code in text format too.

I tried but it automatically deleted by bubble io

You didn’t put the JavaScript inside script tags
<script>*Code goes here*</script>

If you want, copy and past all the code into labeled elements on your page then message me a link to your editor and I will hook it up.

This topic was automatically closed after 70 days. New replies are no longer allowed.